Spreading Liquid with Three.js

A Three.js technique for simulating liquid foundation turns finger or mouse movement into spreading, raised liquid without deforming mesh geometry. The approach builds on a fluid simulation’s velocity map: a separate height map stores liquid thickness, initialized as a rounded central blob. Each frame, a shader uses velocity to remove some thickness from a pixel and add thickness sampled from the position reached by tracing the flow backward. A threshold suppresses movement in nearly still areas, keeping the effect focused around dragged strokes.

Thickness alone cannot preserve the thin colored traces left behind as liquid spreads, so a second, alpha map records both current thickness and the highest value previously seen at each location. This history keeps the surface visibly marked after the liquid thins. For lighting, neighboring height samples provide a surface normal, which is combined with a Matcap texture to suggest highlights and raised contours. The method is deliberately tuned for appearance rather than physical accuracy: parallel pixel processing makes thickness transfer imperfect, so volume is not conserved and circular strokes can accumulate liquid. The demonstration also shows that 32-bit floating-point textures produce smoother shading than 8-bit textures, whose limited height precision creates visible steps.