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

ThreeJS添加剂混合，着色器材质，深度测试问题

1 个答案: