三.ShaderMaterial深度信息丢失

Question

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

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

编辑：我制作了两种不同的变体：A 和 B。 A：按其应有的方式工作，两个平面网格都有深度信息并使用 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
});  

变体 B 的屏幕截图，现在一个平面网格正在使用自定义 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 + `
  }
`;