Guides

Dragon breath

The one effect that burns. A pulsing jet of fuel ignites in the fluid, heats it, leaves tinted soot and throws embers, and the flame takes its colour from a three-stop palette instead of blackbody.

dragonBreath: the breath pulses at 1.1 rad/s between 60 % and full strength. The green comes from the palette ramp, the dark wisps from soot tinted [0.1, 0.16, 0.1], and the ripple behind the flame from heat haze.

const [dragon] = magic.loadPreset('dragonBreath');   // physics tuned for combustion
dragon.move([-1.13, 1.32, 0]).retarget([0.97, -0.1, 0]);
dragon.setColor('#a66bff');                          // violet fire: the palette follows
dragon.strength;                                     // 0..1 pulse this frame

#How the flame works

The effect is an emitter that injects fuel (60 per second at full pulse) and temperature (1.45) at the mouth, driven along direction at speed 6.8 m/s with blend 0.95. Everything after that happens in the solver's state pass:

Fuel burns once the temperature passes the ignition point, at physics.burnRate per second.
Burning adds heat, so the flame rises and expands (physics.expansion feeds the pressure solve).
Burning adds soot to the dye in the colour flame.soot.
The volume renderer maps the burn to emission through the flame palette, from dark through mid to hot.

The pulse scales the fuel, the heat and the jet speed together: 1 − depth + depth · √max(0, sin(t · rate)) with pulse: { rate: 1.1, depth: 0.4 }.

#Colour and the palette

palette is a ramp of three linear-RGB stops, dark → mid → hot. The default is green: [[0.02, 0.16, 0.03], [0.18, 1, 0.2], [0.8, 1, 0.62]].

When you call setColor(c), the ramp is rebuilt from that one colour: c × 0.08 for dark, c for mid and 0.6 + 0.4 c for hot. The embers' first colour is always twice the effect colour.

`setColor([0.62, 0.3, 1.0])`: the ramp, the embers and the demo dragon's eyes follow

To set the ramp by hand, pass palette in the options, or set params.flame.palette for fuel from other sources. With no dragon and flame.palette: null (the default), flame emission uses a blackbody ramp.

#Options

Option	Default
`position`, `direction`	`[-1.13, 1.32, 0]`, `[0.97, -0.1, 0]`	Mouth and aim. `retarget()` sets `direction`
`color`	`[0.35, 1, 0.35]`	Dye colour; with `setColor()`, also the palette
`radius`, `speed`, `blend`	`0.22`, `6.8`, `0.95`	Jet size (m), speed at full pulse (m/s), drive strength
`glow`, `density`	`1.2`, `0.4`	Dye glow and density per second
`temperature`, `fuel`	`1.45`, `60`	Heat and fuel at full pulse
`pulse`	`{ rate: 1.1, depth: 0.4 }`	`depth: 0` = a steady jet
`palette`	green ramp	Dark, mid, hot
`flicker`	`0.1`	Fast flicker depth of the glow light (the largest value among effects wins)
`sparks`	`{ offset: 0.6, radius: 0.45, rate: 1.2, needTemperature: 0.5, life: 0.5, jitter: 3, colorB: [1.6, 1.8, 1.2] }`	Embers spawn `offset` m along the jet, only where the temperature exceeds `needTemperature`

Getters: color (the colour in effect, after any override) and strength (this frame's pulse).

#Heat haze

post.heatHaze (0 by default, 1 in the preset) distorts the scene behind hot fluid. It's computed from the temperature field at quarter resolution, then applied in the composite. It only bends what's behind the volume, so it shows best against lit geometry.

#Fire from other effects

Any source can carry fuel: an emitter, an impulse, or your own effect. Combine it with the preset's physics for flames of your own.

magic.addEmitter({ position: [1, 0.3, 0], velocity: [0, 1.2, 0], color: '#ff6a2a', temperature: 1.2, fuel: 30, glow: 0.8, rate: 0.4 });
magic.impulse([0, 1.5, 0], [0, 1, 0], '#ff6a2a', { fuel: 40, temperature: 1.2, expansion: 0.8 });

For fire as the main subject, NatureGL Fire has a dedicated combustion solver with mesh emitters and embers.