EffectComposer

EffectComposer is a post-processing framework used in Three.js to apply multiple image effects to a rendered scene. It organizes a sequence of passes that process the image in a staged pipeline, allowing developers to build complex visual effects such as bloom, depth of field, color grading, anti-aliasing, and other shader-based transformations.

The system is constructed with a WebGLRenderer and manages a chain of passes. A typical setup starts with a RenderPass that renders the scene into a texture, followed by one or more ShaderPass or specialized passes (for example, UnrealBloomPass, SMAAPass, FilmPass). Each pass can be enabled or disabled, and passes communicate via two ping-pong buffers, with a pass indicating whether it should swap buffers or render to the screen. The final pass often writes to the screen, or a dedicated CopyShader can be used to compose the result.

Rendering with EffectComposer is performed by invoking its render method, usually inside the animation loop. The library handles the execution order, buffer swapping, and appropriate handling for passes that render to the screen. It also provides a resize method to adjust internal render targets when the display size changes.

EffectComposer is part of Three.js examples and relies on the post-processing passes provided in that collection. It enables a modular approach to post-processing, making it easy to add, remove, or reorder effects without modifying the core scene rendering. While powerful, it can impact performance, so passes should be selected and ordered with consideration for the target hardware.