Why HDR backgrounds are so poor quality

When using a HDR as a background, why are they such poor quality?

If you look at an official example as a guide

https://threejs.org/examples/?q=gltf#webgl_loader_gltf

Even on that you can see the background is far from crisp and I would argue pretty useless, as who would want to see it like that?

I have opened the HDR’s in other applications and they appear to be high quality, so I don’t think its file that’s the issue.

Is there a quality setting? Any advice is appreciated.

Do these applications display the HDR texture as a skybox?

If I load the 4K image into three I get jagged / pixelated looking background. If I use the same image in blender I get much better results. Here it is in blender

as you can see significantly better

Can you explain how you have added the equirectangular environment map in Blender?

hopefully the above helps

1 Like

i believe RGBELoader & CubeTextureLoader limit the resolution as the primary function of the background (at least from what i thought) isn’t to show something but to light the scene realistically and performantly. you can always just use a sphere/boxGeometry side=BackSide and project the texture in any resolution you want, or film it with a cube camera into a webglrendertarget whose texture you can stick into scene.background again.

TBH, I can’t see a noticeable difference when using the 4K equirectangular HDR texture in the three.js editor as Scene.background compared to the Blender setup.