๐ Postprocessing
Post-processing effects are applied to the fully rendered frame as a series of 2D image operations. Instead of modifying the 3D scene directly, you render the scene to a texture, then pass that texture through one or more effect passes that modify the final image.
Common Effects
- Bloom โ makes bright areas glow by blurring and adding them back to the image
- Ambient Occlusion (SSAO) โ darkens creases and corners where ambient light would be occluded, adding depth
- Depth of Field โ blurs objects outside a focal distance, simulating camera focus
- Tone Mapping โ maps HDR (high dynamic range) values to the displayable range, affecting overall look and contrast
- Outline โ highlights selected objects or interactive elements with an edge effect
- Motion Blur โ blurs in the direction of movement for a sense of speed
- Vignette โ darkens the edges of the screen for a cinematic look
Effect Pipeline
Effects are chained together in a composer โ each pass reads the output of the previous one and writes its result. Order matters: applying tone mapping before bloom gives different results than the reverse.
postprocessing
3k200k/w can be used with vanilla Three.js and optionally react-postprocessing1k160k/w for a React Three Fiber integration.