J'ai modifié cet exemple: http://stemkoski.github.io/Three.js/Shader-Fireball.htmlComment restituez-vous le tampon de profondeur des objets dont les sommets sont déplacés?
et inséré:
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);
Et changé la fonction rendre à:
function render() {
renderer.overrideMaterial = depthMaterial;
renderer.render(scene, camera, depthTarget, true);
renderer.overrideMaterial = null;
renderer.render(quadScene, quadCamera);
}
et il ressemble à: http://i.imgur.com/hiHLc8g.png
- Comment puis-je obtenir le tampon de profondeur pour ressembler à une profondeur b uffer et ne pas être noir?
- Les ShaderMaterials personnalisés qui déplacent les sommets vont-ils écrire correctement dans depthbuffer? Parce que j'ai un autre projet avec des objets de vertices déplacés et la profondeur ne tient pas compte du déplacement. Y-a-t-il un moyen de faire ça?