A simple workflow for working models with lightmaps
In my case I work with 3DsMax, but you can apply this system to other applications such as Blender, Maya… In this case I understand that you know how to generate lightmaps in your usual software and I prefer not to go into details.
For this trick, the most important thing is to name the objects well and identify the lightmaps.
For optimization reasons I usually study well my model and the objects in which I want to use lightmaps.
In the attached image you can see that it is applied to the carpet, the sofa and the table, I did not apply it to the poufs or decoration since they did not contribute much and it looked correct.
I leave you an image of the 3DsMax project in which you can see the structure
As you already know, the GLB files do not store the information of the lightmaps and can be assigned by code.
In this demo the lightmaps files are stored in the same directory as the glb file, you can customize it and adjust it to your needs
Define your Model Attributes
// Set Model Attributes
var model1_fileData = {
folder: "./resources/models/model1/",
file: "model1",
extension: ".glb",
lightmaps: [
"CarpetLightingMap.jpg",
"SofaLightingMap.jpg",
"TableLightingMap.jpg"
],
lightmaps_intensity: 1.0
};
In this variable I store the data of the model and the lightmaps that I am going to use.
It is important to check the name of the meshes in the model and that they correspond to the lightmaps. (ie- Mesh: Carpet – Lightmap: CarpetLightingMap.jpg)
For example, use this function to load your model
// Import Mesh Async Function
importGLBModelAsync(model1_fileData, scene);
function importGLBModelAsync(fileData, scene) {
Promise.all([
BABYLON.SceneLoader.ImportMeshAsync(null, fileData.folder, fileData.file + fileData.extension, scene).then(function (result) {
}),
]).then(() => {
console.log("ALL Loaded");
checkLightmaps(fileData, scene);
});
}
Check Lightmaps
function checkLightmaps(fileData, scene) {
var lmArray = fileData.lightmaps;
lmArray.forEach(lm => {
var lmRep = lm.replace("LightingMap", "");
lmRep = lmRep.replace("LM", "");
lmRep = lmRep.replace("LightMap", "");
lmRep = lmRep.replace("Lightmap", "");
lmRep = lmRep.replace("lightmap", "");
lmRep = lmRep.replace("_LM", "");
lmRep = lmRep.replace("_LightMap", "");
lmRep = lmRep.replace("_Lightmap", "");
lmRep = lmRep.replace("_lightmap", "");
lmRep = lmRep.replace(".jpg", "");
lmRep = lmRep.replace(".png", "");
console.log("Lightmap: " + lm);
var lmTexture = new BABYLON.Texture(fileData.folder + lm, scene);
scene.meshes.forEach(mesh => {
if (mesh.name.indexOf(lmRep) !== -1) {
if (mesh.material)
{
console.log("Mesh Contains: " + mesh.name);
console.log("Mesh Material: " + mesh.material.name);
console.log("Lightmap: " + lmTexture.name);
console.log("--- ---");
mesh.material.lightmapTexture = lmTexture;
mesh.material.useLightmapAsShadowmap = true;
mesh.material.lightmapTexture.uAng = Math.PI;
mesh.material.lightmapTexture.level = fileData.lightmaps_intensity;
mesh.material.lightmapTexture.coordinatesIndex = 1;
}
}
});
});
}
and finally with this function iterates the meshes in the scene and checks if it corresponds to the declared lightmaps
Obviously not in all cases it will work well, bu I hope it is useful to you.
In my case, as I tell you, I usually work with this method for projects developed in 3DsMax in which I use Lightmaps.