Hi there @sebavan
Continuing my lightmap generation journey starting here
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):
This is how it looks in this playground:
But the other lightmap, comes with ugly banding and, or inverted colors (warm lights appears blue):
And this is how it looks in this playground:
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:
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!
but then, know that (in my opinion) the result looks just beautiful. 
GJ,
