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
- Liquid distortion by Yannis
- Water-like Distortion Effect
- An introduction to Vector fields with fluid flow
- How to make Humunculus' Effect by Akella
- Waves with sin waves
Sprite based waves
Entry-level
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.
Water-like distortion
Intermediate-Level
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 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.
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
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.
