如何渲染具有位移頂點的對象的深度緩衝區？

我修改這個例子：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