Effect Composer

SSAO

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/SSAOShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js"></script>

<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/MaskPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/ShaderPass.js"></script>

CSS

body {
    background-color: #a0a0a0;
    margin: 0;
    overflow: hidden;
}

JavaScript

// from: http://goo.gl/RzfwH

var one = {};
var two = {};
var renderer;

init();
animate();

function init() {
		renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
      preserveDrawingBuffer: false
    });
    renderer.autoClear = false;
    renderer.setSize(200, 200);
    document.body.appendChild(renderer.domElement);
    
	var rtParameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: true
  };
  
  
  /**
   * THE FIRST SCENE 
   * With a white plane covering 200 x 200. Should totally be visible 
   */
	one.camera = new THREE.OrthographicCamera(-100, 100, 100, -100, 1, 10000);
  one.camera.position.z = 500;
  one.scene = new THREE.Scene();
  one.light = new THREE.AmbientLight(0xffffff);
  
  one.geometry = new THREE.PlaneGeometry(200, 200, 32);
  one.material = new THREE.MeshBasicMaterial({color: 0xffffff});
  one.plane = new THREE.Mesh(one.geometry, one.material);
  one.plane.position.set(0, 0, 0);
  one.scene.add(one.plane);
  
  one.renderPass = new THREE.RenderPass(one.scene, one.camera);
  one.effectCopy = new THREE.ShaderPass(THREE.CopyShader);
  one.effectCopy.renderToScreen = true;

  one.composer = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(200, 200, rtParameters));
  one.composer.setSize(200, 200);
  one.composer.addPass(one.renderPass);
  one.composer.addPass(one.effectCopy);
  

  
  /**
   * THE SECONE SCENE
   * Which is empty. So it should still render the first scenes content rather than the background div
   */
	two.camera = new THREE.OrthographicCamera(-25, 25, 25, -25, 1, 10000);
  two.camera.position.z = 500;
  two.scene = new THREE.Scene();
  two.light = new THREE.AmbientLight(0xffffff);
  
  two.renderPass = new THREE.RenderPass(two.scene, two.camera);
  two.effectCopy = new THREE.ShaderPass(THREE.CopyShader);
  two.effectCopy.renderToScreen = true;

  two.composer = new THREE.EffectComposer(renderer, new...