Postprocessing passes

Three.js comes with a number of postprocessing passes that you can use directly with THREE.EffectComposer.

Use a simple GUI to experiment

Most of the shaders and passes shown in this chapter can be configured. When you want to apply one yourself, it is usually easiest to just add a simple UI that allows you to play around with the properties. That way, you can see what a good setting for your specific scenario is.

The following list shows all the postprocessing passes available in Three.js:

• AdaptiveToneMappingPass: This render pass adapts the luminosity of a scene, based on the amount of light available in it.
• BloomPass: This is an effect that makes lighter areas bleed into darker areas. This simulates an effect wherein the camera is overwhelmed by extremely bright light.
• BokehPass: This adds a bokeh effect to the scene. With a bokeh effect, the foreground of the scene is in focus, while the rest is out of focus.
• ClearPass: This spill...