Accelerate Fluid Simulator

Source: Dev.to

Abstract

Introduction

The goal of this project was to implement a stable, interactive Navier‑Stokes solver that runs natively in modern browsers without plugins. We chose the FLIP method because it offers a balance between the visual detail of particle systems (Lagrangian) and the stability of grid‑based solvers (Eulerian).

Methodology & Implementation

The FLIP/PIC Hybrid Solver

The core physics engine is built on a custom implementation of the Fluid Implicit Particle (FLIP) method. The simulation step follows this pipeline:

• Transfer: Particle velocities are rasterized onto a background staggered grid.
• External Forces: Gravity and user interaction forces are applied to the grid.
• Pressure Solve: A Gauss‑Seidel iterative solver forces the velocity field to be divergence‑free (incompressible), ensuring the fluid maintains volume.
• Advection: New velocities are interpolated back to the particles. A mix of 90 % FLIP (preserves energy/splashiness) and 10 % PIC (Particle‑in‑Cell, which smooths noise) is used to maintain stability.

High‑Performance Rendering (WebGL)

• Vertex Shaders: Map simulation coordinates to clip space.
• Fragment Shaders: Render each particle as a mathematically perfect circle using distance fields (length(gl_PointCoord - 0.5)), avoiding texture loads and minimizing memory bandwidth.
• Buffer Management: Particle positions and colors are streamed from the CPU solver to GPU VRAM buffers (gl.ARRAY_BUFFER) every frame.

Multi‑Material & Rigid Body Physics

• Viscosity: Modeled by damping the velocity transfer based on particle type (e.g., honey has a high damping coefficient).
• Rigid Bodies: Dynamic obstacles (stones, logs) use a custom impulse‑based collision system. They interact with fluid particles via momentum transfer—particles push the object, and the object displaces particles (two‑way coupling).

Features & Interaction

The simulation environment provides a laboratory‑grade interface for experimentation:

• Interactive Injection: Users can “paint” fluid into the domain using a mouse‑driven raycaster that injects particles with initial velocity.
• Variable Gravity: A global scalar controls the gravity vector, allowing for 0 g environments, hyper‑gravity, or inverted gravity (fluid falls upward).
• Material Selector: Users can switch between fluids of varying densities and colors (water, oil, honey) in real‑time.
• Visual Aesthetics: The simulation runs inside a dark‑mode container with a clean, grid‑free canvas for maximum visual contrast.

Performance Results

Testing was conducted on standard consumer hardware (Chrome/Edge browsers):

• Particle Count: Stable at 150 000+ particles.
• Frame Rate: Consistent 60 FPS during standard interaction.
• Stability: The solver remains stable even under extreme conditions (e.g., 200 % gravity) due to robust incompressibility iterations.

Conclusion

References

• Müller, M. Ten Minute Physics – FLIP Fluids. YouTube Series, 2022.
• Zhu, Y. & Bridson, R. Animating Sand as a Fluid. SIGGRAPH 2005.