javascript - Three.js 中的环境光遮挡没有获得更好的结果

Question

我已经完成了 here 示例.

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;

// postprocessing

composer = new THREE.EffectComposer( Renderer );
composer.addPass( new THREE.RenderPass( Scene, Camera ) );

depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

var effect = new THREE.ShaderPass( THREE.SSAOShader );
effect.uniforms[ 'tDepth' ].value = depthTarget;
effect.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
effect.uniforms[ 'cameraNear' ].value = Camera.near;
effect.uniforms[ 'cameraFar' ].value = Camera.far;
effect.renderToScreen = true;
composer.addPass( effect );

看起来相当不错， block 的边缘可见并突出显示，在我的代码 here

边缘与示例中的不同。有什么遗漏的吗

Answer 1

为了使用 SSAOShader 获得高质量的结果，您需要精确测量深度缓冲区中的深度。正如所解释的here ，对于透视相机来说，大部分深度缓冲精度都接近近平面。这意味着如果对象位于平截头体的附近部分，您将获得最佳结果。

因此，根据这个论点，如果您的远平面太近，那么物体将太靠近截锥体的背面，并且质量将会降低。

另一方面，如果远平面太远(就像您的情况一样)，则该物体将位于这样一个深度很薄的区域，由于深度缓冲区，整个对象的深度没有足够的变化。

因此，您必须将相机的近和远平面设置为能够获得最佳效果的值。

三.js r.75