JavaScript

Render Post Processing with Three.js

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();
Standard