Get WebGLDeferredRenderer working with SSAO

Question

Here are comparisons, to show that I do indeed have SSAO set-up correctly.

WebGLRenderer with EffectsComposer + SSAO pass

WebGLDeferredRenderer with SSAO pass

I'm trying to mix WebGLDeferredRenderer with the SSAO composer effect like so:

renderer = new THREE.WebGLDeferredRenderer({
  antialias: true,
  tonemapping: THREE.FilmicOperator,
  brightness: 2.5,
  scale: 1.0,
  width: renderWidth,
  height: renderHeight
});

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;

composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );

depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
  minFilter: THREE.NearestFilter,
  magFilter: THREE.NearestFilter,
  format: THREE.RGBAFormat,
  antialias: true
});

var ssao = new THREE.ShaderPass( THREE.SSAOShader );
ssao.uniforms[ 'tDepth' ].value = depthTarget;
ssao.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssao.uniforms[ 'cameraNear' ].value = camera.near;
ssao.uniforms[ 'cameraFar' ].value = camera.far * 0.8;
ssao.uniforms[ 'aoClamp' ].value = 0.3;
ssao.uniforms[ 'lumInfluence' ].value = 0.1;

renderer.addEffect( ssao );

scene.overrideMaterial = depthMaterial;
renderer.render( scene, camera, depthTarget );
scene.overrideMaterial = null;

renderer.render( scene, camera );

The results are.. well.. nothing.

What am I doing wrong? How would I go about enabling SSAO within a deferred renderer?

Answer 1

Not sure why this works but try replacing:

renderer.render( scene, camera, depthTarget );

With:

renderer.renderer.render( scene, camera, depthTarget );