Particle-Based Fire Simulation

A WebGL-based fire simulation project implementing realistic fire effects through GPU-accelerated fluid dynamics. This project uses a combination of particle systems and fluid simulation based on the Navier-Stokes equations to create physically accurate fire behavior, including combustion, buoyancy, and thermal dynamics.

Features

• ✅ GPU-Accelerated Fluid Simulation - Real-time Navier-Stokes equation solver
• ✅ Particle System - Fire particles with lifecycle and physics simulation
• ✅ Physical Fields - Velocity, temperature, fuel, density, and pressure fields
• ✅ Combustion Model - Realistic fuel-to-heat conversion with cooling
• ✅ Buoyancy Effects - Thermal buoyancy driving fire upward
• ✅ Pressure Projection - Incompressible fluid simulation
• ✅ Blackbody Radiation - Temperature-based color mapping
• ✅ Interactive Controls - Real-time parameter adjustment
• ✅ Debug Modes - Visualize individual physical fields

Tech Stack

• WebGL 2.0 / WebGL 1.0 (with fallback)
• GLSL for shader programming
• Vite for development and build tooling
• JavaScript ES6+ with modules

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd csci580-final-project

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173/

Build for Production

npm run build

The built files will be in the dist/ directory.

Project Structure

csci580-final-project/
├── src/
│   ├── main.js                    # Main application entry point
│   ├── utility.js                 # WebGL utility functions
│   └── shaders/
│       ├── baseVertexShader.glsl  # Base vertex shader (full-screen quad)
│       ├── advectionShader.glsl   # Advection shader (Semi-Lagrangian method)
│       ├── combustionShader.glsl  # Combustion shader (fuel → temperature)
│       ├── buoyancyShader.glsl    # Buoyancy shader (temperature → velocity)
│       ├── divergenceShader.glsl  # Divergence calculation
│       ├── pressureIterationShader.glsl  # Pressure solver (Jacobi iteration)
│       ├── projectionShader.glsl  # Pressure projection
│       ├── vorticityConfinementShader.glsl  # Vorticity confinement
│       ├── displayFireShader.glsl  # Final fire rendering
│       └── ... (other shaders)
├── index.html                     # HTML entry point
├── package.json                   # Project dependencies
└── vite.config.js                # Vite configuration

Physics Fields and Their Relationships

This fire simulation implements a complete fluid dynamics system with multiple interacting physical fields. Understanding these relationships is crucial for modifying and extending the simulation.

Core Physical Fields

1. Velocity Field (velocity)

   • Type: RG format (two channels)
   • Stores: (vx, vy) velocity vector per pixel
   • Role: Drives movement of all other fields

2. Temperature Field (temperature)

   • Type: Single-channel float
   • Stores: Temperature value per pixel
   • Role: Generates buoyancy, affects fire color

3. Fuel Field (fuel)

   • Type: Single-channel float
   • Stores: Fuel amount per pixel
   • Role: Burns to produce temperature

4. Density Field (density)

   • Type: RGBA format (four channels)
   • Stores: Color/smoke information
   • Role: Visual effects (color and transparency)

5. Pressure Field (pressure)

   • Type: Single-channel float
   • Stores: Pressure value
   • Role: Corrects velocity field to satisfy incompressibility

Field Interaction Diagram

┌─────────────┐
│  Fuel Field │ ──┐
│   (Fuel)    │   │
└─────────────┘   │
                  │ Combustion
┌─────────────┐   │
│ Temperature │ ◄─┘
│   Field     │   │
└─────────────┘   │
      │           │
      │ Buoyancy  │
      ▼           │
┌─────────────┐   │
│  Velocity   │   │
│   Field     │   │
└─────────────┘   │
      │           │
      │ Advection │
      ├───────────┘
      │
      ├──► Density Field - Color/smoke
      ├──► Temperature Field - Carried along
      ├──► Fuel Field - Carried along
      │
      ▼
