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

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

上

边缘不是示例中的边缘。有没有遗漏的东西

Answer 1

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

所以，根据这个论点，如果你的飞机距离太近，那么物体将太靠近平截头体的背面，质量会降低。

另一方面，如果远平面太远（就像你的情况那样），那么对象将位于这样一个薄的深度条中，这是由于深度缓冲区，对象的深度变化不足。

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

three.js r.75

Answer 2

取决于你的camera.far属性。您已将其设置得太高（100000）。只需将其设置为1000即可获得更好的结果：

 Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 1000);

更改此设置需要您将相机移近场景，否则在启动时无法显示，您需要进行缩放。

Camera.position.z = 200;

这些改变对我来说很好。

在three.js中没有为Ambient Occlusion获得更好的结果

2 个答案: