Postprocessing with Bloom
Shaders & effects
Lesson 15 of 15
Render a scene through an effect pipeline and resize its offscreen targets with the viewport.
Use EffectComposer, RenderPass, UnrealBloomPass, and OutputPass to add bloom to bright emissive surfaces.
How this scene works
Postprocessing renders the scene into an offscreen target before drawing the final image. RenderPass supplies the scene, UnrealBloomPass spreads pixels above its brightness threshold, and OutputPass performs the final tone mapping and color-space conversion. The emissive material uses intensity above one so it crosses the threshold. The frame callback renders the composer instead of requesting a second animation loop. onResize keeps its render targets matched to the viewport; onCleanup disposes both the composer and effect passes. Bloom adds render passes and GPU cost, so inspect it on your target device.
Included project files
bloom-settings.jsPostprocessing with Bloom
ES modules · Three.js 0.183.1 · WebGL
Loading draft
2 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Raise threshold in bloom-settings.js until the glow disappears. Then increase emissiveIntensity to bring it back without changing strength. Compare the appearance and draw calls with bloom.enabled = false.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
