Baked or Real-Time Lighting? How We Choose for a 3D Scene in the Browser

When we build a 3D scene for a website, one of the first technical decisions is how it is lit. Real-time lighting reacts to everything as it moves, but it costs performance on every frame. Baked lighting is calculated once, stored in textures, and costs almost nothing at runtime. Most scenes end up using a mix, and the question is where to draw the line.

Our rule of thumb starts with what moves. If the object is fixed, such as a room, a building or a set, baked lighting is almost always the right answer. The light does not change, so there is no reason to recalculate it sixty times a second. We can also spend a lot of time on the bake, using the same path-traced quality as a still render.

If the object changes, such as a product with swappable parts or colours, we need to think harder. A configurator for a tool or a shoe has to show different finishes under consistent light. Here we often bake the environment lighting and reflections, and keep a small number of real-time lights on the product itself so changes read correctly.

Performance decides the margin. A scene that runs smoothly on our development machine can struggle on a mid-range phone. We test on real devices early, and we budget the number of real-time lights, shadow maps and post-processing effects like a spending limit. Every light is a decision.

Shadows deserve special care. A soft contact shadow baked under an object does more for realism than an expensive real-time shadow, and it never flickers. We often fake the shadow with a baked texture and let the rest of the lighting be simple.

Reflections can be handled with a pre-captured environment map. For a product that sits on a plain background, a good map gives convincing metal and gloss without ray tracing.

The trade-off is flexibility. Baked light cannot respond if the client later wants the sun in a different place, so we ask early which things will actually change. A short conversation at the start saves a rebake later.

This thinking shapes our browser-based work on the demos page and our configurators for Milwaukee Tools.