三个js Shader Material 修改深度缓冲

Question

在 Three js 中，我使用顶点着色器为大型几何体制作动画。

我还在输出上设置了景深效果。问题是景深效果似乎不知道在我的顶点着色器中创建的更改定位。它正在响应，就好像几何体处于原始位置一样。

如何更新 shader/material 中的深度信息，以便 DOF 正常工作？ THREE.Material有个depthWrite属性，但好像不是那个...

我的景深通道是这样工作的：

renderer.render( this.originalScene, this.originalCamera, this.rtTextureColor, true );

this.originalScene.overrideMaterial = this.material_depth;
renderer.render( this.originalScene, this.originalCamera, this.rtTextureDepth, true );

rtTextureColor 和 rtTextureDepth 都是 WebGLRenderTargets。出于某种原因，rtTextureColor 是正确的，但 rtTextureDepth 不是

这是我的顶点着色器：

int sphereIndex = int(floor(position.x/10.));

            float displacementVal = displacement[sphereIndex].w;
            vec3 rotationDisplacement = displacement[sphereIndex].xyz;

            vNormal = normalize( normalMatrix * normal );
            vec3 vNormel = normalize( normalMatrix * viewVector );
            intensity = abs(pow( c - dot(vNormal, vNormel), p ));


            float xVal = (displacementVal*orbitMultiplier) * sin(timeValue*rotationDisplacement.x);
            float yVal = (displacementVal*orbitMultiplier) * cos(timeValue*rotationDisplacement.y);
            float zVal = 0;

            vec3 rotatePosition = vec3(xVal,yVal,zVal);

            vec3 newPos = (position-vec3((10.*floor(position.x/10.)),0,0))+rotatePosition;
            vec4 mvPosition;
            mvPosition = (modelViewMatrix *  vec4(newPos,1));

            vViewPosition = -mvPosition.xyz;
            vec4 p = projectionMatrix * mvPosition;
            gl_Position = p;

Answer 1

因为您在渲染到 this.rtTextureDepth 之前设置了场景覆盖 material (this.originalScene.overrideMaterial = this.material_depth)，所以渲染器不使用您的自定义顶点着色器。场景覆盖 material 是一个 THREE.MeshDepthMaterial，它包含自己的顶点着色器。

要尝试的一件事是编写一个 THREE.ShaderMaterial，其工作方式类似于 THREE.MeshDepthMaterial，但使用您的自定义顶点着色器。修改内置着色器并不简单，但我会从这样的事情开始：

var depthShader = THREE.ShaderLib['depth'];
var uniforms = THREE.UniformsUtils.clone(depthShader.uniforms);

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: /* your custom vertex shader */
    fragmentShader: depthShader.fragmentShader
});

您必须为自定义顶点着色器添加制服，并为内置深度着色器设置制服；在 three.js 来源中搜索 WebGLRenderer.js MeshDepthMaterial。

三个js Shader Material 修改深度缓冲

Three js Shader Material modify depth buffer

javascript

three.js