How to bake light with textures?

[Toby]

I’m new to Blender and Three.js so I’m trying to find a way to bake light with texture into a image and then apply to the model in Three.js.

I try to set up nodes, along with creating a new UV Map for light map as screenshot below. In Blender, I managed to control the UV unwrapping without affecting the textures UV. As the result, I receive a seems to be baked light and textures image. However, when I try to use it in Three.js, the textures is not correctly applied.

Here is the code snippet I use:

const bakedTexture = textureLoader.load('room-box-baked.png');
// reverse Y coordinates
bakedTexture.flipY = false;
// color correction on texture
bakedTexture.encoding = THREE.sRGBEncoding;

// Materials

// Baked Material
const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture });

gltfLoader.load('room-box-simple.glb', (gltf) => {
	gltf.scene.traverse((child) => {
		//console.log(child);
		child.material = bakedMaterial;
	});
	scene.add(gltf.scene);
});

Could someone tell me what can I do to correctly bake the texture with light and apply to model in Threejs? I attached the .blend file, .glb and texture image here: room-box.zip - Google Drive

[USMANHEART]

How about RealAPI?
This tool can render or bake at runtime.

• API Docs
• Official website
• Demo website

Also:

Demo video

Demo video 2

[drcmda]

you might want to consider bruno simons threejs journey, this lesson Three.js Journey — Baking and exporting the scene especially is probably the most complete tutorial you will find on the web. baking in principle is relatively simple, but then you will have to learn dreaded UV unwrap, and if you expect good results out of it it will get complex fast. the lesson also shows a compositor step to get srgb filmic applied to the results, and that was something i haven’t seen anywhere else, but it made the biggest difference.

[Toby]

Thank you for answers. I also checked Bruno Simon tutorial before, but in his case, he use procedural material instead. In my case I have models that have image texture that being UV wraped, therefore, I have to have 2 UV map, 1 for texture, 1 for baked light map texture for the whole scene. As I have figured out, this is more like a gltf + three problem as applying texture to the scene model will use the first UV map in the GLTF, which is the UV map of the objects texture. To correctly bake in this case, I would need to remove that UV map, and then use the baked light UV map to correctly apply the baked texture onto the object, in threejs.

[drcmda]

the procedural texture is only for the portal, everything else are image textures.

what you otherwise refer to is called light map baking, it’s a different process and uses a 2nd set of uv’s. i just learned how to do that through a twitter thread https://twitter.com/0xca0a/status/1692107529776517166, there’s a real world example in it, too. but it’s even more convoluted, the results seem visibly worse, and gltf doesn’t technically support it without hacks. i would prefer just baking into textures, and that way you get filmic results, which LM-bake doesn’t seem to support (?).

[Toby]

Sorry for the wording, what I meant for “procedural texture” was the Principal BDSF with just material color (base color) in Blender. In Bruno Simon example, he only adjusting value like roughness, color,… provided by this shader, so in the shaders node view, there is only the Principal BDSF node. But in my case, the chair for example, using an image texture, wrap over the object using its UV map (in my case, it was the “UVMap”) Which mean, I can not bake the light of the whole scene into 1 image texture, like Bruno Simon did, as each object has its own “UVMap”, as repositioning the UV coordinates (in order to fit in the image texture space), it will also distort the scale, and position on the original UV, results in incorrect texture for all the object in the scene.

Therefore, in the .blend file, and the image above, I have to create a new UV map “LightMap”, which is used for light baking texture. (basically texture, just with blender lights baked on, same as Bruno Simon) That way, I can reposition, scale the UV of the scene, so it would fit in 1 texture image file, without affecting the objects image textures UV. I think my solution would allow you have a whole scene texture in 1 image file, in case of your objects has its own UV for their image texture. Technically, you can probably use 1 UV map only for baking, but later you would have as many image texture files, for each objects in the scene.

I don’t think this is the same technique as what people mentioned in your twitter, as my export is a single image texture, combine both light and material textures of whole scene, and then is being used as texture for the whole scene.

What I have found as the solution for this thread, was three or gltf(?) issue, as they only use the first UV map to apply the texture on (whole scene image texture), therefore, I have to remove the first UV map texture (UVMap), which used originally for each objects texture (would results in weird texture in Blender, as each objects still point to their original object texture in their shader nodes), and then export as GLTF, without exporting material. Then import in three the same way in Bruno Simon tutorial would work!

[drcmda]

you most definitively can do that. blender allows you to have multiple uvs and switching them is quite easy. you can even attach the uv as a node input that goes into the texture, so you can later attach the baked atlas map to the bdsf texture node. i did this here for instance, as you see these are textured meshes which were then baked Shopping - CodeSandbox

[Toby]

Yes, I also discovered that you can use the baked texture and apply to the scene right in Blender, and export the material along with the gltf as well, so I don’t need to apply the image texture later in three. Quite neat!

I wonder if your workflow is the same as well, in term of having 2 UVs initially, then after creating a new baked texture, switch to that UV and apply that baked texture to the whole scene objects in shaders node?

Nice demo btw. Fan of your works

[drcmda]

you can do both, either you initially atlas all your uvs, for instance with uv packmaster, or you use a 2nd set afterwards and do it then. the former is a bit hard to control since you can’t change anything afterwards, add new models etc.

Nice demo btw. Fan of your works

thanks, appreciate it!