# How do you deal with unnatural environment map reflections?

**URL:** <https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112>\
**Category:** Questions\
**Tags:** material\
**Created:** [November 9, 2021, 2:43pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112 "2021-11-09T14:43:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 2:43pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/1 "2021-11-09T14:43:53Z")

</div>

Hi all,

I have a question regarding HDR map reflections. The problem is that all objects in a scene reflect HDR map regardless of their positions, shadows, other objects reflections etc. This leads to very unnatural effects like in the scene below:

[https://playground.babylonjs.com/#4F33I3#46](https://playground.babylonjs.com/#4F33I3#46)

Here is a screenshot with the explanation:

 ![Screenshot_110921_033153_PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/7/07d5a6eefa637ef96f330ee0d4edc4ab2bed14ab.jpeg)

Obviously the HDR reflection shouldn’t be there, as we should see cubes reflections on the ground plane and additionally there is a shadow cast from the directional light as well.

My question is what are the best techniques to eliminate this visual inconsistency? Adjusting objects materials roughness and metalicness is obviously not a valid solution because there are scenes which require the materials to be reflective.

I think there should be some kind of a solution from the engine side, like using baked reflections or at least taking shadows into consideration while calculating those reflections.

Anyway the way it works and looks at the moment is very unnatural and generally not very much usable. So will anyone please share any thoughts on how this can be solved?

Thank you

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [November 9, 2021, 2:50pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/2 "2021-11-09T14:50:28Z")

</div>

Check this doc’ page [Reflections and Refractions | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/reflectionTexture), especially the ReflectionProbe part.

[https://playground.babylonjs.com/#KA93U#243](https://playground.babylonjs.com/#KA93U#243)

Note that in big scenes, this can be hard for performances, so using baked cubemaps can be useful instead of refreshing each frame.

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 3:45pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/3 "2021-11-09T15:45:24Z")

</div>

Oh yes, I know this doc page very well, thank you. Unfortunately those realtime reflections are really resource consuming, so it’s not really usable for such purposes. And I’m not sure if these reflection probes work correctly with HDR maps. I’ve set a scene with such a reflection probe here:

[https://playground.babylonjs.com/#4F33I3#59](https://playground.babylonjs.com/#4F33I3#59)

But as you see the performance is not nearly as acceptable despite the scene is rather simple. I’ve just put all objects in the scene into that reflection probe in an attempt to achieve a realistic look, but it doesn’t give a usable result.

But I haven’t seen any info about baked cubemaps for this. Could you please tell more about that? Or maybe I’ve got something wrong?

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [November 9, 2021, 4:52pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/4 "2021-11-09T16:52:36Z")

</div>

My solution here would be to `BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONCE` 🙃

You can also set the refreshRate to a higher value, like each 60 frames, but generate on the fly a cubemap is expensive, especially in JavaScript where we can only use one thread (if I’m not wrong?), and it’s freezing the render during this time…

That’s said, I don’t understand why it is laggy in your tiny playground scene, and not in the playground scene from the doc’.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 9, 2021, 5:26pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/5 "2021-11-09T17:26:14Z")

</div>

It is laggy cause every is using realtime filtering even in the reflection themselves.

In GTA5 for instance, they only render one probe per frame with a reduced environment to give you an idea 🙂

Everything static should be rendered in only once and some probes could be shared without anybody noticing. Baking seems like the way to go as well for most of the objects

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [November 9, 2021, 5:41pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/6 "2021-11-09T17:41:12Z")

</div>

> [@sebavan](#):
>
> In GTA5 for instance, they only render one probe per frame with a reduced environment to give you an idea 🙂

Impressive and wonderful reading about that: [GTA V - Graphics Study - Adrian Courrèges](https://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study/)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 9, 2021, 5:49pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/7 "2021-11-09T17:49:49Z")

</div>

Yup totally my source @Vinc3r 😉

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 6:30pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/8 "2021-11-09T18:30:08Z")

</div>

I’ve tried to turn off realtime filtering, but the result is equally laggy.

> [@sebavan](#):
>
> Everything static should be rendered in only once

Yeah, this helped to achieve at least around 30 fps on a RX570 desktop, will try to test it on mobiles.

> [@sebavan](#):
>
> some probes could be shared without anybody noticing

Yeah, this is what we’ve been using in Unity and Unreal for ages, but in Babylon it works a bit different, from what I’ve learnt. It’s because when you attach a probe not to the center of object, the reflections will be shifted then. Correct me if I’m wrong.

> [@sebavan](#):
>
> Baking seems like the way to go as well for most of the objects

Could you please tell a bit more how to use it better? Maybe there is some kind of a documentation for that?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 9, 2021, 7:03pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/9 "2021-11-09T19:03:30Z")

</div>

> [@artteq](#):
>
> Yeah, this is what we’ve been using in Unity and Unreal for ages, but in Babylon it works a bit different, from what I’ve learnt. It’s because when you attach a probe not to the center of object, the reflections will be shifted then. Correct me if I’m wrong.

You can localize reflections with this : [Reflections and Refractions | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/reflectionTexture#local-cubemaps)

About baking it would either be an offline process where you dump the Render Target Results or through you favorite editing tools.

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 7:18pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/10 "2021-11-09T19:18:30Z")

</div>

Alright, thank you, I’ll have a look.

> [@sebavan](#):
>
> About baking it would either be an offline process where you dump the Render Target Results or through you favorite editing tools.

Yeah, but what methods do we use for those baked maps in Babylon then? Is there any documentation about that?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 9, 2021, 7:23pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/11 "2021-11-09T19:23:46Z")

</div>

Maybe @PatrickRyan could help ? I think he was basically placing 6 cameras in the 3d tools to create 6 faces rendered from it

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 7:25pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/12 "2021-11-09T19:25:01Z")

</div>

No-no)) I know how to create those maps, what I’m asking is how to use them in Babylon afterwards

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 9, 2021, 7:47pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/13 "2021-11-09T19:47:22Z")

</div>

ohhhh sorry you can use them as a cubeTexture in the reflectionTexture chanels of your materials instead of the probe

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 8:20pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/14 "2021-11-09T20:20:47Z")

</div>

Ah, alright, I’ll give it a try, thank you.

By the way there is another solution with Screen Space Reflections in Babylon. I’ve tried to use it, but I’ve found no detailed info about the reflectivity textures which should be used in this case. Could you please elaborate on this a little? Maybe there is some kind of a documentation or a tutorial about this?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 9, 2021, 9:13pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/15 "2021-11-09T21:13:25Z")

