Three.js and ssao - three.js

Question

I can't manage to use ssao with three.js.
I tried to follow the webgl_postprocessing_dof.html example :
here is the function initPostprocessing
function initPostprocessing() {
postprocessing.scene = new THREE.Scene();
postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
postprocessing.camera.position.z = 100;
postprocessing.scene.add( postprocessing.camera );
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars ); //modifier 500
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
var ssao_shader = new THREE.ShaderMaterial(THREE.ShaderExtras[ "ssao" ]); //modification
postprocessing.ssao_uniforms = THREE.UniformsUtils.clone( ssao_shader.uniforms );
postprocessing.ssao_uniforms[ "tDepth" ].value=1;
postprocessing.ssao_uniforms[ "tDiffuse" ].value=1;
postprocessing.ssao_uniforms[ "fogEnabled" ].value=1;
postprocessing.ssao_uniforms[ "fogFar" ].value=100;
postprocessing.ssao_uniforms[ "fogNear" ].value=0;
postprocessing.ssao_uniforms[ "onlyAO" ].value=0;
postprocessing.ssao_uniforms[ "aoClamp" ].value=0.1;
postprocessing.ssao_uniforms[ "lumInfluence" ].value=0.1;
postprocessing.materialSSAO = new THREE.ShaderMaterial( {
uniforms: postprocessing.ssao_uniforms,
vertexShader: ssao_shader.vertexShader,
fragmentShader: ssao_shader.fragmentShader
});
}
and the render function :
function render() {
renderer.clear();
// Render depth into texture
scene.overrideMaterial=material_depth;
renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
// Render color into texture
scene.overrideMaterial = null;
renderer.render( scene, camera, postprocessing.rtTextureColor);
//
postprocessing.materialSSAO.uniforms[ "tDepth" ].texture=postprocessing.rtTextureDepth;
postprocessing.materialSSAO.uniforms[ "tDiffuse" ].texture=postprocessing.rtTextureColor;
postprocessing.scene.overrideMaterial = postprocessing.materialSSAO;
renderer.render( postprocessing.scene, postprocessing.camera );
}
Maybe I misunderstood something.

Answer 1

I don't believe you can use the SSAO shader as a material in the way that you are. Materials are combined with geometry to draw meshes. Where as the SSAO shader is meant to draw its output not on top of multiple geometries but to a screen aligned quad.
typically you'd use the effect composer class to accomplish this.
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( postprocessing.scene, postprocessing.camera ) );
then instead of creating a material the SSAO is added as a shader pass to the composer and rendered to the screen
var effect = new THREE.ShaderPass( THREE.SSAOShader );
effect.uniforms[ 'tDepth' ].value = postprocessing.rtTextureDepth;
effect.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
effect.uniforms[ 'cameraNear' ].value = postprocessing.camera.near;
effect.uniforms[ 'cameraFar' ].value = postprocessing.camera.far;
effect.renderToScreen = true;
composer.addPass( effect );
and finally in the render function you use the composer to render as opposed to the renderer
function render(){
scene.overrideMaterial = material_depth;
renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureDepth );
scene.overrideMaterial = null;
composer.render();
}
this also removes the necessity to have a seperate diffuse render target since the composer takes care of that for you with the render pass.
for a complete example of SSAO without the plugin see this one by alteredqualia: http://bit.ly/ZIPj2J