Blender Cycles Lightmap Baking

Hello,

I’ve got a scene in Blender (simple house) where I want to bake the lightmap of certain objects (e.g. the floor). My goal is to export the whole model in the .gltf format to use it with three js. I already applied various texture maps but when it comes to baking the shadows, I’m not sure how to do this the right way. I know how to bake the actual lightmap by baking “shadows” (if that’s even the right approach) but when overlaying it with the textures (I found some solutions on stackexchange) in the node editor, the result doesn’t look appealing and realistic at all. Baking the “combined” texture leads me to the best result but the rendering time takes ages and I’ve read a lot that it’s better to apply the lightmap as a seperate layer and leave the texture set as it is - but whats the best way to do that? I need to have the lightmap already implemented in the final .gltf model.

Thanks in advance

When you bake a combined pass wire it to emissive in an new Principled Material. Remove everything else. You baked everything.
Thats the corect way. Export glTF.

When you only want to bake lighting.
Bake a direct and indirect diffuse pass.(lightmap)
Your Principled material can stay at it is with all textures.
Only multiply the resulting lightmap with your base color.
Export glTF.

For more complex relations, correct PBR baking,
check and click on explore model and
this

baked with Blender for Sketchfab


to see what you can do by combining it right.

Also have a look and study the glTF example models and import them in Blender. You see that all imports use the principled shader.

1 Like

Thanks for the clarification, I’m actually getting pretty good results with combined baking. Can you tell me what the exact node setup looks like with the baked texture? Image Texture to Emission Shader to Material Output? Notice that I want to keep the “real” surface (roughness, glossiness) in the gltf model.

then this is a possible way

When you only want to bake lighting.
Bake a direct and indirect diffuse pass.(lightmap)
Your Principled material can stay at it is with all textures.
Only multiply the resulting lightmap with your base color.

The trick is to bake the input from the base color from the principled as emmisive out.
The addons do that for you. Without you must manual do this.

In my scenario I baked the direct and indirect diffuse for the floor. Is the following node setup correct? From my understanding, by baking diffuse I only get the shadows but in the render the sun would also brighten the floor where the lights hit it - is there a way to get that effect with baking?

What addons do you mean?

So i use mainly BakeTool .
Is nice for batchbaking a very complex scene.

SimpleBake is great to

Try to understand the different render outputs first.
This is how they combined in compositor.
And add them together to get the final result.
After some time you get an good understanding.

Then do the same for baking outputs in node editor.
You need other nodes for some cases.

Your network looks ok.
Also try to use the value node like shown here
to combine your direct and indirect bake with your color map.

You don t need the addons and probably for the beginning it s better to do it the manual way like you do now to get better understanding.

meantime there there is an addon who delivers an one click solution

I baked the lightmap using The Lightmapper but GLTF doesn’t support mulitply two textures, only color works.

So now I need to bake that one again or is there a way to access the lightmap and seperatly assign it in three.js ?

In general its a lot of baking and tons of materials that are being created so one can easily get confused. Not to mention that every object gets its own lightmap and own material, so rebaking changes in the original materials seems impossible at the moment. Maybe an option should be added to go back to all original materials and clean the rest.

glTF can export ambient occlusion textures but not lightmaps. One option would be to export the lightmap separately, then add it to your objects in three.js:

var loader = new THREE.GLTFLoader();
var textureLoader = new THREE.TextureLoader();
loader.load('model.glb', function (gltf) {
  gltf.traverse(function (object) {
    if (object.isMesh) {
      switch (object.name) {
        case 'tree':
          object.material.lightMap = textureLoader.load('treeLightMap.png');
        case 'rock':
          // ...
      }
    }
  });
});
1 Like

Thanks für the help ! I already put the lightmap texture in the AO inside Blender and then in Three.js wrote it in the lightMap. The problem is that I don’t want the texture separately but included in the glb and still have a second uv. Now with my solution I loose the AO completely but keep a second uv and I can use the lightmap but I don’t see any solution having my normal material textures (diff, gloss, nrm …) on uv0, ao on uv1 and lightmap on uv2 (ao and lightmap could share though)

1 Like

three.js supports only a specific UV arrangement:

  • AO and lightmap use UV2
  • Everything else uses UV1

I’m not sure how you can export the lightmap and the AO both in the same .glb file, if you there aren’t other available texture slots (emissive?) that you don’t need. At the moment, you probably can’t. Maybe this feature request is what you’d need?

1 Like

I made an Addon that uses AI Denoise for Lightmap and AO Baking and also auto generates an emission setup for the lightmap (or gltf settings for ao). Using the second uv in three js one can now easily add a lightmap and export it to gltf.

1 Like

From my understanding to use with threejs , you have three parts.

  1. Images/textures mesh / gltf
  2. ( i think i found a way to embed it into the glb file ) Ambeint Occulsion , This is added programatically in three.js
  3. Light Mapping ( diffuse?shadow?) This is added programatically in three.js

As a novice with blender , I have downloaded multiple software and got nowhere, why isn’t there an easy to understand tutorial on how to bake lighting to optimise Three.js ?