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.

Have you had a look at this example? http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html — mrdoob, Jun 26 '12 at 20:52
yes but i don't want to use the "DepthPassPlugin" used in this example — user1482030, Jun 29 '12 at 21:16

Andrew Berg · Answer 1 · 2013-03-13T20:56:56.537

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

Hi, welcome to Stack Overflow! A link to a potential solution is always welcome, but please add context around the link so your fellow users will have some idea what it is and why it’s there . Always quote the most relevant part of an important link. Take a look at [how to answer](http://stackoverflow.com/questions/how-to-answer). — Jesse, Mar 13 '13 at 20:21
Hi Jesse, was describing the link as "a simple example of SSAO" not enough? — Andrew Berg, Mar 13 '13 at 20:25
eh - because the question includes source code, I'd suggest replying in kind with *some* source code at least. For example, think of the author (and even future users) understanding your explanation, but not knowing how to *implement* it. — Jesse, Mar 13 '13 at 20:30

Three.js and ssao

1 Answers1