Reflection quality with low res environment HDR

Hey community,

I am using a super low resolution HDR as the env texture to illuminate the scene (no other lights). I got the correct lighting however the reflection on the surface looks super pixelated due to the low resolution of the HDR. Just wondering, is there a way I can bring in another high resolution tone mapped jpg (from the original high res HDR) into the scene and use it only for reflection pass?

I have tried to link that texture to reflectionTexture property on asset’s material. But I ended up getting an individual reflection coat on everything. All of the roughness data from original PBR material (from roughness textures) cann’t affect this individual coat. I am losing the roughness data from the original assets.

Please let me know if there is a way to get a great reflection with a super low resolution env HDR. The reason why I couldnt use a high resolution HDR is due to the mobile device memory limit. So I can’t load a big file into the scene.

Here is my PG:

Many thanks,
Tawibox

I don’t think this is related to just this use case. I have the very same when setting new for any channel (albedo, emissive,etc…). Each time you set a NEW texture, all properties related are gone with the wind and you need to set’em again (as far as I know). Looks like it’s ‘per design’. Though I would love to have an ez way to keep with them in such a case (where you cannot just update the source url).?!

@mawa

Hey thank you for the response but I am little confused. So do you mean there are no solutions to deal with reflection texture is overriding the metallic roughness textures?

I played with the sliders in the inspector, and found that after link to a reflection texture, both the roughness and metallicRoughnessTexture properties no longer will affect that reflection texture layer.

Honestly of that I wouldn’t know. Never did this before. The only times I use a different reflectionTexture is generally planar for things like a mirror or a glass table. All I’m saying is that when you set a new texture the properties related aren’t kept. But here it’s something else/something more. I checked on it and as you say, the roughness texture is ignored. I tried to use it as metallicReflectance but it still ignored. You’re gonna need better expert advise on this one, SRY. cc @Evgeni_Popov

You can’t use a regular texture as a reflection texture in PBR materials, the texture must be prefiltered to be usable. So, in lines 35-37, you can set the reflectionTexture property to hdrTextureLow or hdrTextureHigh, but not to reflectionTexture, which is not prefiltered.

1 Like

Oh! Can I use a regular tone mapped jpg as hdrTexruteHigh and link it to reflectionTexture?
@Evgeni_Popov

Not if you want to use it as the reflection texture of a PBR material. As explained, this texture must be processed (prefiltered) to be suitable as an environment texture.

See this doc page for more information on how to create suitable environment maps for PBR materials:

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/HDREnvironment

2 Likes

@Evgeni_Popov
Gotcha. so back to my original question. is there a way to use smaller hdr file size to achieve high quality reflection? I was using a 256x128 hdr and the reflection looks very pixelated.

The Sandbox uses 256*256 environment texture, I wouldn’t say that reflections are pixelated.

256x128 is not a big texture, so if used on a big mirror plane, you will see pixelated reflections indeed. You can try to mitigate it by raising the roughness parameter, to blur the reflection.

@Evgeni_Popov
@labris
Yeah for asset has a clear reflective surface the pixelated artifact is very obvious. because we have a very big amount asset need to load in our service, there is no way we can changes all assets roughness property. So the current solution we are adapting is we blurred the HDR texture. It does mitigate the pixelated artifacts but also had bad impact of the render realism: for the clear reflective surface we are seeing a very blurry reflection and they don’t look great at more such as jewelries or glasses.

Just wondering are there any other solutions? it’s very hard for us to increase HDR resolution technically on our end since it will used on mobile devices.

Let me cc @PatrickRyan to this thread.

@tawibox, in looking at your scene, a couple of things stand out to me. If you are using the sandbox to create your .env file, you should pass a high resolution .hdr file, at least 2K x 1K high dynamic range. The reason for this is that we pre-process this file and output an .env cube at a size of 256 x 256 per side.

What I am seeing in your scene is that the .env files you generated are all 512 x 512 pixels per side, but since you passed a smaller .hdr file, the image is pixelated, but each pixel is subdivided to match the higher resolution of the .env. You can see in the image below that this is your “lower resolution” file that is actually still 512 x 512.

Your “higher resolution” image shows better fidelity, but as you can see the size is still the same size 512 x 512.

