自定义着色器 Joyplotstlye

Question

也许您可以在这里帮助我：我正在尝试使用网格可视化数字高程模型并在其上绘制 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);
      }
  
  }

Answer 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);