Hello everyone,
I am looking to reduce the size of .hdr files and ran into a solution which converts hdr files into jpg/webp + gainmap files which works with Threejs (actually requires three.js renderer for conversion)
Is there a similar implementation for Babylon ?
You can use babylon’s sandbox to convert hdr to .env and compress it using webp.
To a regular .webp ?
I can convert an .hdr file to a regular .webp file in photoshop, but its not the same as .webp + gainmap
No, it’s still an .env file, it just uses web compression internally.
How ? A .webp file cannot hold all the color information of an .hdr file
Babylonjs uses the a-channel of the texture for encoding to achieve high dynamic range. So the internal storage can be either png or web.
See the documentation for details
Incidentally, sandbox loads hdr with a resolution of 256, so the exported .env has a resolution of 256 * 256 * 6. This is typically 100kb to 200kb when using webp. If you want to export with a higher resolution you can manually load the hdr file with code and set the resolution. Then use EnvironmentTextureTools.CreateEnvTextureAsync() to export.
Here’s an example, using playground to export a custom resolution .env using webp compression
I just tried to export a 19mb .hdr to .env.
In Safari both png and webp ends up as 703kb, in Chrome png is 672kb and webp is 76kb
Maybe babylonjs is using something that safari doesn’t support (oh damn safari) causing the fallback to png.
Looks like it. The playground you posted is 4mb in Safari and 489kb in Chrome
@qq2315137135
Ok, that does improve the .hdr workflow for environments, thanks for that!
Another use that I was looking forward to was for lightmaps, but without diving too deep into the code, looks like lightmaps are not able to utilize such textures, do you have any insights ?
I’m currently using a relatively simple lightmapping workflow, which doesn’t take high dynamic range into account.
Currently the lightmaps in pbr materials support the same rgbd encoding as .env. All that is needed is
texture.isRGBD = true
But I don’t know if there is a good tool to export rgbd encoded .png files from belnder.
Thanks, found a related topic, experimented with .png/RGBD and faced the same issues as joie, terrible banding which I can’t seem to fix, but even if it’s fixable a .png is still pretty large and is no match for what webps/jpegs+gainmaps can offer in terms of compressed sizes and quality.
.env with webp compression (which you mentioned to be used as an environment map) gives a good compressed size and works well as a reflection texture, but it cannot be used as a lightmap.
I guess this could be something that is worth looking into for the devs