Three.js post-processing chains render passes through an EffectComposer that processes them in order of addition

Post-processing in three.js works by redirecting render output to an off-screen buffer, then running a sequence of shader passes over that buffer before displaying to screen. The EffectComposer manages this pipeline and processes passes in order of their addition. Passes are added in order: first a RenderPass (draws the scene), then any number of effect passes (GlitchPass, ShaderPass with custom GLSL), and finally an OutputPass, which performs sRGB colour-space conversion and tone mapping. Instead of calling WebGLRenderer.render() in the animation loop, you call composer.render(). The EffectComposer and passes live in three/addons/postprocessing, not the core bundle, and must be imported separately.

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';
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new GlitchPass());
composer.addPass(new OutputPass());
// In loop: composer.render() not renderer.render()

Assessment

Describe why OutputPass must go last and what visual error appears without it on a wide-gamut display. Toggle a GlitchPass on/off with a keypress in a minimal three.js scene.