Postprocessing Passes

Types of passes in Three.js

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

Note: Most of the shaders and passes shown in this chapter can be configured. When we want to apply one ourselves, it is usually easiest to just add a simple UI that allows us to play around with the properties. That way, we can see what a good setting for our 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 pass clears the current texture buffer.

• CubeTexturePass: This can be used to render a skybox in the scene.

• DotScreenPass: This applies a layer of black dots, representing the original image across the screen.

• FilmPass: This simulates a TV screen by applying scanlines and distortions.

• GlitchPass: This shows an electronic glitch on the screen at a random time interval.

• HalfTonePass: This adds a halftone effect to the scene. With a halftone effect, the scene is rendered as a set of colored glyphs (circles, squares, and so on) of various sizes.

• LUTPass: With LUTPass, we can apply a color correction step to the scene after it is rendered.

• MaskPass: This allows us to apply a mask to the current image. Subsequent passes are only applied to the masked area.

• OutlinePass: This renders the outline of the objects in the scene.

• RenderPass ...