Effect Composer
SSAO
HTML
<script src="http://mrdoob.github.com/three.js/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="http://mrdoob.github.com/three.js/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: #000000;
margin: 0;
overflow: hidden;
}
JavaScript
// from: http://goo.gl/RzfwH
var camera, scene, renderer;
var group;
var depthMaterial, depthTarget, composer;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 10, 1000);
camera.position.z = 500;
scene = new THREE.Scene();
group = new THREE.Object3D();
scene.add(group);
var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshBasicMaterial({
color: 0xffffff
});
for (var i = 0; i < 100; i++) {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 400 - 200; // random() [0,1)
mesh.position.y = Math.random() * 400 - 200;
mesh.position.z = Math.random() * 400 - 200;
mesh.rotation.x = Math.random();
mesh.rotation.y = Math.random();
mesh.rotation.z = Math.random();
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 10 + 1;
group.add(mesh);
}
// depth
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;
// postprocessing
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
depthTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat
});
var effect = new THREE.ShaderPass(THREE.SSAOShader);
effect.uniforms['tDepth'].value = depthTarget;
...