Может быть, вы могли бы помочь мне здесь, пожалуйста: Я пытаюсь визуализировать цифровую модель рельефа с помощью сетки и нарисовать на ней линии в стиле joyplot. Это делается с помощью пользовательского шейдера, и в настоящее время это выглядит как на картинке.

Текущая визуализация джойплота

Черные линии выглядят размытыми, но я хочу, чтобы они выглядели четкими (никаких серых оттенков, только черно-белые). Может ли кто-нибудь подсказать мне, как изменить шейдер фрагмента, чтобы добиться такого эффекта?

Это текущий шейдер:

function vertexShader() {
  return 
    varying vec3 vUv;

    void main() {
      vUv = position;

      vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * modelViewPosition;
    }
  
}

function fragmentShader() {
  return 
      uniform vec3 colorA;
      uniform vec3 colorB;
      varying vec3 vUv;

      void main() {
        gl_FragColor = vec4(mix(colorA, colorB, vUv.y - (5.0 * floor(vUv.y / 5.0))), 1.0);
      }
  
  }

melkoo

Ответов: 1

Ответы (1)

Если вам нужны только черные и белые пиксели, достаточно написать colorA или colorB в gl_FragColor. Замените mix на троичный оператор (?:):

gl_FragColor = vec4(mix(colorA, colorB, vUv.y - (5.0 * floor(vUv.y / 5.0))), 1.0);

float w = vUv.y - (5.0 * floor(vUv.y / 5.0));
gl_FragColor = vec4(w < 0.5 ? colorA : colorB, 1.0);

mix линейно интерполирует между двумя значениями, но тернарный оператор выбирает только одно из значений.


В качестве альтернативы можно использовать step, которая генерирует ступенчатую функцию путем сравнения двух значений и возвращает либо 0.0, либо 1.0:

float w = step(0.5, vUv.y - (5.0 * floor(vUv.y / 5.0)));
gl_FragColor = vec4(mix(colorA, colorB, w), 1.0);

2022 WebDevInsider