Three.js cinematic look: tone mapping, light, fog and bloom

When to use it

Use it when the game plays fine but the screenshots don't sell it. Diagnose by symptom; each one points to a missing layer:

• Washed-out colours, grey blacks. Broken colour management: a colour texture read as linear data, or gamma applied twice.
• Highlights clip to flat white; it looks like a 2005 game. No tone mapping, so everything above 1.0 is cut off.
• Metal looks black, everything else like plastic. No environment map. PBR materials need something to reflect.
• Objects float. No shadow, or one so soft and offset it reads as a smudge.
• The world feels empty and stops at a visible edge. No fog, so no aerial perspective.
• Lamps and magic don't feel hot. No bloom, or emissive never exceeds 1.0, so bloom has nothing to catch.
• It feels like a CAD viewer. Default 75° FOV, a camera glued to the player or driven by OrbitControls.

Skip it, or stop after the first two layers, for flat, pixel-art or toon styles where colours must match the painting exactly, and for 2D games.

The cost picture: colour management, tone mapping, environment light and fog are close to free per frame. A shadow re-renders every object that casts it. Bloom and other full-screen effects cost per pixel, which is where phones run out. That is also the order of value per millisecond, so apply the layers in order and stop when the 16.7 ms frame (60 fps) is spent.