three.js - 自定义着色器 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);