┌─────────────┐
│  Pressure   │ ◄── Computed from velocity (divergence)
│   Field     │
└─────────────┘
      │
      │ Pressure Projection
      ▼
┌─────────────┐
│  Velocity   │ ◄── Corrected (divergence-free)
│   Field     │
└─────────────┘

Per-Frame Update Order

The simulation updates fields in the following order each frame:

1. Particles → Fuel Field (add fuel)
   ↓
2. Fuel Field + Temperature Field → Temperature Field (combustion & cooling)
   ↓
3. Velocity Field → Velocity Field (self-advection)
   ↓
4. Velocity Field → Velocity Field (vorticity confinement)
   ↓
5. Temperature Field → Velocity Field (buoyancy)
   ↓
6. Velocity Field → Pressure Field → Velocity Field (pressure projection)
   ↓
7. Velocity Field → Density Field (advection)
   ↓
8. Velocity Field → Temperature Field (advection)
   ↓
9. Velocity Field → Fuel Field (advection)
   ↓
10. Noise Field update

Field Lifecycles

Fuel Field

• Generated by: Particle emitters, user interaction (splat)
• Consumed by: Combustion (converted to temperature)
• Decay: Per-frame dissipation (FUEL_DISSIPATION = 0.92)

Temperature Field

• Generated by: Fuel combustion
• Decay: Natural cooling (fourth-power model)
• Movement: Advected by velocity field

Velocity Field

• Generated by: Buoyancy, user interaction
• Decay: Per-frame dissipation (VELOCITY_DISSIPATION = 0.98)
• Correction: Pressure projection makes it divergence-free

Density Field

• Generated by: User interaction (splat)
• Decay: Per-frame dissipation (DENSITY_DISSIPATION = 0.99)
• Movement: Advected by velocity field

Pressure Field

• Generated by: Computed from velocity field divergence
• Purpose: Corrects velocity field
• Decay: Per-frame dissipation (PRESSURE_DISSIPATION = 0.8)

Key Parameters

BUOYANCY (Buoyancy Coefficient)

• Affects: Temperature → Velocity conversion strength
• Higher value: Fire rises faster

BURN_TEMPERATURE (Burn Temperature)

• Affects: Fuel → Temperature conversion
• Higher value: More fuel needed to produce same temperature

COOLING (Cooling Coefficient)

• Affects: Natural temperature decrease rate
• Higher value: Temperature decreases faster

VELOCITY_DISSIPATION (Velocity Dissipation)

• Affects: Velocity field decay
• Lower value: Velocity decays faster (simulates viscosity)

FUEL_DISSIPATION (Fuel Dissipation)

• Affects: Fuel field decay
• Lower value: Fuel disappears faster

DENSITY_DISSIPATION (Density Dissipation)

• Affects: Color/smoke decay
• Lower value: Color disappears faster

Physical Models

This fire simulation system is based on the following physical principles:

1. Navier-Stokes Equations: Describe fluid motion
2. Incompressibility Condition: div(u) = 0 (achieved through pressure projection)
3. Buoyancy Principle: Hot air rises (Archimedes' principle)
4. Blackbody Radiation: Temperature determines color (Stefan-Boltzmann law)
5. Combustion Reaction: Fuel → Heat
6. Heat Conduction: Natural temperature cooling

All fields are interconnected through the advection process, forming a complete physical system.

Controls

Interactive Controls

• Mouse/Touch: Click and drag to add fuel, velocity, and color to the simulation
• Spacebar: Cycle through debug display modes
• Panel Controls: Adjust simulation parameters in real-time

Debug Modes

Press Spacebar or use the panel dropdown to switch between:

• Normal: Full fire rendering with particles
• DebugFire: Visualize fuel and temperature
• DebugTemperature: Temperature field only
• DebugFuel: Fuel field only
• DebugPressure: Pressure field only
• DebugDensity: Density (color) field only
• DebugNoise: Noise field only

License

See LICENSE file for details.

Acknowledgments

This project was created as part of CSCI 580 coursework.