To set up Three.js for postprocessing, we have to make a couple of changes to our current setup, as follows:
- Create THREE.EffectComposer, which can be used to add postprocessing passes.
- Configure THREE.EffectComposer so that it renders our scene and applies any additional postprocessing steps.
- In the render loop, use THREE.EffectComposer to render the scene, apply for the passes, and show the output.
As always, we will illustrate an example that you can use to experiment with and can adapt for your own purposes. The first example in this chapter can be accessed from 01-basic-effect-composer.html. You can use the menu in the top-right corner to modify the properties of the postprocessing step used in this example. In this example, we render a simple globe and add an old television-like effect to it, as follows...