Use JPG for HDRCubeTexture

Is it possible to load a jpg instead of a hdr file for HDRCubeTexture? I tried CubeTexture, but this works completly different. It expects 6 files with suffix _px, _py, _pz, _nx, _ny and _nz. I only converted the hdr to jpg. Just because hdr file size is huge and I want it for mobile. No need for cube side images. The jpg has the same image content like the hdr.

demo

Currently I use HDR like that:

const hdriTexture = new HDRCubeTexture('assets/green.hdr', this.scene, 512);
this.scene.environmentTexture = hdriTexture;

Replacing this with *.jpg does not work. The scene will not be loaded in this case. No error. And CubeTexture class expects 6 jpg files. But I only want this one file which is already prepared for enviroment texture.

You may convert .hdr to .env to reduce the size greatly - Babylon.js Texture Tools

Good to know, but:

HDR 1.64 MB → ENV 2.30 MB

(1024 x 512px)

This sounds really strange or your hdr is 1024 total whereas you use 1024 per face in env => 4096 equivalence.

1 Like

It’s a simple hdr file from HDRIs • Poly Haven. I just converted it to jpg to reduce the file size, because hdr cannot be compressed afaik. The content is exactly the same. Babylon just does not support jpg as input. No error, but the scene is not visible anymore.

I tried a few HDR → ENV. And each time the env file was larger almost 2x. But anyway, I with I could use an jpg which is just just 10% of hdr file size. In Blender I can just load the jpg (converted from hdr) as env tex. It would be great if Babylon can also do this.

so you compare jpg and env which are different. env supports hdr data and prefiltered colors required for pbr materials. you could convert from jpg at load time but it would throw away any size gains you had.

No I don’t compare jpg and env. I know JPG doesn’t have the same capabilities as HDR. But it’s OK. I just want the sky reflections and ambient light. In blender hdr and jpg have the same effect in my cases. Both are bitmaps. Also in Godot I can load a jpg instead of hdr. Not sure if this works in three.js. Not tested yet.

did you try the env in webp ?

also jpg could work it will just end up being slower to load as they will need to be prefiltered on the fly.

Hello @sebavan

Could you please look into this