如何渲染具有位移顶点的对象的深度缓冲区？答案

【问题标题】：How do you render the depth buffer of objects with displaced vertices?如何渲染具有位移顶点的对象的深度缓冲区？
【发布时间】：2013-10-16 20:32:54
【问题描述】：

我已经修改了这个例子：http://stemkoski.github.io/Three.js/Shader-Fireball.html

并插入：

var depthShader = THREE.ShaderLib["depthRGBA"];
var depthUniforms = THREE.UniformsUtils.clone(depthShader.uniforms);
depthMaterial = new THREE.ShaderMaterial({
     fragmentShader : depthShader.fragmentShader,
     vertexShader : depthShader.vertexShader,
     uniforms : depthUniforms
});
depthMaterial.blending = THREE.NoBlending;

depthTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
    minFilter : THREE.NearestFilter,
    magFilter : THREE.NearestFilter,
    format : THREE.RGBAFormat
});

quadCamera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerHeight / 2, window.innerWidth / 2, window.innerHeight / -2, -1000, 2000);
quadCamera.position.z = 100;

var shader = THREE.UnpackDepthRGBAShader;
var uniforms = new THREE.UniformsUtils.clone(shader.uniforms);
uniforms.tDiffuse.value = depthTarget;
quadMaterial = new THREE.ShaderMaterial({
    vertexShader : shader.vertexShader,
    fragmentShader : shader.fragmentShader,
    uniforms : uniforms
});

var mesh = new THREE.Mesh(new THREE.PlaneGeometry(window.innerWidth, window.innerHeight*1.5), quadMaterial);
mesh.position.z = -500;
mesh.position.y = 200;
quadScene = new THREE.Scene();
quadScene.add(mesh);

并将渲染函数更改为：

function render() {
   renderer.overrideMaterial = depthMaterial;
   renderer.render(scene, camera, depthTarget, true);
   renderer.overrideMaterial = null;
   renderer.render(quadScene, quadCamera);
}

它看起来像：http://i.imgur.com/hiHLc8g.png

如何让深度缓冲区看起来像深度缓冲区而不是黑色？
替换顶点的自定义 ShaderMaterials 是否会正确写入深度缓冲区？因为我有另一个带有置换顶点对象的项目，并且深度不考虑置换。有没有办法做到这一点？

【问题讨论】：

标签： javascript html three.js webgl depth-buffer

【解决方案1】：

嗯，我觉得这架飞机也是黑色的很奇怪。因为在您的理论中，如果仅用于置换顶点，平面不会被正确着色吗？

也许相机近和远剪辑平面值已关闭？因此，它不能正确使用深度。您是否检查过近值和远值是否在合理范围内？

【讨论】：