三、ShaderMaterial深度信息丢失答案

【问题标题】：THREE.ShaderMaterial depth information lost三、ShaderMaterial深度信息丢失
【发布时间】：2017-10-05 11:13:11
【问题描述】：

在我的场景中，我有两个重叠/交叉的平面网格。第一个使用 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

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

提前致谢

【问题讨论】：

电视周围的那个切口看起来很奇怪，我必须承认我不确定发生了什么。一个可行的例子会有所帮助。您的代码中没有任何内容表明存在问题。您从纹理中采样一些颜色，并根据一些阈值和逻辑将其丢弃。不知道透支对你有什么作用。
@pailhead 知道为什么应用 ShaderMaterial 会杀死深度信息以使电视始终呈现在顶部吗？
不，ShaderMaterial 不应该做任何不同于其他材质的事情。如果您设置depthWritedepthTestdepthFunc，您将更改深度逻辑的工作方式。否则默认。更改透明度可能会更改渲染顺序，但看起来您并没有激活它。无论哪种方式，按原样使用丢弃，这应该可以工作，顺序不重要。
你能做个小提琴吗？

标签： three.js

【解决方案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 + `
  }
`;

【讨论】：