Three.js and ssao

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