Three.js：ディスプレイスメントマップにSSAO（スクリーンスペースアンビエントオクルージョン）を適用します

Question

は、私はこのように、正しく私のThree.jsプロジェクトにスクリーンスペースアンビエントオクルージョンを実装し、そして完璧な実行しましています

//Setup SSAO pass 
depthMaterial = new THREE.MeshDepthMaterial(); 
depthMaterial.depthPacking = THREE.RGBADepthPacking; 
depthMaterial.blending = THREE.NoBlending; 

var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true }; //Stancilbuffer true because not effect transparent object 
depthRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, pars); 
depthRenderTarget.texture.name = "SSAOShader.rt"; 
ssaoPass = new THREE.ShaderPass(THREE.SSAOShader); 
///////ssaoPass.uniforms[ "tDiffuse" ].value will be set by ShaderPass 
ssaoPass.uniforms["tDepth"].value = depthRenderTarget.texture; 
ssaoPass.uniforms['size'].value.set(window.innerWidth, window.innerHeight); 
ssaoPass.uniforms['cameraNear'].value = camera.near; 
ssaoPass.uniforms['cameraFar'].value = camera.far; 
ssaoPass.uniforms['radius'].value = radius; 
ssaoPass.uniforms['aoClamp'].value = aoClamp; 
ssaoPass.uniforms['lumInfluence'].value = lumInfluence; 

しかし、displacementMap（SSAOを有効にせずに正しく実行される）でマテリアルを設定すると、これが結果になります。これは

）SSAOは（奇妙-trasparent-artificat付き）オリジナルの球に「正しく」に適用されることに注意してください、私は球の「ずれた頂点」に適用する必要があります私の作曲は渡し：

//Main render scene pass 
    postprocessingComposer.addPass(renderScene); 

    //Post processing pass 
    if (ssaoPass) { 
     postprocessingComposer.addPass(ssaoPass); 
    } 

そして（postprocessingComposer）場合、これは作曲

でレンダリングループである{

if (ssaoPass) { 

     //Render depth into depthRenderTarget 
     scene.overrideMaterial = depthMaterial; 
     renderer.render(scene, camera, depthRenderTarget, true); 

     //Render composer 
     scene.overrideMaterial = null; 
     postprocessingComposer.render(); 

     renderer.clearDepth(); 
     renderer.render(sceneOrtho, cameraOrtho); 
    } 
    else { 
     //Render loop with post processing (no SSAO, becasue need more checks, see above) 
     renderer.clear(); 
     postprocessingComposer.render();   
     renderer.clearDepth(); 
     renderer.render(sceneOrtho, cameraOrtho); 
    } 
} 
else { 
    //Simple render loop (no post-processing) 
    renderer.clear(); 
    renderer.render(scene, camera); 
    renderer.clearDepth(); 
    renderer.render(sceneOrtho, cameraOrtho); 
} 

変位マップを持つメッシュに適用された正しいスクリーンスペースアンビエントオクルージョンはどのようにアーカイブできますか？ありがとう。

[更新]： いくつかの仕事の後、私は、変位マップを使ってシーン内のすべての子に対してこの手順を試して、子マテリアルの変位マップパラメータを持つdepthMaterialに等しいシーンの新しいoverrideMaterialを定義しました。

    var myDepthMaterial = new THREE.MeshDepthMaterial({ 
         depthPacking: THREE.RGBADepthPacking, 
         displacementMap: child.material.displacementMap, 
         displacementScale: child.material.displacementScale, 
         displacementBias: child.material.displacementBias 
        }); 
        child.onBeforeRender = function (renderer, scene, camera, geometry, material, group) { 
         scene.overrideMaterial = myDepthMaterial;  
        }; 

この解決策はうまくいくが、うまくいかない。

Answer 1

ディスプレイスメントマップでSSAOを使用しています。深度マテリアルをインスタンス化するときは、変位マップを指定する必要があります。

depthMaterial = new THREE.MeshDepthMaterial({ 

    depthPacking: THREE.RGBADepthPacking, 

    displacementMap: displacementMap, 
    displacementScale: displacementScale, 
    displacementBias: displacementBias 

}); 

three.js r.87