Chapter 821: How to Use Post Processing (Manual)

Core Idea

Three.js supports post-processing effects (bloom, depth-of-field, glitch, anti-aliasing) via EffectComposer, which renders the scene to an offscreen buffer and then runs it through an ordered chain of passes before the result reaches the screen.

Key Concepts

• EffectComposer: the addon that manages the render-to-buffer-then-filter workflow; replaces calling renderer.render() directly with composer.render() in the animation loop.
• Pass chain order: passes execute in the order they're added; the last enabled pass in the chain is what's rendered to the screen.
• RenderPass: typically first in the chain — renders the actual scene/camera into the buffer that later passes consume.
• OutputPass: typically last — performs color-space conversion and tone mapping for final display.
• Built-in passes: many pre-defined effects (bloom, glitch, DOF, etc.) live in the examples/jsm/postprocessing directory and can be dropped into the chain.
• ShaderPass: wraps a custom shader as a pass; CopyShader is a minimal starting point that just copies the composer's read buffer to its write buffer.

Code Examples

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";
import { OutputPass } from "three/addons/postprocessing/OutputPass.js";

• What it demonstrates: the typical set of imports for a RenderPass → effect pass → OutputPass chain.

Key Takeaways

1. EffectComposer replaces renderer.render() in the animation loop once post-processing is set up.
2. Passes run in the order added; put RenderPass first and OutputPass (color/tone mapping) last.
3. Many ready-made effects live in examples/jsm/postprocessing and just need to be added to the chain.
4. ShaderPass (with CopyShader as a starting template) is the way to plug in a custom post-processing shader.

Connects To

• WebGLRenderer: the composer is built from and ultimately still uses a WebGLRenderer instance.