片段着色器中的Alpha gl_FragColor不起作用

Question

我正在使用Three.js和ShaderMaterial用片段着色器绘制点几何。

我希望每个点都有模糊的边缘，但是我无法使alpha起作用，它只是变成白色。

当像素完全透明以形成一个圆圈时，我可以将其丢弃，但是模糊会逐渐淡化为白色，然后突然被切除。

这是我在屏幕上看到的：

三个JS代码

var shaderMaterial = new THREE.ShaderMaterial( {
      uniforms:     uniforms,
      vertexShader:   document.getElementById( 'vertexshader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
      blending: THREE.NormalBlending,
      depthTest: true,
      transparent: true,
      clipping: true
    });

    var points = new THREE.Points(geometry, shaderMaterial);

片段着色器：

//translate gl_PointCoord to be centered at 0,0
vec2 cxy = 2.0 * gl_PointCoord - 1.0;

//calculate alpha based on distance from centre
//(I'm doubling it to get a less gradual fade) 
float newAlpha = (1.0-distance(cxy, vec2(0.0,0.0))) * 2.0;

if (newAlpha < 0.01)
{
    //discard pixels that have ~0 alpha
    discard;
}

gl_FragColor = vec4( newR, newG, newB, newAlpha);

在此先感谢您的帮助：）这让我感到困惑。

编辑：打开和关闭depthTest的图像。在我看来，深度测试确实可以使它们处于正确的顺序？

depthTest否：

depthTest true：

Answer 1

您的JSFiddle示例包含几个与之抗争的实例。您正在尝试在Three.js中设置材料混合模式，但是您可以使用

覆盖它。

var gl = renderer.context;
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

您要的是animationFrame，然后在其中执行setTimeout，从而消除了使用animationFrame的所有好处。

我能够通过以下方式得到一些改善

blending: THREE.NormalBlending,
transparent: true,
depthWrite: false,
depthTest: true

您可以在此处查看修复程序：https://jsfiddle.net/yxj8zvmp/

...尽管传递到几何图形的属性和制服过多，无法真正深入了解深度未按预期工作的原因。当您已经拥有cameraPosition并且您的u_camera属性的长度为position时，为什么要传递1？感觉就像原始WebGL与Three.js的融合。