Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I recreate this "wavy" image effect?

Tags:

I'm searching for a way take a an image, or a portion of an image on a webpage and render this or a similar animation effect, where the image is "wavy". Examples:

the "spirit" area:

enter image description here

the robe area:

enter image description here

the robe area:

enter image description here

Preferably I'd like to control the speed and modulation of the waves parametrically.

To me it looks like some sort of displacement map. I thought about either using a fragment shader threejs \ seriously.js or using a canvas element to achieve the same image manipulation, but I'm unsure of the algorithm to use.

What would be a way to achieve this?