</div>

@julien-moreau the daddy of it will be able to help.

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [November 9, 2021, 10:17pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/16 "2021-11-09T22:17:24Z")

</div>

Hi @artteq !  
SSR uses reflectivity texture to determine the amount of reflection.  
In future it should compute real roughness/metallic workflows. In other words it uses reflectivity textures like it uses spéculer textures. You have some more documentation here: [Screen Space Reflections (SSR) Post Process | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/postProcesses/screenSpaceReflectionsPostProcess)

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 9, 2021, 10:34pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/17 "2021-11-09T22:34:40Z")

</div>

Hi Julien! Nice to meet you!

Yeah, thanks for this, I’ve tried to implement it alrleady, but I don’t really understand how exactly these reflectivity textures should be prepared. Is it the same as a specular texture? Do you have some kind of documentation or a tutorial about how to prepare them correctly?

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [November 10, 2021, 8:24am UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/18 "2021-11-10T08:24:52Z")

</div>

Reflectivity texture is the same as specular texture (I often use the [API to get quick info](https://doc.babylonjs.com/typedoc/classes/babylon.pbrmaterial#reflectivitytexture) about properties)

For those who wants to take a look, I’ve tweaked the SSR doc playground to get a PBR scene: [https://playground.babylonjs.com/#PIZ1GK#302](https://playground.babylonjs.com/#PIZ1GK#302)

---

<div class="post-metadata">

**Author:** ![artteq](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@artteq](https://forum.babylonjs.com/u/artteq)\
**Post date:** [November 10, 2021, 9:02am UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/19 "2021-11-10T09:02:29Z")

</div>

Okay, thank you @Vinc3r !

This is useful!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 10, 2021, 4:25pm UTC](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112/20 "2021-11-10T16:25:20Z")

</div>

@PirateJC this might be a good candidate for the doc

[Next page](https://forum.babylonjs.com/t/how-do-you-deal-with-unnatural-environment-map-reflections/25112.md?page=2)
