Build Three.js post-processing pipelines with EffectComposer - bloom, depth-of-field, color grading, and custom screen-space shader passes - with resize handling and performance tradeoffs.
---
name: threejs-postprocessing
description: Reference for Three.js post-processing - EffectComposer pipelines, bloom/DOF/screen effects, and custom shader passes. Use when adding glow, color grading, blur, or screen-space effects.
---
How to assemble a post-processing chain in Three.js.
## How to use
1. Create an `EffectComposer(renderer)` and add a `RenderPass(scene, camera)` as the first pass; render with `composer.render()` instead of `renderer.render()` in your loop.
2. Add effect passes such as `UnrealBloomPass` (strength, radius, threshold) for glow, or shader passes for color grading and blur; the last pass renders to screen.
3. Use selective bloom (layers + a luminance/composite ShaderPass) to glow only chosen objects.
4. On resize, update camera aspect, `renderer.setSize`, and `composer.setSize`; order passes deliberately and budget passes for performance.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing