Accelerate Fluid Simulator

1. Abstract
   This paper presents Accelerate, a high-performance fluid dynamics simulator developed using vanilla JavaScript and WebGL. Unlike traditional CPU-bound simulations which often suffer from performance bottlenecks, Accelerate utilizes a hybrid FLIP (Fluid Implicit Particle) solver to simulate up to 150,000 particles at 60 FPS directly in a web browser. The system demonstrates complex physical phenomena including multi-species viscosity (water, oil, honey), two-way rigid body coupling, and variable gravity environments. This project bridges the gap between offline CGI physics and real-time interactive web applications.

2. Introduction
   Fluid simulation is a staple of computer graphics, used extensively in film and engineering. However, bringing these simulations to the web has historically been difficult due to the computational limits of JavaScript.

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).

1. Methodology & Implementation 3.1 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). This ensures the fluid maintains volume and doesn't compress like a gas.

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.

3.2 High-Performance Rendering (WebGL)
Rendering 150,000 individual DOM elements would crash a browser. Instead, Accelerate utilizes the GPU via WebGL 1.0.

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)), rather than loading textures. This minimizes memory bandwidth.

Buffer Management: Particle positions and colors are streamed from the CPU solver to GPU VRAM buffers (gl.ARRAY_BUFFER) every frame.

3.3 Multi-Material & Rigid Body Physics
The engine supports distinct material properties:

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).

1. 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 0g 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.

1. 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 the robust incompressibility iterations.

1. Conclusion
   Accelerate successfully demonstrates that high-fidelity physics simulations are possible in the browser. By optimizing the FLIP algorithm and leveraging low-level WebGL rendering, we created a tool that is both educational and visually compelling. Future work could include adding Surface Tension (Metaballs) for liquid skin rendering and moving the physics calculations to Compute Shaders (WebGPU) for even higher particle counts.

2. References
   Bridson, R. Fluid Simulation for Computer Graphics. A.K. Peters, 2008.

Müller, M. Ten Minute Physics - FLIP Fluids. YouTube Series, 2022.

Zhu, Y. & Bridson, R. Animating Sand as a Fluid. SIGGRAPH 2005.