Post-processing; render pass

Effects applied to the finished 3D image like filters on a photo: bloom, grain, color grading, blur, added pass by pass.

filters on top of the 3Dthe after-effects layerpostprocessingeffect composerrender passhow do I add bloom to my sceneinstagram filter for my 3d scenescreen space effects

See it

Live demo coming soon

What it is

Instead of drawing the scene straight to the screen, you draw it into a texture (a render target), then run full-screen shaders over that image before it reaches the display. Each of those steps is a pass, and the chain of them is the composer or effect stack. Bloom, depth of field, vignette, chromatic aberration, film grain, color grading, and most anti-aliasing all live here.

This is where a technically correct render turns into something that looks shot rather than computed. It's also cheap to iterate on: a pass works on the final 2D image, so you can tune it without touching materials or lights. Many passes read the depth buffer or a normal buffer alongside the color image, which is how depth of field and SSAO know what's near and far.

Gotcha: every pass is another full-screen read and write, so the cost scales with pixels, not objects. Three passes at device pixel ratio 3 on a phone will halve your framerate before any geometry is involved. Use a library that merges effects into one pass where possible (pmndrs postprocessing does this), clamp DPR to 2, and remember that screen-space effects only know what's on screen, so SSR and SSAO break at the frame edges.

Ask AI for it

Add a post-processing stack to this three.js scene using the pmndrs postprocessing library: render into an EffectComposer, then apply selective bloom. Tag the meshes that are allowed to glow with userData.bloom = true, build a Selection containing exactly those meshes, and pass it to SelectiveBloomEffect (intensity 0.6, luminance threshold 0.9, soft knee) so anything outside the selection stays out of the bloom even when it is bright. After that add subtle chromatic aberration at the frame edges, a vignette, and SMAA last. Merge the effects into a single pass, clamp device pixel ratio to 2, and expose bloom intensity and vignette darkness as tweakable values. Keep the result restrained: the geometry should still read clearly.

You might have meant

bloomtone mappingrender targetdepth of fieldchromatic aberration