THREE.ShaderMaterial深度信息丢失

Question

在我的场景中，我有两个重叠/交叉平面网格。第一个使用MeshBasicMaterial，第二个使用自定义ShaderMaterial（简单剪切片段着色器）。似乎具有ShaderMaterial的网格没有任何深度信息，因为另一个平面总是呈现在它上面。

如何将具有ShaderMaterial的平面网格添加到场景中，以便正确显示与其他网格的碰撞和重叠？我是否必须在片段着色器中执行此操作，还是我必须在材质中设置它？

编辑：我做了两个不同的变体：A和B. A：工作原样，Plane Meshes都有深度信息并使用MeshBasicMaterial：

var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.DoubleSide } );

变体A的截图，两个使用MeshBasicMaterial交叉的平面网格

变体B在一个平面网格上使用自定义ShaderMaterial：

    var movieMaterial = new THREE.ShaderMaterial({
    uniforms: {
      texture: { type: "t", value: videoTexture }
    },
    vertexShader: [
        "varying vec2 vUv;",
        "void main() {",
            "vUv = uv;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
        "}",
    ].join("\n"),
    fragmentShader: [
        "varying vec2 vUv;",
        "uniform sampler2D texture;",
        "void main() {",
            "gl_FragColor = texture2D(texture, vUv);",
            "if (gl_FragColor.r + gl_FragColor.b + gl_FragColor.g > 1.5) discard;",
        "}",
    ].join("\n"),
    side:THREE.DoubleSide
});  

Variant B的屏幕截图，现在一个Plane Mesh正在使用自定义ShaderMaterial

现在深度信息丢失了。我发布的代码是唯一的区别。

提前致谢

Answer 1

这是一个古老的问题，但是我最近遇到了这个问题。问题在于对数深度缓冲区的使用。传递给ShaderMaterial的着色器无法立即使用。选项一是禁用对数深度缓冲区。方法二是将一些glsl代码附加到三者提供的着色器中，如下所示：

import { ShaderChunk } from 'three';

const VertexShader = ShaderChunk.common + '\n' + ShaderChunk.logdepthbuf_pars_vertex + `
  ...
  void main() {
    ...
    ` + ShaderChunk.logdepthbuf_vertex + `
  }
`;

const FragmentShader = ShaderChunk.logdepthbuf_pars_fragment + `
  ...
  void main() {
    ...
    ` + ShaderChunk.logdepthbuf_fragment + `
  }
`;