EXR flipY loading

Hello- Im currently trying to load an EXR to use as a lightmap

I’d tried the following from an online tutorial
However I cannot get an EXR to load via this method.

const textureLoader = new THREE.TextureLoader();
const lightMap = textureLoader.load('path/to/your/lightmap.exr');

So have used this method instead that all works okay, however it the Y is flipped on the exr when mapping back.

import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
const lightMapEXR = new EXRLoader();
const lightMap = lightMapEXR.load('Floor.exr');

Using a stardard material/texture load i can normally just do:

singleModelGrp.getObjectByName(`Room`).material.lightMap.flipY = true;

But for some reason this has no effect at all
Any thoughts? am i missing somthing on the best way to load in an EXR for a lightmap?

You could try flipping it after it’s created, similar to this:

import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
const lightMapEXR = new EXRLoader();
const lightMap = lightMapEXR.load('Floor.exr');
lightMap.flipY = true; // or false, just try both

If that still does not work then try flipping the EXR file itself, for this you could try using my IMG2MESH viewer / converter, which might not necessarily produce identical image (might be slightly lighter or darker or something else). The file size might also differ from original.

You would locally load your EXR file and then select either EXR or EXR_Y export option in the viewer.

Thank for the reply. I think I did try that but will give it another go.
The odd thing is if I console.log flipY then I can see it is changing true to false or false to true but it just has no effect on the mapping to the mesh, if the exr is loaded via EXRLoader.
I’ll take a look at your suggestion of flipping the exr its self, might be a good work around.

EXRLoader assigns .flipY just before invoking the onLoad callback…

… so I think modifying properties on the placeholder before that is too soon. Instead you could do this:

const lightMapEXR = new EXRLoader();
const lightMap = await lightMapEXR.loadAsync('Floor.exr');
lightMap.flipY = true; 

Note that the .flipY property does not work for THREE.CompressedTexture, but this wouldn’t matter for EXR textures, which are not compressed on GPU.

2 Likes

Fantastic - yes that worked!
Thank you for the help :slight_smile:

Edit - probably should just add that i did need to tweak this, as I need to do a check in the animate() loop for some animatable bits that rely on the model and exr having loaded.

let lightMap;
const lightMapEXR = new EXRLoader();
lightMap = await lightMapEXR.loadAsync('Floor.exr');
lightMap.flipY = true;
function animate() {   
  if(singleModelGrp && lightMap){
    // various code to animate some model parts
  }
}
1 Like

You should probably then mark Don’s answer as the solution to your question (regardless of the tweaks you applied).

1 Like