¿Cómo usar el shader SSAO three.js?

webgl

Question

Intento renderizar una escena con el sombreador de posprocesamiento de SSAO. No hay ningún error, pero no puedo ver ninguna diferencia entre la escena procesada con y sin el pase SSAO. Inicializo el renderizador de esta manera:

// Create WebGL Renderer
var renderParameters = { antialias: false, alpha: false, clearColor: 0xFFFFFF };
renderer = new THREE.WebGLRenderer(renderParameters);
renderer.autoClear = false;
renderer.setSize(viewportWidth, viewportHeight);

// Create render targets
renderTargetParametersRGB = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
renderTargetParametersRGBA = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGBA);
colorTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGB);

// The shader pass to draw the scene
var renderScenePass = new THREE.RenderPass(scene, camera);

// Copy to screen render pass
var copyToScreenPass = new THREE.ShaderPass(THREE.CopyShader);
copyToScreenPass.renderToScreen = true;

// SSAO render pass
effectSSAO = new THREE.ShaderPass(THREE.SSAOShader);
effectSSAO.uniforms[''tDepth''].texture = depthTarget;
effectSSAO.uniforms[''size''].value.set(width, height);
effectSSAO.uniforms[''cameraNear''].value = camera.near; // 1
effectSSAO.uniforms[''cameraFar''].value = camera.far;  // 1000
//effectSSAO.uniforms.onlyAO.value = 1;

// Setup post processing chain
composer = new THREE.EffectComposer(renderer, colorTarget);
composer.addPass(effectSSAO);
composer.addPass(copyToScreenPass); 

// Depth pass
depthPassPlugin = new THREE.DepthPassPlugin();
depthPassPlugin.renderTarget = depthTarget;
renderer.addPrePlugin(depthPassPlugin);

En la función de render, renderizo la escena así:

requestAnimationFrame(render);
depthPassPlugin.enabled = true;
renderer.render(scene, camera, composer.renderTarget2, true);
depthPassPlugin.enabled = false;
composer.render(0.1);

Como dije antes, todo parece funcionar bien, pero no hay ningún efecto AO visible en la pantalla. Tal vez estoy usando los valores de los parámetros equivocados? Ya me aseguré de que el pase de profundidad se actualiza al presentar el depthTarget a la vista. Si activo effectSSAO.uniforms.onlyAO.value, obtengo una bonita representación "plana" de la escena real (incluyendo texturas), pero todavía no hay AO. ¿Alguien puede darme un consejo qué probar después?

Answer 1

Hay un ejemplo que trabaja con el lanzamiento actual de three.js (r56) en https://twitter.com/mrdoob/status/300919764262477824

Aquí está el enlace directo al código: http://goo.gl/RzfwH

¡Gracias a Altered Qualia y MrDoob por el código de ejemplo y la biblioteca three.js!