# Proper lightmap workflow and formats

**URL:** <https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533>\
**Category:** Questions\
**Tags:** lighting, lightmaps\
**Created:** [June 10, 2023, 6:58am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533 "2023-06-10T06:58:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 10, 2023, 6:58am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/1 "2023-06-10T06:58:05Z")

</div>

Hi  
I am trying to bake lightmaps in blender and then use them in babylon app. As it turns out it’s not that straightforward. I am using PBR materials and I specifically want to have separate albedo and lightmap image on the objects.  
I have already read [this](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375) thread on the topic but I still feel like not having full picture.

Let’s say I can generate lightmaps in OpenEXR or HDR as I know that producing PNG lightmaps from Blender does not work as expected (it normalizes channels and uses only RGB channels).  
What is the transformation of OpenEXR/HDR to texture format that I can:

1. Load into Babylon
2. Use as lightmap rightaway (without tranformations in babylon)

My idea is to have Blender output something that Babylon expects without any additional transformations later.

---

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 12, 2023, 10:17am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/2 "2023-06-12T10:17:12Z")

</div>

Hey @sebavan @Evgeni_Popov. You mind explaining lightmaps a bit further?

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 10:21am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/3 "2023-06-12T10:21:50Z")

</div>

The easiest way to do this is to bake in blender with cycles. Then paste the map to the self-luminous channel and specify the uv.

No code is needed, but it will break the glow. Later in the code you can move it to the lightmap channel to eliminate the effect on the glow.

---

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 12, 2023, 10:34am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/4 "2023-06-12T10:34:16Z")

</div>

That’s almost exactly my flow currently. The problem is not how to get lightmap from Blender to Babylon but rather what should be the format of that lightmap coming out from Blender. Right now I can see that Babylon is using proprietary RGBD format which Blender does not generate. I even tried reproducing [this](https://github.com/sebavan/Babylon.js/blob/master/packages/dev/core/src/Shaders/ShadersInclude/helperFunctions.fx#L174-L197) as post process step in Blender but it results in banding in the output textures.  
I can’t really see a streamlined process to have lightmaps working correctly without hacks that involve manual work.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 10:40am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/5 "2023-06-12T10:40:12Z")

</div>

I actually don’t think it’s a good idea to use RGBD.  
Because currently the lightmap channel in babylonjs does nothing more than superimpose the lightmap colors onto the final output color.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/2/f2f887860806fabbdd6c11df28c7ecc4bfbee22f.png)

---

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 12, 2023, 10:46am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/6 "2023-06-12T10:46:49Z")

</div>

That sounds like lightmaps are just broken then? I can see some good looking results with using RGBD though [here](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/13)

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 10:57am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/7 "2023-06-12T10:57:36Z")

</div>

But he doesn’t give a comparison, and in reality the RGBD improvement may not be that great.

Later he himself complains about overexposure of the environment

> [@RGBD Lightmap banding](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/19):
>
> Mmmm, I’ve repeteaded the same code as yesterday and now the PNG, as you say, is correct. Surely I did something wrong, but I can’t find what is it. Thanks for your support anyway. Yes, it is overexposed, although I want to use tonemapping to compensate. Cheers.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 12, 2023, 11:02am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/8 "2023-06-12T11:02:51Z")

</div>

I agree. In my opinion, the topic is still open. I think it’s worth following (I do) but I wouldn’t dare using it in a productivity environment with a strong requisit about colors/exposure. At least, not just yet. Of course, my opinion only.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 11:13am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/9 "2023-06-12T11:13:56Z")

</div>

But that’s not a problem, because the difference between RGBD is simply the use of the A channel to increase the color range.

The existing process remains exactly the same, except for a single sentence texture.isRGBD = true.

Even if you paste the rgbd texture to the self-luminous channel, it should be perfectly fine.

---

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 12, 2023, 11:22am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/10 "2023-06-12T11:22:26Z")

</div>

Okay. What is proper way of exporting blender lightmaps which when pasted in babylon will give me exactly the same results as usual Blender render?

> RGBD is simply the use of the A channel to increase the color range.

