# Reflection quality with low res environment HDR **URL:** \ **Category:** Questions\ **Tags:** lighting, image-based-lighting, reflections\ **Created:** [September 23, 2024, 11:45pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670 "2024-09-23T23:45:10Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 23, 2024, 11:45pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/1 "2024-09-23T23:45:10Z")
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: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#WGZLGJ%2310583)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes Many thanks, Tawibox ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [September 24, 2024, 9:35am UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/2 "2024-09-24T09:35:53Z")
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).?! ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 25, 2024, 12:45am UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/3 "2024-09-25T00:45:21Z")
@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. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [September 25, 2024, 8:40am UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/4 "2024-09-25T08:40:09Z")
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 ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 25, 2024, 6:43pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/5 "2024-09-25T18:43:39Z")
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. ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 25, 2024, 9:03pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/6 "2024-09-25T21:03:24Z")
Oh! Can I use a regular tone mapped jpg as hdrTexruteHigh and link it to reflectionTexture? @Evgeni_Popov ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 25, 2024, 9:08pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/7 "2024-09-25T21:08:01Z")
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](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/HDREnvironment) ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 25, 2024, 11:16pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/8 "2024-09-25T23:16:14Z")
@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. ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [September 25, 2024, 11:30pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/9 "2024-09-25T23:30:51Z")
The Sandbox uses 256\*256 environment texture, I wouldn’t say that reflections are pixelated. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 26, 2024, 8:05am UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/10 "2024-09-26T08:05:23Z")
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. ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 26, 2024, 12:21pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/11 "2024-09-26T12:21:35Z")
@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. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [September 26, 2024, 1:53pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/12 "2024-09-26T13:53:55Z")
Let me cc @PatrickRyan to this thread. ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [September 26, 2024, 6:12pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/13 "2024-09-26T18:12:36Z")
@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. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/e/8eb5c393f304f99fa798b60d30dfdadb2a421f2b.png) Your “higher resolution” image shows better fidelity, but as you can see the size is still the same size 512 x 512. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/9/e9f33b1575eb4bb3ae8cf19dfa3dee50bae20265.png) 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. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/8/981efb65db5570bdc4ef298e33cf81df9e5308dc.jpeg) 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/6/e6ba8ef26791c9337daa751e6d81f813f3f542b6.png) 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. ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 26, 2024, 7:55pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/14 "2024-09-26T19:55:45Z")
@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/](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 ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [September 26, 2024, 8:54pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/15 "2024-09-26T20:54:23Z")
@tawibox, here are the steps for exporting from the sandbox: 1. Open the [sandbox](https://sandbox.babylonjs.com/) 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](https://github.com/PatrickRyanMS/BabylonJStextures/tree/master/gltf/environmentSpheres). 3. Click on the button in the bottom bar to open the inspector. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/9/2974cfb57992ee825f801cd6ff508ebb6307f208.png) 4. Click on the tools tab ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/3/d30d81581c528d005a60c43e1b7c46f4510b4d9a.png) 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/4/d4515258f521671cfe61747892fd665476cfc7df.png) 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. ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 27, 2024, 5:11pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/16 "2024-09-27T17:11:34Z")
@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… ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/6/d6bd13f1fdc83651a948c951ebda72b19b3a1de3.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/b/7b9fe1791be6724cbd289e5fbdf22bf8eb402a9c.png) Please let me know if I missed any steps. Many thanks, Tawibox ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [September 27, 2024, 5:38pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/17 "2024-09-27T17:38:58Z")
@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. ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 27, 2024, 5:42pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/18 "2024-09-27T17:42:21Z")
@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/](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 ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [September 27, 2024, 5:51pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/19 "2024-09-27T17:51:22Z")
@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! ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [September 27, 2024, 6:29pm UTC](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670/20 "2024-09-27T18:29:39Z")
@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 [Next page](https://forum.babylonjs.com/t/reflection-quality-with-low-res-environment-hdr/53670.md?page=2)