Mirror as Environment Texture

Hello EveryBody !!

Is it possible to have a correct PBRMaterial using a MirrorTexture as an EnvironmentTexture?
Here is a basic exemple of PBR + HDR: https://playground.babylonjs.com/#2FDQT5#1367
But with a MirrorTexture, the result is not there: https://playground.babylonjs.com/#2FDQT5#1369

I guess we miss the light data in the texture in order to render the PBR correctly.
How could I do that?

Thanks a lot for your help, Pichou

I’m not entirely which difference in the PG’s I should focus on, so I looked at the MirrorTexture PG and came up with this modified version.

I think probably the biggest thing that I could think of preventing you from getting the desired effect is that the spheres were using StandardMaterial instead of PBRMaterial. As well, there wasn’t any environment texture set at the scene level, so perhaps that also contributed to the difference.


Hello @jelster, thanks a lot for your answer!

The problem is not with the spheres but with the plane material. As you can see between the 2 playgrounds shared above, the PBR material is not rendered correctly using a mirror texture.
I am looking for a way to improve that!

Pichou :wink:

1 Like

The bluriness effect will not work well in this case due to the lack of preprocessing and such could you not use a reflection probe instead ?

1 Like

Hi @sebavan,

I also tried with the Probe: https://playground.babylonjs.com/#2FDQT5#1371
But I didn’t manage to have the correct result. I still do not have a beautiful PBR Material and the sphere in the reflection are huge I don’t know why.

you need to enable real time filtering on the material and float support with mipmaps for the probe:

Also you should use a local cubemap : Reflections and Refractions | Babylon.js Documentation

1 Like

Hi @sebavan, thanks for your advice.

I tried to apply what you said in this playground: https://playground.babylonjs.com/#2FDQT5#1373
But I don’t know how to set the boundingBoxSize in order to have a correct reflection and we do not have a nice PBR rendering with the parameters added.
Can you help me find what am I doing wrong?

Thanks :wink:

Ohhhh yes my bad, the reflection won t work outside the bounding box…

In your case you could only try @julien-moreau great full screen reflection I guess.

I know it probably isn’t exactly what you’re looking for, but have you tried seeing if a Screen Space Reflection post-process does the trick?


1 Like

thanks for the link @jelster exactly the one @julien-moreau built :slight_smile:


Hi guys, thanks again for your contribution to this topic.

I realized I had already opened a previous topic with the same purpose: Ground reflection like puddle of water

As you can see at the end of this topic I show that SSR won’t work in this use case.
So I continue digging with WaterMaterial and MirrorTexture to get close to what we see in this experience.
With MirrorTexture it is still not very close: https://www.babylonjs-playground.com/#KA93U#699
But with WaterMaterial we start to have something really nice: https://playground.babylonjs.com/#1SLLOJ#2063

Any idea on how to improve again the result?

Bye :wink:

it does look pretty cool! It appears that you might have some stencil/clearing issues at certain camera angles though

Create a sky box will eliminate the smearing of the background when using water material.

Hi @musk,

I added a Skybox but we still have the clearing issue. Also tried to set autoClear to true without any change: https://playground.babylonjs.com/#1SLLOJ#2064

Plus I would need to use an emissiveTexture but then it gets worst: https://playground.babylonjs.com/#1SLLOJ#2065

Any clue on how to prevent that? Pichou

And you can add a ground mesh under the water . Also need add it in render list.

1 Like

Thanks @musk,

In my case I don’t want a skyBox or a Ground, I just need that reflection of the plane. :wink:
But having a skybox without the texture is working so thanks a lot for the fix:

Any idea on why using an emissiveTexture on the plane doesn’t work with WaterMaterial though?

1 Like

I manage to get the result I wanted using a shader thanks to your help in this thread!!

I am just wondering why the WaterMaterial stops working correctly if we don’t have a light?
See the result here: https://playground.babylonjs.com/#1SLLOJ#2077

Cheers, Pichou

Adding @julien-moreau who built the water material

1 Like

To hazard a guess, it might be because emissive lighting doesn’t get reflected (a) and or (b) that environment lighting doesn’t have enough info to work right (e.g., a single position for light source)

1 Like

Hi @PichouPichou !
@jelster is right, we need at least a light to compute bump mapping (the waves). So we are missing information if the material doesn’t detect any light in the scene :frowning:

1 Like