Bake Lighting in Unity for a WebGL Scene

WebGL does not have the light budget of a desktop game. A corridor with four realtime lights, soft shadows, and a normal-mapped floor will miss frames on a laptop. Most of that corridor never moves. Bake it. The lightmap stores the color the static surfaces already received, and the player's machine only has to sample a texture. Save realtime light for the character, a flickering practical, or a door that swings through a beam.

Baking is a trade. You give up the ability to move a sunshaft at runtime, and you gain a scene that looks directed. For a portfolio level, a product viz, or a small game that ships in the browser, that trade is usually the right one. This is the order that avoids rebaking the whole afternoon: blockout, static flags, one bake, then art.

Decide what is static#

A static wall contributes to the lightmap and can occlude. A moving crate should not be static, or the shadow of its old position will be painted on the floor forever. In the inspector, enable the static flags you mean. Contribute GI for meshes that should receive baked light. Skip the flag on characters, pickups, and doors.

• Walls, floors, and trims: static, baked.
• The player and enemies: dynamic, lit by a cheap realtime fill or by light probes.
• A swinging lamp: mixed, if you truly need the lamp to move. Otherwise animate the emissive and keep the bake.
• Glass: often excluded from the bake and faked with a transparent material.

Set the lights before you generate#

Use one directional light as the sun and set its mode to Baked if nothing needs a realtime shadow from it. Add area or spot lights for the pools you actually want, and keep them baked. Intensity in Unity is easy to overdrive. Look at the game view, not only the scene view. A bake that looks bright in the editor and white on WebGL is usually an intensity and color-space surprise. Work in linear color space for a modern built-in or URP project, and do not switch color space after the bake.

Lighting window
- Baked Global Illumination: on
- Lightmapper: Progressive GPU if the machine has it
- Direct samples and indirect samples: start modest, raise only where you see noise
- Lightmap resolution: 10 to 20 texels per unit for a small corridor, lower for a huge floor
- Albedo boost and indirect intensity: leave near the defaults until a bounce is clearly too dark

Generate, then read the lightmap#

Click Generate Lighting and wait. Open the lightmap preview and look for black texels on a wall that should be lit, overlapping UV charts, and a giant texel wasted on a tiny trim. Overlapping UVs look like spilled light. Generate lightmap UVs on import for meshes that do not already have a second UV channel, and give the charts a margin so WebGL's compression does not bleed a shadow across a corner.

1. 01

   Bake the blockout

   Gray materials, real sizes, one sun. If the composition is ugly in gray, props will not save it.

2. 02

   Mark the final static set

   Unmark anything that moves. Rebake. A door left static is the classic "shadow of a door I opened."

3. 03

   Place light probes

   Dynamic objects sample probes. A character walking through a baked corridor without probes turns black or flat.

4. 04

   Build WebGL and look again

   Compression and color can shift. Judge the build, not only the editor.

Keep the bake small enough to ship#

Lightmaps are textures. A 4K map on a one-room scene is a download, not a quality setting. Drop resolution on large flat floors and spend texels on the hero corner the camera sees. Group static meshes that share a life cycle so you are not rebaking a city because a picture frame moved. Save the Lighting settings asset with the scene so two developers do not generate different maps.

If you need a light to turn off at runtime, that light is not fully baked. Use a mixed light sparingly, or swap an emissive material. WebGL punishes you for a scene full of mixed lights with realtime shadows. One baked look plus a few probes is the scene people can actually load.

Probes are part of the bake#

A character walking from a sunlit door into a baked interior will pop from bright to black if the probes are missing or too far apart. Place a probe in each lighting zone: the doorway, the middle of the corridor, and the dark end. Generate lighting again after you move them. Reflection probes matter when you have metal or a wet floor. One reflection probe for a small room is enough for WebGL. A grid of them is a download. In the frame debugger, if the character ignores the bake entirely, the mesh is not sampling probes and the shader is only using realtime lights you already turned off. Fix the shader or the light probe setting before you raise lightmap resolution. Resolution will not light a dynamic object.