Float on Water Material

NRA · March 9, 2019, 6:17pm

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?

aWeirdo · March 9, 2019, 8:06pm

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.

Gijs · March 9, 2019, 10:56pm

@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:

https://www.babylonjs-playground.com/#L76FB1#49

Deltakosh · March 10, 2019, 2:32am

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

Fancy doing a PR here?

github.com

BabylonJS/Documentation/blob/master/examples/list.json

{
    "examples": [
        {
            "title": " Basic Scene Typescript",
            "ignoreInDoc": true,
            "samples": [
                {
                    "title": "Link to Typescript Playground",
                    "doc": "https://doc.babylonjs.com/features/playground",
                    "icon": "icons/basic_scene.png",
                    "description": "Ball and plane",
                    "PGID": "/ts.html#"
                }
            ]
        },
        {
            "title": "Animations",
            "samples": [
                {
                    "title": "Bones 101",

This file has been truncated. show original

NRA · March 11, 2019, 11:47am

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
@aWeirdo
@Gijs
@Deltakosh

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

Gijs · March 11, 2019, 5:40pm

Glad it works for you!
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?

Devin_Wright · March 11, 2019, 5:47pm

@Gijs Did you forget to attach the playground?

NRA · March 11, 2019, 5:51pm

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

Thanks again!

Gijs · March 11, 2019, 6:13pm

@Devin_Wright Yes I did…

https://playground.babylonjs.com/#SBG0X8

Devin_Wright · March 11, 2019, 6:27pm

@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.

aWeirdo · March 11, 2019, 6:36pm

I was a little bored. nice PG
added prototypes.
https://playground.babylonjs.com/#SBG0X8#1

Devin_Wright · March 11, 2019, 7:04pm

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.

aWeirdo · March 11, 2019, 7:52pm

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

Devin_Wright · March 11, 2019, 8:07pm

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

aWeirdo · March 11, 2019, 8:25pm

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

https://playground.babylonjs.com/#SBG0X8#5

Pryme8 · March 11, 2019, 8:55pm

https://playground.babylonjs.com/#SBG0X8#8

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

Michal_Mihalik · July 21, 2020, 10:17pm

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

Michal_Mihalik · July 21, 2020, 10:29pm

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

Michal_Mihalik · July 21, 2020, 10:33pm

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

Junior_Garcia · July 30, 2020, 1:35pm

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

Topic		Replies	Views
Update mesh vertices from Water Material Questions material , shader	6	866	April 20, 2020
Weird behavior when using WaterMaterial Questions material	10	350	July 26, 2022
Vertices Displacement DepthMap not updated Questions	7	504	July 30, 2020
Is there a formula for calculating the wave height at a certain position? Questions	2	358	July 6, 2022
How to use Watermaterial in the typescript Questions	20	976	August 30, 2022

Float on Water Material

Related Topics