three.js ~ SSAO Example

2016-14-03

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, scene, light, renderer, geometry, material, mesh1, mesh2, gl;
var depthMaterial, depthRenderTarget, effectComposer;

var controls;
var impostorMaterial;

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.z = 10;
    camera.position.y = 0;
    
    var ambient = new THREE.AmbientLight( 0x404040 );
    scene.add(ambient);
    
    scene.add(camera);
    
    // controls
    controls = new THREE.OrbitControls( camera );

    var mat = new THREE.MeshNormalMaterial();
    var geometry2 = new THREE.SphereGeometry( 0.5, 16, 16 );
    
		var geometry = new THREE.Geometry();
	
  	for (var i = 0; i < 400; i++) {
      var mesh = new THREE.Mesh(geometry2, mat);
      mesh.position.set(Math.random() * 7 - 3.5, Math.random() * 7 - 3.5, Math.random() * 7 - 3.5);
      THREE.GeometryUtils.merge(geometry, mesh);
    }

		var sceneMesh = new THREE.Mesh(geometry, mat);
    scene.add(sceneMesh);
    
    renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;
    renderer.sortObjects = true;
    
    // Setup render pass
    var renderPass = new THREE.RenderPass(scene, camera);
    // Setup depth pass
    depthMaterial = new THREE.MeshDepthMaterial();
    depthMaterial.depthPacking = THREE.RGBADepthPacking;
    depthMaterial.blending = THREE.NoBlending;
    var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
    depthRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, pars);
    // Setup SSAO pass
    var ssaoPass = new THREE.ShaderPass(THREE.SSAOShader);
    ssaoPass.renderToScreen = true;
    //ssaoPass.uniforms[ "tDiffuse" ].value will be set by ShaderPass
    ssaoPass.uniforms['tDepth'].value = depthRenderTarget.texture;
   ...