Three.js ShaderMaterial深度异常问题

-道不虚行只在人-

已于 2023-03-15 09:00:39 修改

阅读量1.3k

点赞数 8

分类专栏： 002_Web3D可视化文章标签： javascript 前端 3d

于 2023-03-13 17:57:38 首次发布

本文链接：https://blog.youkuaiyun.com/u010657801/article/details/129500470

版权

002_Web3D可视化专栏收录该内容

6 篇文章

订阅专栏

在Three.js中使用自定义着色器时遇到了物体深度异常，被错误遮挡的问题。关闭renderer的对数深度缓冲区可以修复遮挡问题，但会导致闪面问题重现。为解决这个问题，文章提出了在着色器中添加ShaderChunk.logdepthbuf的相关片段，这既能处理深度异常，也能消除闪面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考:
https://blog.youkuaiyun.com/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}
        }
        `;

闪面消失
遮挡关系正确