# RGBD Lightmap banding **URL:** \ **Category:** Questions\ **Created:** [February 20, 2023, 6:21am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375 "2023-02-20T06:21:36Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 6:21am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/1 "2023-02-20T06:21:36Z")
Hi there @sebavan Continuing my lightmap generation journey starting [here](https://forum.babylonjs.com/t/lightmaps-not-bright-enough/12649/34) I made two lightmaps from two scenes with the Lightmapper addon for Blender. Two rooms with similar lighting, although one of them has some warmer lights. Each maps generated in .HDR format and saved in 2k resolution (original is 4k). The “Dormitorio” one is coming great when opened in Photoshop (I don’t care Photoshop interprets “D” channel as transparency) as you can see here (expected blown out parts): ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/c/fc56a62f90d597222fb918e9f6f471e9a5e174d5.jpeg) This is how it looks in [this playground](https://playground.babylonjs.com/#WIU6H9): ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/9/094745f5dc0cf9bafb36d7d512d226e539fbf530.jpeg) But the other lightmap, comes with ugly banding and, or inverted colors (warm lights appears blue): ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/c/1ce519c1d89633dbeb537ad4d13f2f6ef9eee97c.jpeg) And this is how it looks in [this playground](https://playground.babylonjs.com/#WIU6H9#2): ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/2/928eea9d5083fc5f50c7c27f62c17d75c4bfd6c3.jpeg) I’m using the code posted in the other thread to generate the RGBD png for both lightmaps, so something is wrong but I don’t know what. For the records, this is the code: ```auto var createEngine = function () { return new BABYLON.Engine(canvas, true, { stencil: true, premultipliedAlpha: false }); }; BABYLON.ThinEngine._TextureLoaders.push({ supportCascades: false, canLoad: (extension) => { return BABYLON.StringTools.EndsWith(extension, ".hdr"); }, loadData: (data, texture, callback) => { var bytes = new Uint8Array(data.buffer, data.byteOffset, data.byteLength); var hdrInfo = BABYLON.HDRTools.RGBE_ReadHeader(bytes); var pixels = BABYLON.HDRTools.RGBE_ReadPixels(bytes, hdrInfo); texture.type = BABYLON.Constants.TEXTURETYPE_FLOAT; texture.format = BABYLON.Constants.TEXTUREFORMAT_RGB; // Mip maps can not be generated on FLOAT RGB textures. texture.generateMipMaps = false; callback(hdrInfo.width, hdrInfo.height, texture.generateMipMaps, false, () => { texture.getEngine()._uploadDataToTextureDirectly(texture, pixels, 0, 0, undefined, true); }); } }); var createScene = function () { var url = "https://dl.dropbox.com/s/rt3dk5k8mhqlwv8/Dormitorio_v2_2k.hdr"; var scene = new BABYLON.Scene(engine); var texture = new BABYLON.Texture(url, scene, false, false, BABYLON.Texture.NEAREST_SAMPLINGMODE); texture.wrapU = 0; texture.wrapV = 0; texture.onLoadObservable.add(() => { let rgbdPostProcess = new BABYLON.PostProcess("rgbdEncodeB", "rgbdEncode", null, null, 1, null, BABYLON.Constants.TEXTURE_NEAREST_SAMPLINGMODE, engine, false, undefined, BABYLON.Constants.TEXTURETYPE_UNSIGNED_INT, undefined, null, false); rgbdPostProcess.getEffect().executeWhenCompiled(() => { rgbdPostProcess.onApply = (effect) => { effect.setTexture("textureSampler", texture); }; // As the process needs to happen on the main canvas, keep track of the current size let currentW = engine.getRenderWidth(); let currentH = engine.getRenderHeight(); // Set the desired size for the texture engine.setSize(texture.getSize().width, texture.getSize().height); scene.postProcessManager.directRender([rgbdPostProcess], null); // Reading datas from WebGL BABYLON.Tools.ToBlob(canvas, (blob) => { BABYLON.Tools.Download(blob, "Dormitorio_lightmap_RGBD.png"); // var reader = new FileReader(); // reader.onloadend = function() { // console.log(reader.result); // } // reader.readAsDataURL(blob); }); // Reapply the previous canvas size engine.setSize(currentW, currentH); }); }); scene.createDefaultCamera(); return scene; }; ``` Any insights? Thanks in advance for your help! ---
**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:** [February 20, 2023, 10:38am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/2 "2023-02-20T10:38:34Z")
Instead of: ```javascript BABYLON.ThinEngine._TextureLoaders.push({ ``` you should use: ```javascript BABYLON.ThinEngine._TextureLoaders.splice(0, 0, { ``` because else your new loader won’t be used, as another .hdr loader does exist in 5.0 and will be found in BABYLON.ThinEngine.\_TextureLoaders before your one. Also, in your PG, you should indicate that the texture is RGBD (`myLightmapTexture.isRGBD = true;`). ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 10:52am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/3 "2023-02-20T10:52:55Z")
I’m sorry @Evgeni_Popov but regenerating the PNG with your code leads to the same banding effect: ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/8/f883347e01efc0935c665f3a1e119d0df0f7d698.jpeg) ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 11:10am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/4 "2023-02-20T11:10:52Z")
I guess there is something wrong in the source HDR file that prevents it from creating correct result ---
**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:** [February 20, 2023, 11:14am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/5 "2023-02-20T11:14:52Z")
Do you have the original .hdr file for us to look at? I don’t really understand the large black areas you have in the .png file… ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 11:16am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/6 "2023-02-20T11:16:12Z")
Yep, here you are: [https://dl.dropbox.com/s/rt3dk5k8mhqlwv8/Dormitorio\_v2\_2k.hdr](https://dl.dropbox.com/s/rt3dk5k8mhqlwv8/Dormitorio_v2_2k.hdr) ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 11:17am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/7 "2023-02-20T11:17:38Z")
For comparison purposes, you can check the source HDR file for the other lightmap that generates correctly in RGBD format here: [https://dl.dropbox.com/s/0kdvl62e9awy5d3/Salon\_lightmap.hdr](https://dl.dropbox.com/s/0kdvl62e9awy5d3/Salon_lightmap.hdr) ---
**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:** [February 20, 2023, 11:46am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/8 "2023-02-20T11:46:16Z")
Here’s what I end up with when encoding the .hdr file to .png using the code from @sebavan ([https://playground.babylonjs.com/#95Y4D7#10](https://playground.babylonjs.com/#95Y4D7#10)) with the `splice` fix: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/5/d5c1a81e0323846cb67afb08bc1bfb28d2a124da.jpeg) With this picture, the rendering is ok, assuming you set `myLightmapTexture.isRGBD = true`. Applying tone mapping is a must too. Note that you have some flickering in your scene because of z-fighting: there are some geometries that are duplicated, it seems. [EDIT] For a basis of comparison, here is the scene using the .hdr file, with tone mapping enabled: > **[Babylon.js Playground](https://playground.babylonjs.com/#WIU6H9%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 11:53am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/9 "2023-02-20T11:53:01Z")
Yep, the flickering comes from the fact that there are several versions of the same room in the same place, we are showing each one via code, everything is fine then. So, what is the complete correct code I must use to convert the images to HDR then and why I didn’t have to do anything with the other room lightmap? I’m not a coding guy, so I really don’t know or understand what I’m doing LOL ---
**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:** [February 20, 2023, 11:55am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/10 "2023-02-20T11:55:37Z")
Use the link I have given above to convert a .hdr to .png file ([https://playground.babylonjs.com/#95Y4D7#10](https://playground.babylonjs.com/#95Y4D7#10)): that’s what I used to do the conversion myself. I don’t know what you did to convert the .hdr to .png files, so I can’t tell why it worked for one file and not for the other. ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 12:01pm UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/11 "2023-02-20T12:01:34Z")
Thank you very much. I’ll send feedback when tested. Cheers. ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 20, 2023, 12:10pm UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/12 "2023-02-20T12:10:31Z")
It really would be great if RGBD png files coulb be exported from softwares like Photoshop or Nuke (Nuke is great for channels manipulations and saving, so I guess it could create such files without problem) ---
**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:** [February 20, 2023, 2:17pm UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/13 "2023-02-20T14:17:40Z")
In the end, you might have struggled with it a little 😅 😉 but then, know that (in my opinion) the result looks just beautiful. 😍 GJ, ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [February 21, 2023, 6:05am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/14 "2023-02-21T06:05:17Z")
Thank you @mawa for your kind words. OK, I remade the lightmap with better quality and put the " `myLightmapTexture.isRGBD = true`" line. So, with a tonemapping set to “Standard” it looks like this: ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/9/39cff8dc722a41a78403cef7ab80c46116bb2183.jpeg) And here with “ACES”: ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/6/b6eec37ca46dd328ebc1ce103132a15035ee664f.jpeg) It looks darker with ACES, I like Standard more. It’s a pitty we don’t have access to any other tonemapping tools, like softclip or toe controls though. ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [March 1, 2023, 8:25am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/15 "2023-03-01T08:25:24Z")
Hi there, Bad news here. I needed to redo the lightmap completely and now, when I convert the HDR file into RGBD I get banding again! What can be the problem? ![imagen](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/d/9d27e5025b949f16a9eec7931a7ad0471cbf7e34.jpeg) [Here](https://dl.dropbox.com/s/1vf6mry9rbgnecs/Salon_lightmap_v2_2k.hdr) you have the original HDR file. Here is the code I’m using to generate the RGBD file: ```auto var createEngine = function () { return new BABYLON.Engine(canvas, true, { stencil: true, premultipliedAlpha: false }); }; BABYLON.ThinEngine._TextureLoaders.splice(0, 0, { supportCascades: false, canLoad: (extension) => { return BABYLON.StringTools.EndsWith(extension, ".hdr"); }, loadData: (data, texture, callback) => { var bytes = new Uint8Array(data.buffer, data.byteOffset, data.byteLength); var hdrInfo = BABYLON.HDRTools.RGBE_ReadHeader(bytes); var pixels = BABYLON.HDRTools.RGBE_ReadPixels(bytes, hdrInfo); texture.type = BABYLON.Constants.TEXTURETYPE_FLOAT; texture.format = BABYLON.Constants.TEXTUREFORMAT_RGB; // Mip maps can not be generated on FLOAT RGB textures. texture.generateMipMaps = false; callback(hdrInfo.width, hdrInfo.height, texture.generateMipMaps, false, () => { texture.getEngine()._uploadDataToTextureDirectly(texture, pixels, 0, 0, undefined, true); }); } }); var createScene = function () { var url = "https://dl.dropbox.com/s/1vf6mry9rbgnecs/Salon_lightmap_v2_2k.hdr"; var scene = new BABYLON.Scene(engine); var texture = new BABYLON.Texture(url, scene, false, false, BABYLON.Texture.NEAREST_SAMPLINGMODE); texture.wrapU = 0; texture.wrapV = 0; texture.onLoadObservable.add(() => { let rgbdPostProcess = new BABYLON.PostProcess("rgbdEncodeB", "rgbdEncode", null, null, 1, null, BABYLON.Constants.TEXTURE_NEAREST_SAMPLINGMODE, engine, false, undefined, BABYLON.Constants.TEXTURETYPE_UNSIGNED_INT, undefined, null, false); rgbdPostProcess.getEffect().executeWhenCompiled(() => { rgbdPostProcess.onApply = (effect) => { effect.setTexture("textureSampler", texture); }; // As the process needs to happen on the main canvas, keep track of the current size let currentW = engine.getRenderWidth(); let currentH = engine.getRenderHeight(); // Set the desired size for the texture engine.setSize(texture.getSize().width, texture.getSize().height); scene.postProcessManager.directRender([rgbdPostProcess], null); // Reading datas from WebGL BABYLON.Tools.ToBlob(canvas, (blob) => { BABYLON.Tools.Download(blob, "Salon_lightmap_RGBD.png"); // var reader = new FileReader(); // reader.onloadend = function() { // console.log(reader.result); // } // reader.readAsDataURL(blob); }); // Reapply the previous canvas size engine.setSize(currentW, currentH); }); }); scene.createDefaultCamera(); return scene; }; ``` ---
**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:** [March 1, 2023, 1:03pm UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/16 "2023-03-01T13:03:00Z")
What is the .png file which is generated? It would be simpler to find the problem if you also provide the PG with the final lightmapped scene. ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [March 1, 2023, 1:18pm UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/17 "2023-03-01T13:18:33Z")
This the [generated PNG](https://dl.dropbox.com/s/pm2w6qgm2fy5vhy/Salon_lightmap_RGBD_Banding.png). As you can see, the banding is horrendous. And here is the code I’m using for the playground. ```auto var createScene = function () { // var scene = new BABYLON.Scene(engine); // var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, true); // var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 0.7; light.groundColor = new BABYLON.Color3(1, 1, 1); var hdrEnvironment = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene); scene.createDefaultSkybox(hdrEnvironment, true); //import model into scene BABYLON.SceneLoader.ImportMeshAsync("", "https://dl.dropbox.com/s/fejhvgach8pdfcb/SalonCocina.glb") .then(function (result) { // scene.createDefaultCamera(true, true, true); scene.activeCamera.alpha += Math.PI; scene.activeCamera.radius=10; // var myLightmapTexture = new BABYLON.Texture("https://dl.dropbox.com/s/pm2w6qgm2fy5vhy/Salon_lightmap_RGBD_Banding.png", scene); myLightmapTexture.coordinatesIndex = 1; //A continuación tenemos que hacer un espejo del lightmap en V, paso innecesario cuando la escena es glTF //myLightmapTexture.vScale = -1; myLightmapTexture.isRGBD = true myLightmapTexture.level = 1.0; // scene.materials.forEach(material=>{ material.lightmapTexture=myLightmapTexture; material.useLightmapAsShadowmap=true; }); }) .catch(function (error) { alert(error); }); return scene; }; ``` ---
**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:** [March 1, 2023, 5:29pm UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/18 "2023-03-01T17:29:14Z")
It’s not the png I get when using [https://playground.babylonjs.com/#95Y4D7#13](https://playground.babylonjs.com/#95Y4D7#13) : ![test](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/e/5e16e0eeecba256b6bd3d2049c228d30b79da09a.jpeg) When used on your scene: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/9/a9dd864741cf7d5d4822a72d1987e48bc259a59a.jpeg) (I had to set the level to 0.2, 1.0 was too overexposed)/ ---
**Author:** ![joie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joie/32/24608_2.png) [@joie](https://forum.babylonjs.com/u/joie)\ **Post date:** [March 2, 2023, 6:05am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/19 "2023-03-02T06:05:45Z")
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. ---
**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\ **Post date:** [March 2, 2023, 8:52am UTC](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375/20 "2023-03-02T08:52:44Z")
This RGBD lightmap workflow have to be saved in the doc (I unfortunately doesn’t have time to try a first draft. Your scene will probably looks very nice! [Next page](https://forum.babylonjs.com/t/rgbd-lightmap-banding/38375.md?page=2)