How do you deal with unnatural environment map reflections?

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

Here is a screenshot with the explanation:

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

Check this doc’ page Reflections and Refractions | Babylon.js Documentation, especially the ReflectionProbe part.

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.

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

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?

My solution here would be to BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONCE :upside_down_face:

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’.

1 Like

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 :slight_smile:

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

1 Like

Impressive and wonderful reading about that: GTA V - Graphics Study - Adrian Courrèges

1 Like

Yup totally my source @Vinc3r :wink:

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

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

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.

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

You can localize reflections with this : Reflections and Refractions | Babylon.js Documentation

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

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

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

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

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

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

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?

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

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

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?

Reflectivity texture is the same as specular texture (I often use the API to get quick info 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

2 Likes

Okay, thank you @Vinc3r !

This is useful!

@PirateJC this might be a good candidate for the doc