Lightmaps / Shadowmaps / Tiled Textures

Hello,

So I’m having a discussion about the possibility to bake only the lightmap / shadowmap on a separate texture from the tiled texture of the floor, so we can have a small sized texture to load.
I imagine that we can keep the tiled texture smaller on a separate channel, and on another channel to have just the lightmap texture. This will reduce the total size of the textures as the detailed tiled texture is smaller ( 256x256 ) and the lightmap texture will be 2k but only with greyscale pixel.
Unfortunately in all the examples I found on the forum, websites, videos, the lightmap contains the baked texture including the tiled texture, unwrapped.
Can somebody tell me if this can work, and how to do it using Blender or other tools to export a working gltf / glb?

cc @PatrickRyan

@theblackneko, you can certainly create a shadow map for a material using tiled textures utilizing a second UV set. You would have the tiled UVs in the first set and the unique unwrap in the second set which the shadow map is assigned to. In Babylon.js, you can assign light maps to PBRMaterial (which would be what you would have importing a glTF).

The way to assign the lightmap to be a shadow map is to set PBRMaterial.useLightmapAsShadowmap = true and then assign the UV set with PBRMaterial.lightmapTexture.coordinatesIndex = 1 which would set the texture to use the second UV set. All textures have the first UV set as coordinatesIndex[0] so the second UV set will be index 1.

The real issue here is that you ask to be able to pass a shadow map out of Blender into a glTF and as far as I know there is nothing in the spec or any extensions that enable lightmaps as part of the glTF format. @bghgary can correct me if I am wrong about this, but I looked through the spec and available extensions and I don’t see anything about lightmaps or baked lighting in glTF. I believe the preference is to let the engine handle the baking of lights for the transmission format since including that information in the glTF would limit how the asset could be used as it would no longer accurately adhere to the lighting of the scene it was imported to.

However, if you are looking for how to do this in Babylon, you simply need to create your tiling material in Blender as normal and add a second UV set to bake your shadows. Then export your glTF and export the shadow map as a stand alone texture. You then load the glTF and load the shadow texture separately and just append the shadow map texture to the PBRMaterial by setting:

PBRMaterial.lightmapTexture = myLoadedShadowTexture PBRMaterial.useLightmapAsShadowmap = true PBRMaterial.lightmapTexture.coordinatesIndex = 1

I hope this helps, but feel free to ping back if you have more questions.

5 Likes

Hey there just checking in, was your question answered? @theblackneko

hello ,it takes me two weeks to play glb lightMap.I want the lightmaps(.png) rendered by the 3ds Max lights are used as albedoTexture. Is this the correct workflow?

lightmaps and albedo are different thing, you can not really swap them or the result will be pretty weird

you are right,but i just want load a perfect scene by “SceneLoader.impotMesh()”. I don’t care how the model is created. What I have to do is load the good model into the scene by “SceneLoader.impotMesh()”,My colleagues always give me some glb models with poor effects, so that the whole scene is very bad.God, please help me.I am a programmer, do I need to learn modeling?

Agree that art might be hard but swapping albedo and lightmap won t solve that.

I would advise to share your scene in the playground and ask on the art topic :slight_smile:

@Happy0Ending, I agree with @sebavan that if you can share a playground or the .glb files you are having trouble with I am happy to help you debug the art and give you some hints on how to make it better. I am a tech artist and I always encourage the engineers on our team to learn how to model as much as I try to learn how to write clean code. @sebavan can attest to that.

I do and I learnt one thing, this is way harder than calling @PatrickRyan :slight_smile:

Playground for Lightmap Issue | Babylon.js Playground (babylonjs.com) thank you very much! I have a PG,that i use lightMap(png),as albedoTexture , the monkey look good,but other meshes are bad,can you do some magic in this glb,and I just use “importMesh” to load this scene without handle lightMaps?

Albedo is not meant for the lightmap , you assign light map to the lightmapTexture property

here is working example playground that :

  1. loads a glb
  2. loads and assigns an albedo texture
  3. 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 this is a viable solution and i do it myself, but you have to understand the limitations this brings. ( diffuse is not tilable when doing this for example )

Normally the lightmap texture has a much lower resolution compared to all the other channels. A little noise in this texture is even desirable :wink:

