ThreeJS AdditiveBlending、ShaderMaterial、DepthTest 问题

Question

我正在创建一个包含各种对象的场景，并受到这个 CodePen (https://codepen.io/gnauhca/pen/VzJXGG) 的启发。在示例中，ShaderMaterial 上的 DepthTest 被禁用，但我需要启用它，因为我想在粒子波前面渲染对象。但是当我启用 DepthTest 时，我得到了一个奇怪的效果，似乎只有材料的左侧是用 AdditiveBlending 渲染的，而右侧的视线似乎失去了混合/透明度。此外，当我倾斜相机时，效果会根据角度变得更好或更差。例如，请参阅此 jsfiddle：https://jsfiddle.net/hnmftqjp/ 和展示我的问题的 gif：https://imgur.com/2p3yBAM

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: waveVertexShader,
    fragmentShader: waveFragmentShader,

    blending: THREE.AdditiveBlending,
    depthTest: true,
    transparent: true
});

非常感谢任何帮助！

Answer 1

如果你想启用depthTest，同时通过你的网格保持透明AdditiveBlending，你需要设置depthWrite: false：

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: waveVertexShader,
    fragmentShader: waveFragmentShader,
    blending: THREE.AdditiveBlending,
    depthTest: true,
    depthWrite: false,
    transparent: true
});

See here for details on depthTest and depthWrite attributes

或者，如果你想在第一个网格之后渲染另一个网格，所以它被绘制在其他所有对象的“顶部”，你可以像这样设置第二个对象的渲染顺序：mesh.renderOrder = 1

See here for docs on Mesh.renderOrder