Get WebGLDeferredRenderer working with SSAO

Question

Here are comparisons to show that I really configured SSAO correctly.

WebGLRenderer with EffectsComposer + SSAO

WebGLDeferredRenderer with SSAO password

I am trying to mix WebGLDeferredRenderer with the SSAO composer effect as follows:

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 ... well ... nothing.

What am I doing wrong? How can I enable SSAO in deferred renderer?

Answer 1

I don’t know why this works, but try replacing:

renderer.render( scene, camera, depthTarget );

FROM

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