Here is a side by side comparison of a 256 x 256 pixel .env on the left and a 512 x 512 pixel .env on the right. There is slightly more pixel artifacts in the 256 x 256 pixel version, but you would need to get really close to the material to discern it.

Our export to .env should default to 256 pixels, which should give you a good balance to strike between quality and size. Below are the sizes of the two files you shared but since they are the same physical size, the difference in the file sizes is due to the quantization of the values in the version that was created from the lower resolution .hdr. You should see a big savings going to 256 pixels per side.

image

In essence, to create the file, I have found that using a 2k x 1k .hdr is a decent source file to sample from. You can obviously go larger, but I have not seen much in the way of increased quality from larger files. And since I typically save the source file if I need to go back to it, I don’t see the need to waste storage space on a larger file.

Hope this helps, but let me know if you have more questions.

2 Likes

@PatrickRyan

Thank so much for the detailed explanation.
i was using this tool to convert .env file from a .hdr file:

https://www.babylonjs.com/tools/ibl/

And i got 512 .env out of it. So how can I generate a 256 .env? from sandbox instead of the link above? i remember i read the doc regarding using sandbox to convert .env files but looks i can only get .dds file via sandbox?

Please advise,
Tawibox

1 Like

@tawibox, here are the steps for exporting from the sandbox:

  1. Open the sandbox and then load any glTF file into it by dragging and dropping the file on the window. You can also open through the button bar at the bottom if you wish. You need to have a mesh loaded in the scene for the next step to work.
  2. Take an .hdr file that is 2k x 1k in resolution and drag/drop it on the same sandbox window. This will pre-process the .hdr and generate an environment out of the file. I tend to like to load in either a chrome ball mesh or a grid of metallic and dieletric spheres gridded by roughness level. Something like these.
  3. Click on the button in the bottom bar to open the inspector.
    image
  4. Click on the tools tab
    image
  5. Under scene export is Generate .env texture which will give you the option to download the file. This will be a 256 x 256 .env file.
    image

The reason I prefer this route is because I can see the environment on the sample meshes first and decide if this is the environment I want to use before generating the .env file. I do like the sand box for quickly testing out assets and lighting. It’s easy to bring in one of your project meshes and try several lighting environments quickly just by dragging and dropping the files.

3 Likes

@PatrickRyan
Thank you so much for the instruction.

I dragged and dropped a glb file and 2k x 1k hdr texture in the sandbox. And I do see everything is loaded in correctly. However, just cannt find that Generate .env texture button in my sandbox…

Please let me know if I missed any steps.
Many thanks,
Tawibox

1 Like

@tawibox, I think what you hit is a bug and I have been trying to track down a repro on it. If you drop the .hdr a second time in the sandbox, the button will likely show up. There is a flag that is set when an .hdr is dropped on the scene and for some reason it’s not always being set correctly.

@PatrickRyan
Gotca! Actually I think I have found some other explanations. Looks there are some issues with assets. When I load some assets, Generate .env texture button doesn’t show up while with other assets I can see the button now…Don’t know the reason why but now I am able to export a 256 .env successfully.

Also the reflection quality with a 256 .env looks really good! And the .env file size is impressively small. This should meet all my needs.

Thank you so much for the helps everyone.

@Evgeni_Popov
One more thing: is it possible to add more conversion options in this tool?
https://www.babylonjs.com/tools/ibl/

Such as providing options for users to export 256 .env? Or at least using some text description to inform users that the .env resolution from this tool is only 512. And to get 256 .env there are other options, etc? Or update related docs.

Just feel it could a confusion for users that there are 2 completely different places to generate .env files with different resolutions.

Many thanks again.
Tawibox

1 Like

@tawibox, would you be willing to share one of your assets where the button does not show up? It can be a DM if you can’t share publicly. I want to see if I can get a reliable repro so we can figure out what’s going on and how we can solve the issue. Thanks for your help!

@PatrickRyan
Hey so far all of the assets with issues are all created by my organization. Unfortunately these assets are confidential and I am not be able to share with any parties out side of my org. There is one thing I could mention is, we do embed some customized properties into the glb/gltf assets using KHR extensions. But not every assets cause that button missing issue so I’m not 100% sure.

Sorry I can’t help the community for this issue. But if I do find some other sharable assets cause the same issue I will definitely share with the community in a separate topic.

Many thanks,
Tawibox

1 Like