Learn Three.js - Third Edition

Configuring THREE.EffectComposer for postprocessing

Each pass is executed in the sequence it is added to THREE.EffectComposer. The first pass that we add is THREE.RenderPass. This pass renders our scene using the camera provided, but doesn't output it to the screen yet:

var renderPass = new THREE.RenderPass(scene, camera); 
composer.addPass(renderPass); 

With the addPass function, we add a  THREE.RenderPass to  THREE.EffectComposer. The next step is to add another pass that will output its result to the screen. Not all the available passes allow for this (more on that later), but THREE.FilmPass, which is used in this example, allows us to output the result of its pass to the screen. To add THREE.FilmPass, we need to first create it and add ...