javascript - ThreeJS - 从点中删除白 Angular

Question

我在做什么
我正在使用片段着色器渲染具有不同顶点颜色的圆形点。我本质上希望这些点充当性能更高的球体，在一直放大时抗锯齿。
问题
它在一个方向上工作(见左图)，但另一个方向有白 Angular (见右图)。我如何摆脱白色 Angular 落？

我试过的

如果点都是相同的颜色，我可以关闭 depthTest 并且它会起作用。但是，点必须是不同的颜色。关闭具有不同颜色的 depthTest 使其看起来像一个虫洞。

我试过 alphaTest 无济于事。我确实让 alphaTest 处理纹理而不是自定义片段着色器(透明背景上的圆圈的 png)，但是当足够放大时它看起来很模糊。

我确实注意到 Angular 落的颜色等同于我传递给 renderer.setClearColor 的任何颜色。

我已经尝试过混合选项，但我对混合还不够熟悉，无法理解我在做什么。

代码

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
const material = new THREE.ShaderMaterial({
  transparent: true,
  vertexColors: THREE.VertexColors,
  uniforms: {
      size: {value: 20},
      scale: {value: 10},
  },
  defines: {
    USE_MAP: "",
    USE_SIZEATTENUATION: ""
  },
  vertexShader: THREE.ShaderLib.points.vertexShader,
  fragmentShader: `
  in vec3 vColor;
  void main() {
      vec2 xy = gl_PointCoord.xy - vec2(0.5);
      float ll = length(xy);
      gl_FragColor = vec4(vColor, step(ll, 0.5));
  }
  `
});
const points = new THREE.Points( geometry, material );
scene.add( points );

谢谢您的帮助!

Answer 1

要去除这些 Angular ，您可以丢弃 UV 位置长度大于 0.5 的像素:

  in vec3 vColor;
  void main() {
      vec2 xy = gl_PointCoord.xy - vec2(0.5);
      float ll = length(xy);
      if (ll > 0.5) discard; // this line does the trick
      gl_FragColor = vec4(vColor, step(ll, 0.5));
  }