WebGPU Fluid Simulation

WebGPU fluid simulation using Smoothed Particle Hydrodynamics (SPH) and PIC/FLIP methods.

This project is ported from Sebastian Lague's Fluid-Sim Unity project and David Li's Fluid Particles WebGL project. It explores various rendering and simulation techniques for real-time fluids in the browser, leveraging the power of WebGPU for both compute-heavy physics and advanced visualization pipelines.

Key Features

• GPU-Accelerated Physics: SPH calculations (Density, Pressure, Viscosity) and the 3D PIC/FLIP grid-based solver run entirely in WebGPU compute shaders.
• Efficient Spatial Sorting: Uses a parallel Prefix-Sum and Linear Grid approach to handle tens of thousands of particles at 60 FPS.
• Diverse Renderers: From simple billboards to complex screen-space refraction and volumetric raymarching.
• Interactive Simulation: Real-time particle interaction (push/pull), dynamic obstacle manipulation, and smoothly interpolating bounding boxes.
• Cross-Platform UI: Responsive settings panel with Material Icons and performance statistics.

Project Structure

2D Simulations

fluid-2d.mp4

• Canvas 2D: A baseline implementation using the standard HTML5 Canvas API.
  • Live Demo
• WebGPU 2D: A 2D simulation utilizing WebGPU compute shaders for physics and a custom render pipeline.
  • Live Demo
• 2D PIC/FLIP: A particle-grid fluid solver with a tunable PIC/FLIP blend, pressure projection on a staggered MAC grid, and tilt-driven gravity controls.
  • Live Demo
• Hybrid FLIP: An advanced Bridson-style 2D solver consistent with GridFluidSim3D. It features RK2 (Midpoint) advection, iterative velocity extrapolation into air cells, and a triple-threat whitewater system (Spray, Foam, Bubble).
  • Live Demo

3D Simulations

fluid-3d.mp4

Live Demo

The project features several specialized 3D rendering techniques and simulation methods:

1. Billboard Particles (webgpu_particles)

Renders fluid particles as camera-facing quads.

• Techniques: Vertex pulling, indirect instanced rendering, and frustum culling.
• Shading: Features dynamic shadow mapping and velocity-based color gradients.

2. Marching Cubes (webgpu_marching_cubes)

Extracts a polygonal mesh from the fluid density field in real-time.

• Techniques: GPU-based Marching Cubes algorithm, density probing, and hardware-accelerated mesh rendering.
• Visuals: Classic "metaball" look with a solid, reflective surface.

3. Volumetric Raymarching (webgpu_raymarch)

Visualizes the fluid by marching rays through a density field.

• Techniques: Signed Distance Fields (SDF) approximation from particles, volumetric lighting, and refraction.
• Visuals: Provides a thick, jelly-like or deep-water aesthetic with realistic light extinction.

4. Screen-Space Fluid (webgpu_screen_space)

A high-end rendering pipeline that treats fluid as a continuous surface.

• Pipeline:
  1. Depth Pass: Renders particle depth to a texture.
  2. Smoothing Pass: Applies a bilateral blur to remove "bumpy" particle artifacts.
  3. Thickness Pass: Calculates fluid volume for light absorption.
  4. Normal Pass: Reconstructs surface normals from the depth buffer.
  5. Foam Simulation: Advects foam particles based on trapped air and kinetic energy.
  6. Composite: Final shading with refraction, Fresnel effects, and shadows.

5. FLIP Fluid (webgpu_flip)

A high-performance PIC/FLIP hybrid simulation with dynamic boundaries.

flip-fluid.mp4

Live Demo

• Techniques: Hybrid particle-grid solver using a staggered MAC grid for pressure projection.
• Red-Black Gauss-Seidel Solver: Optimized pressure solver that converges ~2x faster than standard Jacobi iteration by updating cells in alternating parity phases.
• Dynamic Boundaries: Features a smoothly interpolating bounding box that reacts to physics in real-time.
• Visual Decoupling: Particle rendering radius is independent of physical spacing, allowing for highly customizable visual densities.

6. Unified Dashboard (webgpu_fluid)

The main entry point that allows hot-swapping between all 3D renderers while preserving the simulation state (gravity, bounds, particle positions).

Getting Started

Prerequisites

• A browser with WebGPU support (Chrome 113+, Edge 113+, or Firefox Nightly with flags).
• Node.js (v20.19.0 or higher recommended).

Installation

# Clone the repository
git clone https://github.com/jeantimex/fluid.git

# Install dependencies
npm install

Development

# Start the Vite development server
npm run dev

Production

# Build the project
npm run build

Inspiration and Credits

• Inspired by Sebastian Lague's "Coding Adventure: Simulating Fluids" and "Rendering Fluids".
• Based on the Smoothed Particle Hydrodynamics (SPH) formulation for incompressible flow and the PIC/FLIP hybrid method.
• Heavily influenced by David Li's work on real-time WebGL fluid simulations.

License

This project is licensed under the MIT License - see the LICENSE file for details.