Why should I use lightmap instead of draw shadow in diffusemap

Hi, I think it’s silly question, but I could’t find any article about this question.

I made my home to GLTF model using Cinema4D with Octane Render and try to import in three.js.

At first, I bake all light and draw shadow on color map.
So the GLTF’s mesh’s MeshStandardMateiral has only “map texture”.
And in scene, I create 1 AmbientLight to avoid model was in black.
After all it looks quite nice but I find three.js can use lightmap.

In this step, I got question that why should I use lightmap for creating shadow?
In my thought, using baked lightmap doesn’t have any advantage from draw shadow on diffuse map, when the model is static.
The only advantage I found is reduce color map’s resolution, or 1 colormap - N lightmap for flexible use.

But most game engine use lightmap and I think bake & draw shadow directly onto model’s color map is not general way.

What point that I missed?

Hi! Great question. :slight_smile:

You can do any of these three, or a combination of them:

  • bake ambient occlusion (.aoMap)
  • bake light map (.lightMap)
  • bake everything (.map)

If you’re baking everything down to just a single map, that’s the cheapest/fastest option for rendering. Often this is a good choice for mobile devices with limited GPUs. If you do this, use MeshBasicMaterial instead of MeshStandardMaterial, since it’s cheaper and you don’t need the extra cost of lighting calculations. That’s called an “unlit” material in glTF terminology, and I don’t know if C4D can export them, but you can convert after export like this:

npm install --global @gltf-transform/cli

gltf-transform unlit input.glb output.glb

This does mean that you can’t use normal maps though, because the lighting is completely baked in.

Baking lighting or shadows while using MeshStandardMaterial is more expensive, and if you’re using punctual lighting (beyond just THREE.AmbientLight) you’ll get incorrect and muddy-looking results. So I wouldn’t necessarily call a texture with lighting baked in a “diffuse” map.


Baking to a .lightMap or .aoMap is more expensive to render than an unlit material, but allows you to keep some aspects of the lighting dynamic, and can look better than MeshStandardMaterial alone. For example, ambient occlusion gives soft shadows affected only by ambient/diffuse lights, like THREE.AmbientLight, and something like a spotlight pointed into areas with AO will hide those shadows.


General advice — use lightmaps and baked ambient occlusion to get nicer lighting and more realistic shadows than three.js can give you without them. Bake everything if you just need to get the best performance you can. Either of these options are very common in game engines.

6 Likes

Appreciate for great answer.
Also send many thanks for three-gltf-viewer and glTF-Transform.
I’m using them very well.

1 Like

It’s possible to achieve this to an extent using radiosity normal maps (i think thats what they are called).

To add to @donmccurdy awesome answer, you can generally achieve different/more effects by using some combination of these maps. For example, you could be tiling a normal map several times across some surface, but then map a single tile for the diffuse/albedo (maybe it has some logo, but the whole surface should be bumpy like leather). When you consider a lightmap, it covers large surfaces like ceilings, walls, rooms, or terrain etc. You could cover all the walls with one repetitive stucco texture at 512x512. But if you want to get some detail in your light map, you need a lot of texture space to uniquely cover all the surfaces. So even at say 4096x4096 you would not get the same texel size on the wall as you would if you repeated the 512x512 texture many times.
Imagine this on terrain, your lightmap may struggle to capture shadow details from a fence for example. Even a shadow from a tree would be somewhat low res. Could you even display a texture of grass or dirt at this resolution? No, you would lose most detail.

1 Like