Mirror as Environment Texture

Thanks for your explanations! :wink:

Hello, I reopen this topic to fix an issue I have with waterMaterial.
I you can see in this playground: https://playground.babylonjs.com/#1SLLOJ#2076,
we can see artifacts on the edge of the plane depending on camera position:
Screenshot 2022-03-27 at 13.49.47

Do you know how can I remove those? Thanks

It seems to come from the fact that I use a shaderMaterial because we don’t have the issue with a PBRMaterial: https://playground.babylonjs.com/#1SLLOJ#2118

I tried several shaderMaterial properties to see if it fixes the problem but nothing worked.
Or maybe there is something to add in the shader code?

If you use Spector you can notice the difference is about clip planes being used by the water material when rendering into its RTTs.

So you need your material to support clip planes which can be done thanks to @Evgeni_Popov :

And the result is https://playground.babylonjs.com/#1SLLOJ#2121



I added the specific includes in my custom shader code, plus you have to make sure you have the vec4 worldPos defined also in the vertex shader. And it worked!

Thanks you so much @sebavan !

1 Like

I am getting some artifacts on iphone. Not limited to this demo, but this demo reproduces it. Same effect @jelster mentioned , but also noteworthy that the sponza scene’s shadows produce the effect even without moving the camera, same for the chibirex, just the animations cause it

My phone model is 13 pro max, ios 15.4

If it can help trigger the issue, I don’t see these artifacts on the last playground sent by @sebavan with my iPhone 12, ios 15.3

I wonder if you are experiencing this issue: Possible upcoming iOS 15.4 bug

@Charge @jeremy-coleman yup it is most likely this one :slight_smile:

Hi everyone,

I have a new question regarding the waterMaterial. I want to use grey noise textures as the bump texture of my material but the reflection is not correct anymore with a weird offset: https://playground.babylonjs.com/#1SLLOJ#2166

Do you know how to avoid that using a grey texture?
I made some research saying that the bump texture needs to be 50% grey for instance.
Can we do that with the Texture class of BabylonJS?

Thanks for your help, Pichou

You need to convert you heightmap in a normal map like we have for diffuse and pbr materials. The texture will not be gray scaled but mostly purple-ish.

Is there a way to do that on the fly using BabylonJS or somethinig else?

You can try this NormalMap-Online

1 Like