.dds VS .env Quality

Hi everyone,

I have an issue with environment textures. As everyone here I am looking for the best ratio between file size and rendering quality.

I followed the great tutorial in order to create our own texture: Use a HDR environment (for PBR) - Babylon.js Documentation

I manage to have great quality with a 4MO dds file and now I want to reduce its size by transforming it in env file. But then I lose quality as you can see here:
DDS:
DDS4MO.PNG
ENV:

With the env file, the environment texture is losing color and there is a lot of grey area showing on the glass of the watch where it was green with the dds.

Can you tell me what am I doing wrong here? Maybe there is some option to choose when exporting from IBL software?

@PatrickRyan :raising_hand_man:

Thanks a lot for your help ( And congrats for the release BTW :hugs: )

mmmm pretty. What were your export setting from IBL baker?

Nothing special,

I just open the software, load my hdr, set all the resolution to 256 and save.
I don’t touch to any other inputs.

What happens when you change it to 32 bit?

@PichouPichou, Sorry for the delay in my response. Friday was indeed recovery time for me after the release. The env file will be a compression of the DDS mip maps using an RGBD algorithm which stores a divisor in the alpha channel. The env map is an 8-bit image, and the alpha channel is used to reconstruct the values that are over 1.0 in each pixel. This is done by: rgb * (maxRange / 255) / alpha. We went with the RGBD method of compression over the RGBM (multiply rgb by alpha to get values over 1.0) because the distribution of values in RGBM is more evenly distributed between 0 and maxRange where RGBD tends to pack precision on the lower end with a few highlights. With IBL environments that is exactly what we normally have. A few pixels of exceedingly high values in the thousands (for the sun) and the rest of the image packed between 0 and 5 or 10.

With all that in mind, you do want to export with as much precision as possible and let the env do the compression for you as @Pryme8 suggests. I will always output a full 32-bit float file at 256 pixels per face and let the env convert for me. This helps the algorithm doing the compression as the tones are more representative of the original image when creating the divisor alpha channel.

If you can share your IBL with me, I can run it through our pipeline for a comparison if you like. We use Lys for our environments, which does tend to turn out a bit differently as I can export a dds using the same lighting model as is implemented in Babylon. IBL Baker does not have the same model available (GGX Log2) for exporting its files and while IBL Baker does an acceptable job I have noticed that if the values are critical from the IBL it’s better to author it with the same lighting model as the renderer expects.

My guess is that exporting with the extra bit depth will get your tones back in line with what you expect, but I can always run the comparison for you if you like. Let me know if you have any other questions!

2 Likes

Hello @PatrickRyan,

Thanks a lot for you very detailed answers. Very nice to understand how all of this is working!
I will try to push the quality of the dds export from IBL and I will come back to you with results.

1 Like

Hi @PatrickRyanand @Pryme8, I tryed to push the RGBA to 32 and the resolution to 512 but I still get the same result.

Here are screenshots from the sandbox which shows that the ENV is a little bit less colorful but nothing special otherwise.
DDS 32MO:


ENV 4MO:

So I wondered if this might come from my own scene. What are the environment parameter in the sandbox? I tried to play with cubetexture parameters in my scene. By changing the isRGBD to true, the colors are back as you can see here:

But for now I can’t get rid of the grey layer showing above the trees. Is it another parameter that could solve this? CubeTexture - Babylon.js Documentation

hmmmm that those colors are off slightly huh that’s odd. Oh that might be camera angle actually now that I am thinking about it.

You said you got the colors to come back by changing the isRGBD, I think so that’s solved I hope.

The Grey I think is just the specular gloss from the env on a highly reflective surface. Do you have a baseline we can compare to with that now?

Have you tried to change the gammaSpace of the env texture (or of the .dds)?

Also, you can try to use the env texture with a sky box to see if the raw textures really differ so much or if the discrepancies you see come from something else.

Yes the comparison image is the first I shared at the beginning of the topic.
Here it is again :wink:
As you can see the trees are reflecting way better than in the previous image.

@Pryme8 I tried to change the “linearSpecularLOD” but it changes nothing.
@Evgeni_Popov I have a lot of color changes by setting gammaSpace to true. But I still have the grey reflection with the ENV texture whatever the gammaSpace.

Can you try to create a skybox using both textures in turn, to check that using the .dds and the .env really displays different texture colors? That would validate the problem comes from the textures themselves and not from something else.

It seems odd to me that there are such differences only because the .env texture is encoded as RGBD…

Looks as though the only difference is angle and position of the screen capture. But I might be wrong.

Can you share your dds and env file here and create a pg with a sphere and your watch metal setup ?

Here you go @sebavan: https://www.babylonjs-playground.com/#0ABNPK#4

It took some time but it will be definitely easier to find the problem and its solution. :wink:

The watch on the right is using the DDS file and on the left the ENV file.

1 Like

You should use CreateFromPrefilteredData to load the .dds file:

https://www.babylonjs-playground.com/#0ABNPK#6

The clocks are now much more similar in their rendering, but there are still a bit more reflection in the watchband for the dds one.

However, your dds file is not similar to the env one: change the skybox to display the env texture instead of the dds, you will see there are much more resolution in the env than in the dds (at least for the mimap 0 which normally is the one used to display the sky). The dds is a lot more blurry whereas it shouldn’t, imo.

[…] The dds is 128x128 whereas the env is 512x512 pixels.

Nice models btw!

I tried to generate the env in the sandbox from your dds and I am not seeing your artifacts Can you try with the file I attached ?environment.zip (343.8 KB)

Indeed with your environment texture @sebavan plus the use of CreateFromPrefilteredData as suggested by @Evgeni_Popov, we have a perfect match I think: https://www.babylonjs-playground.com/#0ABNPK#7

To confirm and for the fun with another texture: https://www.babylonjs-playground.com/#0ABNPK#8

Thanks to you all for your help!

2 Likes