Interactive water texture

Questions
1

Hi there,

I am looking to create an interaction similar to the splash page of this website: https://eatnonfood.com/

(Moving the cursor/clicking on the landing page causes ripples and distortion on an image).

What methods in Babylon.JS might work for this? Maybe something to do with procedural texture and mouse movement ? Or something else yet unknown to me?

Thanks in advance for any tips!

2

i don’t known, but I think it might help you . Ripple effect when meshes collide - #2 by Deltakosh

1 Like
3

Here is a shadertoy example : Shader - Shadertoy BETA
You will need 2 render target textures. 1 used as the target, the other as the source. Then, for next frame, you swap betwen them.
Check the code for ‘Buffer A’, it’s basically damper velocity and pressure. Pressure is added at cursor location.

2 Likes