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.
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.
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.
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?
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.
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':
// ...
}
}
});
});
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)
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?
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.
From my understanding to use with threejs , you have three parts.
Images/textures mesh / gltf
( i think i found a way to embed it into the glb file ) Ambeint Occulsion , This is added programatically in three.js
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 ?
