Setting Up Three.js for Postprocessing

Configuring postprocessing

In our first example of this course, we set up a rendering loop that we’ve used throughout the course, in order to render and animate our scenes. For postprocessing, we need to make a couple of changes to this setup to allow Three.js to postprocess the final rendering.

To set up Three.js for postprocessing, we have to make a couple of changes to our current setup, as follows:

1. Create EffectComposer, which can be used to add postprocessing passes.

2. Configure EffectComposer so that it can render our scene and apply any additional postprocessing steps.

3. In the render loop, use EffectComposer to render the scene, apply the configured postprocessing steps, and show the output.

Example: Basic setup

We will show an example that we can use to experiment with and adapt for our own ...