It’s not “simply”, this is the only proper way to have results that look exactly the same as my Blender renders AFAIK yet RGBD is not documented anywhere except for [this](https://github.com/sebavan/Babylon.js/blob/master/packages/dev/core/src/Shaders/ShadersInclude/helperFunctions.fx#L174-L197) piece of code, but I still cant produce nice RGBD textures just because I don’t know what exactly does this function expect.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 11:56am UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/11 "2023-06-12T11:56:51Z")

</div>

You can basically convert .hdr to RGBD format, which is essentially an image with a transparent channel.

I’m not sure how the native blender baked mapping outputs hdr.  
Some baking plugins export in hdr by default or support setting rgbd encoding.

A .rgbd map generally looks just like a normal png map.

But the A channel is used to scale the RGB values. The actual output value is (rgb)/a.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 12:08pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/12 "2023-06-12T12:08:50Z")

</div>

When you set texture.isRGBD = true, this function is automatically used by babylonjs, and the rest is left to babylonjs.

He will populate these functions in the shader.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/6/86df24adf2ed7c7621de6ee16421b43e0d866329.png)

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 12:17pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/13 "2023-06-12T12:17:34Z")

</div>

However, from the definition can be seen, babylonjs in the shader will only reflectionTexture, refractionTexture and lightmapTexture automatically do processing

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/d/edef5dedab70454c44fd2df229ce9522e452d3d2.png)

---

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 12, 2023, 1:01pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/14 "2023-06-12T13:01:47Z")

</div>

> [@qq2315137135](#):
>
> You can basically convert .hdr to RGBD format, which is essentially an image with a transparent channel.

I am asking about specifically this. How to convert HDR to RGBD? I don’t know what [this](https://github.com/sebavan/Babylon.js/blob/master/packages/dev/core/src/Shaders/ShadersInclude/helperFunctions.fx#L174-L197) piece of code expects.

1. Does it expect `vec3 color` to be in linear color space?
2. Does it expect `color` to be clamped from 0 to 255 or 0 to 1?
3. When converting .hdr (RGBE) to RGBD with that function, do I take only RGB values or I do something with E from hdr too?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [June 12, 2023, 1:35pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/15 "2023-06-12T13:35:57Z")

</div>

cc @PatrickRyan

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 1:53pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/16 "2023-06-12T13:53:40Z")

</div>

1. The problem is indeed a bit subtle, because I am seeing the lightmapTexture sampled directly in the standard material.

But in pbrMaterial, the conversion from sRGB to linear space is done.

This seems to imply that the LightMap in pbrMateiral requires srgb, while the standard material requires linear. Maybe someone can answer this.

1. the color is 0-255 there is nothing to say about this.  
Because he is not really high dynamic range, he is using “A” channel to simulate high dynamic range.

2. I don’t know much about RGBE, but I think their final output values are the same anyway.

[Translated with DeepL](https://www.deepl.com/translator?utm_source=windows&utm_medium=app&utm_campaign=windows-share)

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [June 12, 2023, 2:01pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/17 "2023-06-12T14:01:44Z")

</div>

I think I know what is going on.  
The standard materials are probably always in sRGB space, so there is no need to convert them. So both expect sRGB lightmap.  
I don’t know if I’m right

![DS@XHNWYLL)OQK6~FWAIZW6](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/061755ad3d80c3b9908f5b665180f98e31621e5c.jpeg)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [June 12, 2023, 3:02pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/18 "2023-06-12T15:02:05Z")

</div>

Note that you can use this piece of code to convert a .hdr to a RGBD .png:

> **[Babylon.js Playground](https://playground.babylonjs.com/#95Y4D7%2313)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![zylkowski](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zylkowski/32/32822_2.png) [@zylkowski](https://forum.babylonjs.com/u/zylkowski)\
**Post date:** [June 12, 2023, 3:17pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/19 "2023-06-12T15:17:37Z")

</div>

I am aware that I can use that piece of code to convert .hdr to RGBD .png but I’d like to do that already in blender so that I can pass ready .gltf + lightmaps to babylon and have that working rightaway. Do you have any tips on how to convert image to RGBD?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [June 12, 2023, 3:21pm UTC](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533/20 "2023-06-12T15:21:41Z")

</div>

> [@zylkowski](#):
>
> Do you have any tips on how to convert image to RGBD?

Unfortunately not… cc @PatrickRyan in case he would know.

Maybe we should support a more widespread format for floating point textures, like .hdr or .exr…

[Next page](https://forum.babylonjs.com/t/proper-lightmap-workflow-and-formats/41533.md?page=2)
