three.js dev template

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/SAOPass.js"></script>

<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/SAOShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/DepthLimitedBlurShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/UnpackDepthRGBAShader.js"></script>

<canvas class="canvas1"></canvas>
<canvas class="canvas2"></canvas>

CSS

html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
    }

    canvas {
      width: 50% !important;
      height: 50% !important;
    }

JavaScript

(function() {
      var composer, renderPass, saoPass;
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

      var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementsByClassName('canvas1')[0]
      });
      renderer.autoClear = false;
      renderer.setSize(window.innerWidth, window.innerHeight);

      var geometry = new THREE.BoxGeometry(1, 1, 1);
      var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
      });
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;


      composer = new THREE.EffectComposer(renderer);
      renderPass = new THREE.RenderPass(scene, camera);
      composer.addPass(renderPass);
      saoPass = new THREE.SAOPass(scene, camera, false, true);
      saoPass.renderToScreen = true;
      composer.addPass(saoPass);
      window.addEventListener('resize', onWindowResize, false);


      animate();


      function animate() {
        requestAnimationFrame(animate);

        composer.render(scene, camera);
      }

      function onWindowResize() {
        var width = window.innerWidth || 1;
        var height = window.innerHeight || 1;
        var devicePixelRatio = window.devicePixelRatio || 1;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
        composer.setSize(width, height);
      }
    })();

    (function() {
      var composer, renderPass, saoPass;
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

      var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementsByClassName('canvas2')[0]
      });
      renderer.autoClear = false;
      renderer.setSize(window.innerWidth, window.innerHeight);

      var geometry = new THREE.BoxGeometry(1, 1, 1);
      var material =...