# Why does such a problem occur when using WaterMaterial?

**URL:** <https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717>\
**Category:** Questions\
**Tags:** material\
**Created:** [December 8, 2025, 10:02am UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717 "2025-12-08T10:02:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![late-autumn-give-ear](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/late-autumn-give-ear/32/36485_2.png) [@late-autumn-give-ear](https://forum.babylonjs.com/u/late-autumn-give-ear)\
**Post date:** [December 8, 2025, 10:02am UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/1 "2025-12-08T10:02:59Z")

</div>

When I rotate the “ground” and “waterMesh”, it will become like this.When I moved the camera, I could clearly sense two different refracted colors.Is it a problem with my code?Thanks for informing me.

expect:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/b/eb899630790a73f6a7464ca629e3655d07f470a9.jpeg)

but:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/3/b3acf24e3238d648cdf4e22e81cfaae900e70392.jpeg)

> **[Babylon.js Playground](https://playground.babylonjs.com/#1SLLOJ%234326)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<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:** [December 8, 2025, 3:36pm UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/2 "2025-12-08T15:36:51Z")

</div>

Maybe @julien-moreau would know as IIRC he was the daddy of it ?

---

<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:** [December 8, 2025, 5:44pm UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/3 "2025-12-08T17:44:51Z")

</div>

Hey @late-autumn-give-ear !

You can use `water.disableClipPlane = true;`  
Updated playground: [https://playground.babylonjs.com/?inspectorv2=true#1SLLOJ#4327](https://playground.babylonjs.com/?inspectorv2=true#1SLLOJ#4327)

But according to the current angle it may cause “invisible reflections”, you’ll see what I mean when testing the updated playground. The water material was initially designed for surfaces that are parellel to the ground, the way reflections are computed may need an update. In that case @sebavan is there someone to focus on it in order to help me? I have already so much to do.

---

<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:** [December 8, 2025, 5:57pm UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/4 "2025-12-08T17:57:12Z")

</div>

That would be a nice update indeed i guess we should open a feature request on the forum for it to see how/when this can be addressed

---

<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:** [December 8, 2025, 6:12pm UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/5 "2025-12-08T18:12:07Z")

</div>

@late-autumn-give-ear It’s time to make your Christmas list 😃

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [December 8, 2025, 7:17pm UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/6 "2025-12-08T19:17:21Z")

</div>

ChatGPT:

When you rotate a mesh that uses **Babylon.js WaterMaterial** , its internal **reflection and refraction buffers do _not_ rotate** with the mesh.  
This creates the visual artifact you’re seeing: two mismatched colors, “slices,” or sliding distortions when the camera moves.

### ✅ **Why it happens**

`WaterMaterial` renders the scene twice:

1. **Reflection pass** (as if the water is a flat mirror)
2. **Refraction pass** (objects seen through the water)

Both passes assume the water plane is axis-aligned:

```auto
water normal = (0, 1, 0) // must face UP

```

When you rotate the mesh:

```auto
waterMesh.rotation = new BABYLON.Vector3(Math.PI/4, 0, 0);

```

…you break the assumption.  
The material still thinks the water is horizontal, but the geometry is tilted, so reflection/refraction textures no longer map correctly → distorted colors and seams.

### ❌ **You cannot rotate WaterMaterial meshes directly**

In Babylon.js, the built-in WaterMaterial cannot lie on a slanted/rotated surface.  
It must always be absolutely horizontal.

FIX:  
[water which skybox reflection but with plain color background | Babylon.js Playground](https://playground.babylonjs.com/#1SLLOJ#4331)

---

<div class="post-metadata">

**Author:** ![late-autumn-give-ear](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/late-autumn-give-ear/32/36485_2.png) [@late-autumn-give-ear](https://forum.babylonjs.com/u/late-autumn-give-ear)\
**Post date:** [December 9, 2025, 1:21am UTC](https://forum.babylonjs.com/t/why-does-such-a-problem-occur-when-using-watermaterial/61717/7 "2025-12-09T01:21:49Z")

</div>

> [@julien-moreau](#):
>
> Christmas list

Thank you.I got it 😀