HDR Lightmap workflow

Questions
1

Hi everyone!

I have a scene that uses HDR Lightmaps exported from Blender, which I add to the materials of an imported GLB scene with the RGBE loader.

This is what the lightmaps look like when I open them in Photoshop:

HDRILightmap
HDRILightmap691×689 71.9 KB

and this is what it ends up looking like in my Three scene:

HDRLightmap.PNG
HDRLightmap.PNG1910×940 251 KB

As you can see the result is completely off, but I have no idea why.

Here’s my (condensed) code:

 const loader = new RGBELoader();
    for (let child of gltf.scene.children) {
        loader.load( 
            lightBakeTestTex,  
            function ( texture ) {
                texture.flipY = false;

                if (child.material){
                    let newMat = child.material.clone();
                    child.material = newMat;           
                    child.material.envMapIntensity = 0;
                    child.material.lightMap = texture;
                    child.material.lightMapIntensity = 1; 
                    child.material.needsUpdate = true;
                }
            });
    }

Setting the renderer’s tonemapping options doesn’t do much either… The only thing that’s made any real difference is setting the renderer’s exposure to something like 4, but that totally washes out the non-lightmapped objects I have in the scene. When I up the environment map intensity the scene brightens up, but the lightmaps become almost invisible. I tested the scene with PNGs as lightmaps instead and the range is correct, but the quality isn’t very good for obvious reasons.

Surely there must be an intended workflow or fix for this scenario? What am I missing? :confused:

Thank you so much in advance!

1 Like
2

Having the same issue here, hope some one to share the correct workflow

3

to match blender you have to have srgb encoding for the render instance and the texture: Color Management in three.js

renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.outputEncoding = THREE.sRGBEncoding
texture.encoding = THREE.sRGBEncoding

then there’s also the possibility to create the lightmap in realtime, three 127 has that in the examples. i’ve tried with something changing positions here: v6 adaptive regression (forked) - CodeSandbox i think it works incredible and finally allows for movement.

3 Likes
4

Hey!

Thanks a lot for your response, really appreciate it!

I’ve already set my renderer.outputEncoding to sRGB and while the ACESFilming tone mapping gives the colors a nice dramatic effect, it doesn’t really fix the issue of the lightmaps being proportionally too dark (or next to invisible if I set environment intensity to 1:

env1
env1978×428 317 KB
) that you can see in the images of my original post…
Also, setting the HDR texture to encoding to sRGB (in the line right after texture.flipY = false;) results in this:
srgb
srgb834×421 291 KB

Maybe this needs to happen in a different place then…?

Is there an example of an HDR lightmapped three project somewhere out there on the interwebs?
It seems to be less of a color management problem and more an issue of how the HDR lightmap is applied to the material…

1 Like
5

Did you find a fix for this?