Learn Three.js - Third Edition

Using THREE.FilmPass to create a TV-like effect

We already looked at how to create THREE.FilmPass in the first section of this chapter, so let's look at how to use this effect with, THREE.TexturePass from the previous section:

var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false); effectFilm.renderToScreen = true;var effectFilmComposer = new THREE.EffectComposer(renderer);effectFilmComposer.addPass(renderedScene);effectFilmComposer.addPass(effectFilm);effectFilmComposer.addPass(effectCopy);

The only step that we need to take to use THREE.TexturePass is to add it as the first pass in your composer. Next, we can just add THREE.FilmPass, and the effect will be applied. THREE.FilmPass takes four parameters, as shown in the following table: ...