Learn Three.js - Third Edition

Adding a bloom effect to the scene with THREE.BloomPass

The effect, that you see in the lower-left corner is called the bloom effect. When you apply the bloom effect, the bright areas of a scene will be made more prominent and will bleed into the darker areas. The code to create THREE.BloomPass is as follows:

var bloomPass = new THREE.BloomPass();var effectCopy = new THREE.ShaderPass(THREE.CopyShader);effectCopy.renderToScreen = true;var bloomComposer = new THREE.EffectComposer(renderer);bloomComposer.addPass(renderedScene);bloomComposer.addPass(bloomPass);bloomComposer.addPass(effectCopy);

If you compare this with THREE.EffectComposer, which we used with THREE.FilmPass, you'll notice that we add an additional pass, effectCopy. This step, ...