three.js - 片段着色器中的 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);

在此先感谢您的帮助:) 这让我困惑了 AGES。

编辑:打开和关闭 depthTest 的图像。在我看来，深度测试确实将它们按正确的顺序排列？

深度测试假:

depthTest 为真:

Answer 1

您的 JSFiddle 示例有几个实例，它与自己斗争。您正在尝试在 Three.js 中设置 Material 混合模式，但随后您将其覆盖:

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/

...尽管有太多的属性和制服被传递到您的几何体，无法真正深入了解深度未按预期工作的原因。你为什么路过 u_camera ，当您已经拥有 cameraPosition ，以及您的 position属性长度为 1 ?感觉就像是原始 WebGL 与 Three.js 的结合。