@Happy0Ending, I will reiterate what @shaderbytes and @sebavan said that a lightmap texture is not intended to be used as an albedo texture. However, with that said, there are some instances where using baked light and shadow detail multiplied into your albedo texture and displayed as an unlit material is exactly what you want in terms of performance. This takes the mesh out of the scene calculations for light and makes static meshes with no dynamic lighting conditions the route you want to go. In that case, you would not just be using a separate lightmap and mixing it with an albedo map, but instead you want to bake out a combined light, shadow, and albedo texture.

In this scene, you have an added bit of complexity in that the mesh contains some vertex color as well, which is usually multiplied with the albedo texture, which is why you are seeing the red and green wall colors, even when your lightmap texture looks wrong. The reason that the material looks wrong, while the Suzanne head looks right in this case:

Is due to the fact that there are typically two UV sets for meshes that have baked lightmaps. The primary UV set is for the albedo texture where you want to lean towards higher texel density textures since this is the main detail source for the material. You may also find tricks to maximize texel density in your textures by mirroring or tiling UVs. Lightmaps are usually baked into a separate UV set where you want to maximize a unique unwrap and are more willing to use a lower texel density on light and shadows as they are going to overlap the albedo texture and will hide some of the artifacts of a lower texel density.

What you are seeing above is that you assigned a light map texture that was baked out to the second UV set on the room displayed in the UV unwrap from the main UV set of the albedo texture. The Suzanne head has a unique unwrap that is the same in both of the UV channels on that mesh. This is why this particular mesh looks right in both instances.

To fix this, either use the lightmap as a lightmap which was already in your file but commented out:

 function assignLightmapOnMaterial(material, lightmap) {
            material.lightmapTexture = lightmap;
            material.lightmapTexture.coordinatesIndex = 1;
            material.useLightmapAsShadowmap = true;
        }

which will render:

Or you need to set the texture coordinates of your lightmap texture to reference the correct UV set in the mesh to unwrap correctly:

        function assignLightmapOnMaterial(material, lightmap) {
            //lightMap as albedoTexture
             material.albedoTexture = lightmap;
             lightmap.coordinatesIndex = 1;
        }

Which will render the same:

I hope this clears up why you were seeing what you did. You will need to work closely with your artists to understand how they are baking their textures and which UV sets they are assigning them to so that you can match it up in your material or texture declarations.

5 Likes

you are great,Thank you very much for your reply. And now I using baked light and shadow detail multiplied into albedo texture .On the one hand,this way reduce lighting calculation ,on the other hand, I 'm poor about art. Artists usually bake light light and shadow detail use ue4 or unity. So I I asked my colleagues to place the baked light and shadow pictures on the albedo channel.Glb models don’t save lightMap channel,I don’t know if this workflow is correct. I hope artists focus on art and programmers focus on code. sadowmap example | Babylon.js Playground (babylonjs.com) in this PG I do not anything,I only executed “importMesh()”, if you have time to handle a glb which the artist has baked the model to light and shadow.I would appreciate it if you could record your workflow in detail.

1 Like

no this is not true , it is very far from the truth.

Artists use all sorts of programs other than the two game engines you mentioned. Many use dedicated premium 3d texturing programs , like substance painter or textura(3dcoat) but Epic games made theirs free, Quixel. Do some reseach on that.

Artists may also use their 3D DCC applications and renderers. Blender is a fully functional free opensource 3D application. You can bake anthing using it. I use it professionally

So you have a free 3D DCC , blender
and you have a free 3D texturing application , quixel

So money is not completely holding you back per say, lack of knowledge and skillsets are.

There is not quick “how to do this” answer and also no quick means to explain any such pipeline or workflow. The artists involved need to reseach and learn how to do these things using the available free tools.

This is my entire downside on art :slight_smile: I can do spheres and cubes with blue, green or red and sometimes magenta for errors but that is it lol

2 Likes

@Happy0Ending, I am working on a section for the docs surrounding preparing assets for Babylon. I can certainly do a section on lightmaps and shadow maps as well as baked lighting for static assets. This would be less a step-by-step on how to do it in any specific tool as there are many resources for that out there (which I will link to) but more a pipeline approach for when and why to bake these textures and how to anticipate what you need to do in Babylon.js. It will take a little time to write and post but it will help that documentation section to grow. Thanks for the suggestion.

Thank you for your great contribution to BABYLON!Please contact me as soon as the document is completed :heart_eyes_cat:

1 Like

We should all do what we are good at and combine them.Sometimes we are confused,If we stand on the shoulders of giants, we will go further.Cheers!

1 Like