three.js所：應用SSAO（屏幕空間環境光遮蔽），以置換貼圖

已經我已經正確地實現了屏幕空間環境光遮蔽在我three.js所項目，並運行完美，像這樣：three.js所：應用SSAO（屏幕空間環境光遮蔽），以置換貼圖

//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); 
}

如何存檔應用於位移貼圖網格的正確Screen Screen Ambient Occlusion？謝謝。

[UPDATE]：經過一番努力，我嘗試了這個程序，讓場景中的每個孩子都用位移貼圖來定義一個新的場景的overrideMaterial等於depthMaterial的位移貼圖參數的子材質。

    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;  
        };

這個解決方案聽起來不錯，但不起作用。

來源

2017-09-09 DuffDan

您正在使用SSAO和位移圖。在實例化深度材質時，您需要指定位移貼圖。

depthMaterial = new THREE.MeshDepthMaterial({ 

    depthPacking: THREE.RGBADepthPacking, 

    displacementMap: displacementMap, 
    displacementScale: displacementScale, 
    displacementBias: displacementBias 

});

three.js所r.87

來源

2017-09-09 18:17:36 WestLangley

HI，我很困惑遺憾。因此，我需要爲場景中實現位移貼圖的每種材質創建一個depthMaterial？ – DuffDan

好吧，這有點棘手。然後，對於多個網格物體，_maybe_可以通過mesh.onBeforeRender = function（渲染器，場景，相機，幾何體，材質，組）來重置「scene.overrideMaterial」）{scene.overrideMaterial = this.overrideMaterial; };'只是一個假設... – WestLangley

我會試試看，謝謝！ – DuffDan

three.js所：應用SSAO（屏幕空間環境光遮蔽），以置換貼圖

回答

相關問題