Three.js ShaderMaterial深度异常问题

参考:
https://blog.csdn.net/yunduanzhijie/article/details/123093730
https://www.195440.com/3295

问题描述

Three.js中，自定义着色器，使用ShaderMaterial实例化材质，添加到物体上后，出现深度异常，被其他物体遮挡的问题。

• 物体实际摆放的位置关系：
  
• 物体实际渲染出来的遮挡关系：
  

解决方式一

renderer中开启了对数深度缓冲区,将其关闭后，shader表现正常。

// 更改前
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
    logarithmicDepthBuffer: true, // 对数深度缓冲区
});

// 将对数深度缓冲区改为false
logarithmicDepthBuffer: false, 

• 遮挡关系渲染正确：
  
• 但是，之前之所以开启对数缓冲区，是为了解决闪面问题，改为false无法解决闪面问题。
• z轴距离相近的面发生闪面的情况：
  

解决方式二

使用ShaderChunk对自己写的着色器进行补充处理。

• 在自己的片元着色器和顶点着色器中，增加红框标出的部分
  

// 片元着色器
const fragmentShader = `
        ${ShaderChunk.logdepthbuf_pars_fragment}
        precision mediump float;
        void main() {
          gl_FragColor = vec4(0, 1, 1, 0.7);
          ${ShaderChunk.logdepthbuf_fragment}
        }
        `;
        
// 顶点着色器
 const vertexShader = `
        ${ShaderChunk.logdepthbuf_pars_vertex}
        bool isPerspectiveMatrix(mat4) {
            return true;
        }
        varying vec4 m_pos;
        void main () {
              vec4 modelPosition = modelMatrix * vec4(position, 1.0);
              gl_Position = projectionMatrix *  viewMatrix * modelPosition;
              ${ShaderChunk.logdepthbuf_vertex}
        }
        `;

• 闪面消失
  
• 遮挡关系正确