Float on Water Material

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

Somebody know a way to achieve this behavior?

1 Like

Hi @NRA Tough one, i believe the water material is a pure shader effect, the “waterMesh” isn’t actually updated, so neither is it’s vertex positions.
Aka. no matter the waves, vertex position Y values are always 0.

I made a quick PG update to check the theory above,
see: https://www.babylonjs-playground.com/#L76FB1#48 (uncomment line 7 and open console)

Perhaps someone with more knowledge on the area can offer a solution or better explaination.
Good day.

1 Like

@aWeirdo seems to be correct, but luckily it’s just one line of code to port! Here is a playground with the vertex position code from water.vertex.fx put into registerBeforeRender:



Really nice pg!! This could deserve being part of the examples in the doc:)

Fancy doing a PR here?

It is like magic!

I did the first post but had an unexpected event and just today I am returning to it! And guess what! It is brightly solved and recommended to listed in the Babylon site samples!
OMG, amazing news to start this week!

Great thanks to the great Jedi masters

PS: About the PR I think I can do it! Well I suppose!


Glad it works for you! :slightly_smiling_face:
As for the PR, here’s a nice playground, with a separate getWaterHeightAtCoordinates that’s easy to “play” with, the only problem is that waterMaterial._lastTime is actually a private variable in TypeScript, so I’m not sure if it’s a good example for the doc… @Deltakosh?

@Gijs Did you forget to attach the playground?

1 Like

@Gijs I did the PR asked by @Deltakosh but if you think this new one is better, please change it to us!

Thanks again!

1 Like

@Devin_Wright Yes I did…


1 Like

@Gijs That’s a solid playground.

Honestly, before this question was asked I didn’t even know that waveSpeed was an option, it wasn’t documented anywhere.

I was a little bored. nice PG :slight_smile:
added prototypes.

Is there an easy way to have a more realistic floating effect? Like rotating the ball to match the wave angle, sort of like it is riding a wave. Might be easier to see with a box, rather than a ball. Might have to try that later at some point.

Something like this? https://playground.babylonjs.com/#SBG0X8#2

I’m not sure on the math or if y or z should rotate, but i think it looks nice :slight_smile:

I think that is a good starting point. If you change out the sphere for a box it looks a bit odd though haha.

Depends how the mesh is made i suppose :smile:
here i added a “__rotationAxis” vector3, so for each axis: 0 = no rotation, 1 = full rotation, -1 reversed rotation, etc.


1 Like


here is a really dumbed down buoyancy model, its prolly pretty glitchy but would be fun to do a real one.


What’d you say about this one? https://www.babylonjs-playground.com/#L76FB1#146

Or version with lower jumping here: https://www.babylonjs-playground.com/#L76FB1#147

Or a bit smoother here: https://www.babylonjs-playground.com/#L76FB1#148

Hi everyone,

I am new to Babylon.js and I wanted to replicate the floating sphere on water material (https://www.babylonjs-playground.com/#L76FB1#49) example but using a boat model mesh instead of the sphere. The math that creates the floating seems to be working fine, but I can’t figure out how to prevent the water from getting inside the boat. Is there anybody who might have a clue on how to solve this?

My Playground showing the boat inside the water issue: https://playground.babylonjs.com/#MJSK67#1