CODEWITHSUNDEEP
javascriptthree.js
ArUn
ArUn

Reputation: 1337

Not getting a better result for Ambient Occlusion in three.js

I have gone through the example 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 );

Which looks pretty good and the edges of the blocks are visible and highlighted, on my code here

the edges are not that in the example . Is there any thing am missing

Upvotes: 0

Views: 215

Answers (2)

WestLangley
WestLangley

Reputation: 104833

In order to get quality results with the SSAOShader, you need an accurate measure of depth in the depth buffer. As explained here, for a perspective camera, most of depth buffer precision is close to the near plane. That means you will get the best results if the object is located in the near part of the frustum.

So, by that argument, if your far plane is too close, then the object will be too close to the back of the frustum, and quality will be reduced.

On the other hand, if the far plane is too distant (as it is in your case), the object will be located in such a thin sliver of depth, that due to the precision of the depth buffer, there is not enough variability in depth across the object.

So you have to set your camera's near and far planes at values that give you the best results.

three.js r.75

Upvotes: 3

leota
leota

Reputation: 1756

It depends by your camera.far attribute. You've set it too high (100000). Just set it to 1000 and you should have better results:

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

Changing this will require you to move camera closer to your scene, otherwise it won't be visible at the startup and you'll need to zoom.

Camera.position.z = 200;

These changes worked fine for me.

Upvotes: 1

Related Questions