Five steps:
1. Create a Composer so you could add all kinds of Pass in. It’s like adding all kinds of lens filters (Pass) to a camera (Composer).
var composer = new THREE.EffectComposer(webGLRenderer);
2. Decide what content you want to shoot, and feed it to the camera (Composer):
//content stream is composed of "scene" and "camera" var renderPass = new THREE.RenderPass(scene, camera); composer.addPass(renderPass);
3. Decide which effects to apply to the content, and add chosen filter or filters (Pass) to the camera (Composer). We could choose from:
// 1. BloomPass: blurry, glowing effect var bloomPass = new THREE.BloomPass(3, 25, 5, 256); composer.addPass(bloomPass) // 2. DotScreenPass: renders the screen with black dots var dotScreenPass = new THREE.DotScreenPass(); composer.addPass(dotScreenPass); ...
4. Decide how to output the content, set render destination, and output it from camera (Composer). We could choose from:
// 1. EffectCopy, which output the result as is: var effectCopy = new THREE.ShaderPass(THREE.CopyShader); effectCopy.renderToScreen = true; composer.addPass(effectCopy); // 2. EffectFilm, which output the result in an old style TV screen fashion (with thin colourful stripes): var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false); effectFilm.renderToScreen = true; composer.addPass(effectFilm); ...
5. Render our scene through the Composer we set up:
var clock = new THREE.Clock() function render() { var delta = clock.getDelta(); composer.render(delta); //parameter must be set with render requestAnimationFrame(render); } render();