HDR images look blocky or jaggy?

Questions
#1

When I load my HDR images they look blocky or jaggy? What am I doing wrong? This happens with 1K and 4K HDR files (‘HDR’ extension, not ‘EXR’).

    new RGBELoader()
        .load( fullUrlToHdri, function ( texture ) {
            texture.mapping = THREE.EquirectangularReflectionMapping;

            g_ThreeJsScene.background = texture;
            g_ThreeJsScene.environment = texture;

            console.info(`${errPrefix}HDRI image successfully loaded.`);
        } );

image
image1920×1080 182 KB

Also, sometimes the HDR image bleeds through the 3D GLTF model I have in the scene as it animates. In the image below, the dark cube that says N3 has the light behind bleed through in *some * frames, not all. I’ve circled the bleed through with a red circle. How can I fix this?

image
image539×603 60.3 KB

#2

What version of three.js are you using?

1 Like
#3

I’m still using r124 because my code is heavily dependent on THREE.Geometry. I did switch my code yesterday to start using PMREMGenerator and the both the blocky and bleed-through issues seem a lot better:

 new RGBELoader()
        .setDataType( THREE.UnsignedByteType )
        .load( fullUrlToHdri, ( texture ) => {

            const envMap = g_PmremGenerator.fromEquirectangular( texture ).texture;

            g_ThreeJsScene.background = envMap;
            g_ThreeJsScene.environment = envMap;

            texture.dispose();
            g_PmremGenerator.dispose();
        } );

But I lose the reflectivity unfortunately with that approach.

If there is a fix for m problem in the later versions, is it something I can “transplant” easily to r124 and if so what file(s) do I need to examine? Or are there a lot of code dependencies that make doing that hard?

#4

With this version of three.js you load your HDR textures as RGBE encoded RGBA8 textures which only allows nearest texture filtering. I suggest you use .setDataType( THREE.HalfFloatType ) which enables linear texture filtering.

1 Like
#5

Thank you. I will try that.

#6

I’ve noticed that I only get the reflections off the model when I have HDRI images loaded. Is there a way to get reflections from the objects in my scene? I saw your reflections example and I tried it. I did integrate some reflective surfaces into my world. That worked great and I saw my world objects reflected off of the surfaces, they acted as mirrors. But with the animated model (gLTF file), only HDRI images reflect off of it. Is there a way to get my world objects to reflect off of it?