Learning on Web Dev Open is free for all.

Immersive Web > Light, motion and the feel of weightPost-processing costs one full-screen pass each
Phase 07Light, motion and the feel of weight361 of 434

Post-processing costs one full-screen pass each

Bloom, depth of field and ambient occlusion are beautiful, and each one re-reads every pixel you already paid for.

Concept14 minAI adversary

Every post effect renders your scene to a texture and then runs another full-screen shader over it, sometimes several: bloom alone is a threshold pass plus a downsample and blur chain plus a composite. Each pass touches every pixel, so the cost scales with resolution rather than scene complexity, and the phone that handled your geometry fine will die on a three-effect chain at device pixel ratio 3.

The cheap alternatives are worth knowing because they are usually enough. Emissive materials plus a subtle single bloom read as glow. A vignette is one multiplication in the final shader rather than a pass. Baked ambient occlusion in a texture is free at runtime, and screen-space ambient occlusion is not. Render post effects at half resolution when the effect is low frequency, which for bloom is essentially always.

You should now be able to

  • Estimate the fragment cost of an effect chain
  • Decide when to bake an effect into the material instead
Ask the community

Loading…