WebGL Liquid Simulator

  1. Do a physics simulation of balls in a container (box2d.js)
  2. Render the simulation onto a raster
  3. Blur the image ()
  4. Apply a threshold ()

The physics simulation is computed on the CPU (Box2D) and the blurring and thresholding is handled by the GPU using WebGL.

See the Git repository for full source code listing. The original idea came from here: How to simulate liquid .