How to use the three.js SSAO shader?

Question

I'm trying to render a scene with the SSAO post-processing shader. There aren't any errors but I can't see any difference between the scene rendered with and without the SSAO pass. I initialize the renderer like this:

// Create WebGL Renderer
var renderParameters = { antialias: false, alpha: false, clearColor: 0xFFFFFF };
renderer = new THREE.WebGLRenderer(renderParameters);
renderer.autoClear = false;
renderer.setSize(viewportWidth, viewportHeight);

// Create render targets
renderTargetParametersRGB = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
renderTargetParametersRGBA = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGBA);
colorTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGB);

// The shader pass to draw the scene
var renderScenePass = new THREE.RenderPass(scene, camera);

// Copy to screen render pass
var copyToScreenPass = new THREE.ShaderPass(THREE.CopyShader);
copyToScreenPass.renderToScreen = true;

// SSAO render pass
effectSSAO = new THREE.ShaderPass(THREE.SSAOShader);
effectSSAO.uniforms['tDepth'].texture = depthTarget;
effectSSAO.uniforms['size'].value.set(width, height);
effectSSAO.uniforms['cameraNear'].value = camera.near; // 1
effectSSAO.uniforms['cameraFar'].value = camera.far;  // 1000
//effectSSAO.uniforms.onlyAO.value = 1;

// Setup post processing chain
composer = new THREE.EffectComposer(renderer, colorTarget);
composer.addPass(effectSSAO);
composer.addPass(copyToScreenPass); 

// Depth pass
depthPassPlugin = new THREE.DepthPassPlugin();
depthPassPlugin.renderTarget = depthTarget;
renderer.addPrePlugin(depthPassPlugin);

In the render function, I render the scene like this:

requestAnimationFrame(render);
depthPassPlugin.enabled = true;
renderer.render(scene, camera, composer.renderTarget2, true);
depthPassPlugin.enabled = false;
composer.render(0.1);

As I said before, everything seems to work fine, but there is no AO effect visible on the screen. Maybe I'm just using the wrong parameter values? I already made sure that the depth pass is updated by rendering the depthTarget to the sceen. If I turn effectSSAO.uniforms.onlyAO.value on, I get a pretty "flat" brownish rendering of the actual scene (including textures), but still no AO. Can somebody give me an advice what to try next?

Answer 1

There is an example working with the current release of three.js (r56) at https://twitter.com/mrdoob/status/300919764262477824

Here is the direct link to the code: http://goo.gl/RzfwH

Thanks to Altered Qualia and MrDoob for the example code and the three.js library!