Three.js：将SSAO（Screen Space Ambient Occlusion）应用于置换贴图

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 已“正确”应用于原始球体（带有奇怪的透明人工制品），但我需要将其应用于球体的“置换顶点”）

这是我的作曲家通行证：

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

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

这是 composer 的渲染循环

if (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。

                    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