Water ripple effect

Hello everyone,
We’re building a boat configurator that will allow the user to turn on/off a water environment where the boat floats under a blue sky (sort of a heavenly scene). Anyways, I’ve created a simple node material for the water, nothing fancy because performance is important for us. So, what would be the most efficient way of adding ripple effect with a custom shape (eg. boat hull shape) either in the node material itself or as a separate particle effect or something?

Playground link: https://playground.babylonjs.com/#5R2WR3#6

Node material link: Babylon.js Node Material Editor

Failed attempt (node material) : Babylon.js Node Material Editor

I’m also sharing a first failed attempt at water ripples that I’ve implemented following a tutorial for unreal engine, so the “translation” to the node material editor wasn’t that smooth and the result kinda works but not quite.

Thanks in advance for your help

I would try with a signe distance field:
Get the 2d shape of the boat and compute an SDF from that. There are (online) tools to compute SDF from a bitmap.
Then, for each vertex, sample the SDF 2d texture and you’ll get distance from boat.

1 Like

Thanks for the response. I’ll look into it, though it sounds like something out of my reach in terms of programming knowledge. And even if I manage to do it, could you please elaborate how to get water ripples from there. Sorry, I’m just an artist with limited coding skills.

one you have distance field texture, you can modulate the wave height based of time and distance to the boat.
the sdf is basically the distance to the boat at each pixel.
With that, you can also add foam around the boat. If the pixel is close enough in the distance field (close to 0), then you are close to the boat.

The key thing is is transforming the 2d coordinate in the world to the 2D UV to sample the SDF texture.