javascript - ThreeJS AdditiveBlending、ShaderMaterial、DepthTest问题

Question

我正在创建一个包含各种对象的场景，并受到这个 CodePen ( https://codepen.io/gnauhca/pen/VzJXGG) 的启发。在示例中，在 ShaderMaterial 上禁用了 DepthTest，但我需要启用它，因为我想在粒子波前面渲染对象。但是当我启用 DepthTest 时，我得到了一个奇怪的效果，似乎只有 Material 的左侧是用 AdditiveBlending 渲染的，而右边的视线似乎松散了混合/透明度。此外，当我倾斜相机时，效果会根据 Angular 变得更好或更差。例如，请参阅此 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