How do I attach a baked shadow map to my model

[ERGOU]

Please do not forget to add a link to a Playground to get a faster answer:
I saw an amazing scene of light and shadow on the home page. I tried to imitate it, but I found that its light and shadow did not seem to be generated by ShadowGenerator.

I found images similar to shadow maps, but I wanted to know how to render the scene to the final look while retaining the original material. Here is a sample image, along with the website address.

website address.

Make the Best Use of the Forum | Babylon.js Documentation

[ERGOU]

The above images are: 1 original model, 2 shadow map, and 3 final render

[ERGOU]

use ShadowGenerator test

[mawa]

Hi, not sure what this example is but I believe it must be using a baked lightmap/shadowmap.
There’s this tutorial made by @Vinc3r that surely can help you for the understanding of how to create a lightmap in Blender and load it in BJS

How to get simple and efficient lighting effects in babylon

Yep you should use lightmaps. Here a tutorial using StandardMaterial, but the workflow is basically the same in PBR (hem, one day I will take time to continue writing my next Blender to BJS - PBR workflow tutorial ). You also have a tiny playground using glb import + lightmap assignation available here: https://playground.babylonjs.com/#ADPQFC#9

There are also a number of other topics in the forum around the technique of using ‘shadow map’
Since Blender generates by default PBR Materials and you might want to keep with these, you would just need to make sure you assign your lightmap texture to the correct channel and also make sure that any properties or additional lights and env you create will not affect your baked shadows (or not all too much). Here’s another link for you around this:

Lightmaps / Shadowmaps / Tiled Textures

Albedo is not meant for the lightmap , you assign light map to the lightmapTexture property here is working example playground that : loads a glb loads and assigns an albedo texture loads and assigns a lightmap if you open the inspector you can view the texture channels and there is a button to show the texture isolated. The effect of the lightmap in this example is subtle but it makes a difference. on a side note , it is possible to bake lighting into the diffuse texture , sometimes thi…

Best would be if you could share a playground (even non-working) just importing your model, textures and your ‘attempted’ lightmap. From there, it will be easier to give you tips on how to improve it.
Others might have more links or tutorials to share but meanwhile, you can make a search in the forum around ‘lightmap’ or ‘shadowmap’. You’ll see that there’s plenty to read about and lots of PGs to discover.
Hope this helps (a little) and meanwhile, have a great day

Edit: Sorry, just realized that in the second link I gave you, the links in the PG are broken. But the code is fine. So, for the short answer, you want to assign your lightmap to:

mymatmap.lightmapTexture = new BABYLON.Texture(“textures/mylightmap.png”, scene);
mymatmap.useLightmapAsShadowmap = true;

Where ‘mymatmap’ is your model texture map/wrap.

[sebavan]

Also the light created in createDefaultCameraOrLight is a bit strong without generating shadows https://playground.babylonjs.com/#WGZLGJ#8580

[ERGOU]

@sebavan @mawa
Thank you very much for your help. I have achieved what I want.
https://playground.babylonjs.com/#WGZLGJ#8584