Good afternoon Group!
This time I want to share my experiences with the Lightmap world.
We all know that the best method to achieve good lighting results without compromising the performance of an app is to design Lightmaps.
In my case I come from the world of Unreal Engine and Unity, being inside a system is usually easier, simply taking care of the UnwrapsUVs, working the lighting well and checking the size of the Lightmaps is more than enough.
But in our case we have to work in BabylonJS and we have to work it from our usual 3D editor (3DsMax, Blender, Maya…) and we also need to take care about the performance.
I usually work in 3DsMax, since for years it has been my usual 3D design tool.
In this mini-game exercise that I’ve been working on these weeks TAKI, motivated by @rdurnin I decided to improve the quality of the models by adding lightmaps.
This is my specific model.
In this case I´ve decided to calculate the Lightmaps of the buildings and the main floor.
All the buildings share the same material, so I had two options:
- Compact all the buildings in several blocks and calculate the maps by groups
- Use a Lightmap at 512px resolution per building
In this case I have chosen the second option, there are 75 Lightmaps and the total weight is 8Mb
The meshes are quite optimized and the approximate total weight is 1.2Mb
The Lightmapping process in 3DsMax is quite simple.
- Select the objects you want to calculate
- Open “Bake to Texture” from the Rendering menu
- In this case I have used Arnold (you can use VRay, Corona…), “noisy” but I can fix it in Photoshop.
- From the list you select “Lighting”.
- We adjust the size of the Lightmaps to 512px except the main floor that due to dimensions I have adjusted to 2048px
- The format can be PNG that offers more quality, although for projects of this type “Low Poly” that the highest quality is not quite important I used JPG.
- In the “Output To” option I have used “Duplicate Material”, as I mentioned the material of the buildings is unique and now when using a lightmap for each building I simply had to duplicate it.
- Added several lights and adjusted the environment to illuminate the scene.
- It is important to set “Don´t Export” in the “Babylon Options” of the lights to prevent them from being exported with the GLB model.
To assign the lightmaps to each of the meshes I simply iterate through the imported scene objects and assign it to the LightmapTexture property of the material.
When designing the lightmaps with the “Bake to Texture” function, the name of the Lightmpa will be the same as that of the mesh.
Also Confirm that the Lightmap is assigned to the same channel that you used in your 3D design software
newMeshes.forEach((mesh)=>{
mesh.isPickable = false;
if (mesh.name.includes("Building") || mesh.name == "Ground"){
var lightmap = new BABYLON.Texture("./resources/textures/lightmaps/" + mesh.name + "_lighting.jpg");
mesh.material.lightmapTexture = lightmap;
mesh.material.useLightmapAsShadowmap = true;
mesh.material.lightmapTexture.uAng = Math.PI;
mesh.material.lightmapTexture.level = 1.6;
mesh.material.lightmapTexture.coordinatesIndex = 1;
mesh.freezeWorldMatrix();
mesh.doNotSyncBoundingInfo = true;
}
});
In the case that the mesh has several materials, it would be as simple as iterating between the materials of each mesh.
Once the Lightmaps are rendered, I run them through Photoshop and do a Batch Denoising
Here are some before and after screenshots.
And here is the Playable Mini-Game
https://www.viseni.com/taki2/
Now I only have to improve the lighting a little more and repeat the Lightmaps again 
I hope it helps the newbies in this aspect, I understand that when one starts on this topic it is usually frustrating
I think the world of Lightmapping will still be with us for several years, at least until mobile phones have RTX
Greetings to all 