IBL Texture Tool repository (https://github.com/sebavan/BabylonjsTextureTools) has last been updated for Babylon.js 4.2.0. So while I suppose that code should run without issues on latest babylonjs versions, I was wondering if that conversion code has been already added within the main Babylon.js repository and is hidden somewhere as a utility function? Or is migrating the implementation from the texture tool repository the way to go?
You can use the HDRFiltering class to convert a normal cube map to a pre-filtered cube map, and then use BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync to create an .env file (in effect, this gives you a buffer array with data that you can save to a file).
Hmm… I think I almost got it working but something is still wrong. Here is a Playground I have been testing with: Babylon.js Playground
Problem comes when comparing the .env file generated with IBL Texture Tool (“if (0)” condition in the Playground) and CreateEnvTextureAsync() latter has incorrect colors.
Hmm… Actually, it seems to be about CubeTexture resolution while calculating prefiltering. 512 looks good.
So I guess the solution is to generate the prefiltering on 512 cube texture and then somehow downscale the size to desired target resolution (128) while keeping prefiltering results from the higher resolution. This is getting complicated.
Or maybe just load the hdr with both resolutions and then transfer prefiltering to the lower resolution. Although that doesn’t sound optimal either, if even possible…
EDIT: It is starting to look like replicating the code from BabylonjsTextureTools repository is the only way to go. Otherwise there doesn’t seem to be a way to generate lower resolution .env file correctly.
Yes indeed, the lights are too small to be properly sampled from lower resolution image. When low resolution cubemap is generated from .hdr either the pixel sample misses and you end up with too dim light (which changes color like in the case above), or it hits the light and the light becomes too large / strong.
I already concluded that the only way to accurately generate low resolution .env files is using the approach from the BabylonjsTextureTools repository where it samples higher resolution (512) cube map into the final downscaled one (256 in the current implementation but 128 also works really well and is only 200-250kb per .env file).
EDIT: Or well, other way would be to supersample the original HDR image during HDRCubeTexture(), but that would likely be harder to implement.
To my surprise it not only works, but the result matches the reference 128 resolution .env file generated with BabylonjsTextureTools exactly. So with 4 samples in place in the Playground example in the PR description:
Specular colors are correct
Environment itself that is rendered in the background (but also in reflections if looked closer) is way less blocky and closer to the higher resolution source because of that
