Ripples, waves and fakes

Finding simple ways to to fake ripple and water effects.

Water is complicated. The Navier stroke equations, Fast Fourier transforms (FFT), PIC, FLIP, Eulerian, Lagrangian, and a bunch of other abbreviations no one understands. I've been studying these techniques and failing to learn for a couple of weeks.

To deal with this kind of complexity WebGL experienced developers have developed 3 important skills: Lying, cheating, and deceiving.

Most of the time we don't need all these realistic techniques. Nor we can always afford them on the web. Faking it is often enough.

In future issues, we'll explore those complicated Fluid techniques. For now, let's embrace our inner "impostor syndrome" and make some cool effects.

Getting started

Sprite based waves


On Homunculus' website, they created a white circular shape in photoshop. When you move the mouse, they create more planes that grow over time with the pre-generated image on top.

These planes are rendered in a hidden canvas, a render target. Then, we use that hidden canvas to displace the image in our visible render.

Homunculus by Homunculus

Water-like distortion


Instead of creating 2D meshes, Martin uses a 2D canvas to draw circle gradients on the mouse position. Then on WebGL, he uses the canvas to distort and grayscale the image.

With this method, we don't need to pre-generate anything.

My approach in Water Like distortion effect is similar. However, my generated gradients also store the mouse velocity on the gradient RG components. Similar to the technique next up, but using 2D canvas instead of WebGL.

Mouse Grayscale displacement by Martin

Mouse Flowmap deformation

Intermediate Level

Flow maps are images that describe the flow of a liquid. In this case, Nathan is using the mouse velocity and writing it into an image using an FBOs/GPGPU:

vec4 pixelColor = vec4(mouseVelocity.x, mouseVelocity.y, 0.,0.);

After rendering the image, he reads it on the primary render to get the velocity and calculate the direction and scale of distortion.

Saving the mouse velocity into the pixel colors retains the flow direction at the time of movement.

How to use OGL mouse flow by Robin Delaporte

Ping pong expanding wave.

Advanced Level

On Ultranoir's home page there is a liquid mesh-looking effect. This works made with a single ping-pong shader with two steps:

  • length(mousePos.xy) — Draw a white circle (initial wave) on top of the mouse.
  • Check all the pixels around to see if there is an incoming wave. Add it if you find one.
  • pixel = 0.99 — Make all pixel slightly darker over time

This creates a black and white image with circles moving outwards. This image is used as a height map to create the shiny bump look.

Height maps are images we use to determine the height of something. Imagine a mountain, its highest peak would be white, and the bottom of the mountain would be black.

Ultranoir by Ultranoir

Ultranoir by Ultranoir

Vector fields

Intermediate Level

This week's demo is a first step to the Navier-stroke equations. A vector field that pulls color around.

In this demo, the liquid sometimes might disappear into nothing. This means our vector field has high Divergence. In real life, fluid doesn't cease to exist randomly. When we check out the Navier stroke equations, you'll notice we'll take a step to account for this.

Offscreen Demo by me :)

Extra resources