# Update mesh vertices from Water Material

**URL:** <https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167>\
**Category:** Questions\
**Tags:** material, shader\
**Created:** [April 20, 2020, 1:11pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167 "2020-04-20T13:11:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![davivid](https://avatars.discourse-cdn.com/v4/letter/d/ed655f/32.png) [@davivid](https://forum.babylonjs.com/u/davivid)\
**Post date:** [April 20, 2020, 1:11pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/1 "2020-04-20T13:11:04Z")

</div>

Hello,

Does anyone have any pointers as to how I could update mesh vertices from the water material?

I need to be able to find the water height at any given position.

There is a thread from a year ago - but the solution suggested there only seems to work at 0,0 position?

> [@Float on Water Material](https://forum.babylonjs.com/t/float-on-water-material/1800):
>
> Hi all! I try to mix the “Water” and “Raycast on Height Map” samples to let the Sphere float on water surface but seem that this surface do not change its vertices positions like in height map! Look at the PG [https://www.babylonjs-playground.com/#L76FB1#47](https://www.babylonjs-playground.com/#L76FB1#47) Somebody know a way to achieve this behavior?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 20, 2020, 1:48pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/2 "2020-04-20T13:48:04Z")

</div>

The water material is not changing the vertex data, it is a customized shader.

I guess you could see the calculation the water shader does and implement it in JS? I have no better suggestion, but maybe the wonderful souls in this forum have a smarter suggestion

---

<div class="post-metadata">

**Author:** ![davivid](https://avatars.discourse-cdn.com/v4/letter/d/ed655f/32.png) [@davivid](https://forum.babylonjs.com/u/davivid)\
**Post date:** [April 20, 2020, 3:01pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/3 "2020-04-20T15:01:46Z")

</div>

That appears to be the way it has been solved before using the equation from the shader in JS - which works when looking at the water height at position 0,0 but seems to break elsewhere…

[https://playground.babylonjs.com/#SBG0X8](https://playground.babylonjs.com/#SBG0X8)  
In this example, if you move the sphere position, it will not be at the correct height of the water

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 20, 2020, 3:56pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/4 "2020-04-20T15:56:18Z")

</div>

The formula is correct if the sphere is located at one of the vertex of the water mesh.

As the water mesh is 512x512 and the subdivision is 32, then the formula is correct when `x % 16 = 0` and `z % 16 = 0` (`%` = modulus - `16x32=512`).

For other positions, you will have to interpolate between the vertices surroundings your (x,z) location to get the right coordinates.

---

<div class="post-metadata">

**Author:** ![ycw](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ycw/32/4315_2.png) [@ycw](https://forum.babylonjs.com/u/ycw)\
**Post date:** [April 20, 2020, 5:04pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/5 "2020-04-20T17:04:51Z")

</div>

```auto
object y = 
  map object x z to watermesh space .. P
  then find nearest 4 vertices (in watermesh space) of P
  then bilinear interp that 4 vertices

```

[https://www.babylonjs-playground.com/#L76FB1#120](https://www.babylonjs-playground.com/#L76FB1#120)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 20, 2020, 5:10pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/6 "2020-04-20T17:10:46Z")

</div>

Very nice!

---

<div class="post-metadata">

**Author:** ![davivid](https://avatars.discourse-cdn.com/v4/letter/d/ed655f/32.png) [@davivid](https://forum.babylonjs.com/u/davivid)\
**Post date:** [April 20, 2020, 7:04pm UTC](https://forum.babylonjs.com/t/update-mesh-vertices-from-water-material/10167/7 "2020-04-20T19:04:51Z")

</div>

Amazing! Thank you all
