NatureGL Fire · Volumetric fire and smoke on a GPU fluid solver

#A fluid sim, not a sprite sheet

Fuel, temperature and smoke live in a 3D voxel grid inside a box you place in your world. Each frame the solver burns fuel into heat, lets the hot gas rise and curl, and projects the velocity so the gas stays incompressible. Then it raymarches the result against your scene's depth, so the fire sits correctly behind and in front of your geometry.

Follow the quick start or see what runs each frame.

The campfire preset on high: the demo's teepee of logs is the emitter mesh, and the fire light lights the stones and the courtyard around it.

presets, one file each: 7
quality tiers, low to ultra: 4
voxels on high (64×96×64): 393K
GPU embers advected by the gas: 4096

#What's in the box

Combustion in every voxel
Emitters inject fuel and heat. Fuel burns once it's hot enough and releases heat, soot and volume. Flame colour comes from a CIE 1931 blackbody ramp.
Emit from anything
Point, sphere and box sources, or the surface of any mesh in your scene. Every emitter is a live handle you can move, retune or remove.
Explosions and fireballs
One call detonates a divergence-driven blast. It tears into lobes and leaves a rolling soot mushroom.
Wind and solid obstacles
Height-scaled wind, noise turbulence and vorticity confinement. Sphere and box obstacles deflect the gas, and push it when they move.
The fire lights your scene
A shadow-casting PointLight placed and coloured from an asynchronous GPU reduction of the flame.
Composites into your frame
Depth-aware raymarch, TAA, heat haze, bloom and wet-floor reflections. Or take the linear HDR composite into your own pipeline.

#Seven fires, ready to load

Every preset is one file in src/config/presets/: sim parameters, emitters, obstacles, an optional auto-burst and a camera hint. Load one with loadPreset, and print your own with getParams().

Campfire preset — Campfire`campfire`A teepee of logs burning from its own surface, in a light wind.

Torch preset — Torch`torch`A small, hot, flickering flame that trails behind when it moves.

Jet preset — Jet`jet`A 7.5 m/s flame-thrower jet splashing over a sphere obstacle.

Plume preset — Plume`plume`A smouldering brazier: little flame, heavy smoke, strong wind.

Explosion preset — Explosion`explosion`A detonation every 4.4 s that blooms into lobes and a soot mushroom.

Mesh preset — Mesh`mesh`Any mesh set on fire: a rotating torus knot by default.

See all seven presets

#A campfire in your scene

main.js

import * as THREE from 'three';
import { FireSystem, createTeepeeGeometry } from 'naturegl-fire';

const logs = new THREE.Mesh(createTeepeeGeometry(), new THREE.MeshStandardMaterial({ color: 0x1a120c }));
scene.add(logs);

const fire = await FireSystem.create({
  renderer, scene, camera,
  domain: { center: [0, 3, 0], size: [4, 6, 4] },  // the fire lives in this box
  meshes: { logs },                                // the campfire burns from the logs' surface
  preset: 'campfire',
});

const timer = new THREE.Timer();
renderer.setAnimationLoop(t => {
  timer.update(t);
  fire.update(timer.getDelta());   // offscreen simulation step
  fire.render();                   // your scene + the fire → canvas
});

#From a spark to a mushroom cloud

Two fire.explode() calls, the second at strength 1.4. The burst is carved into noise pockets and pushed outward with jitter, so it breaks into lobes, then cools into soot that rises and rolls.

#Part of the NatureGL series

NatureGL Fire renders into a scene you own and takes its key light and ambient from outside through setLighting, so it fits under a NatureGL Sky sky or next to the other packs.