Colour, glow and light

#Colour inputs

Every color, colors, colorA, colorB and palette option takes any of these:

Options are stored as linear arrays, so toJSON() and getParams() always print arrays. '#a66bff' and [0.62, 0.3, 1.0] are close but not the same colour.

#Recolouring at runtime

effect.setColor('#3dff8a');   // every dye colour of this effect
effect.setColor(null);        // back to its own palette
for (const e of magic.effects) e.setColor([1, 0.72, 0.22]);   // what the demo's Dye swatches do

The override replaces the dye colours (both portal rings, all the orbs, the ink drops, the force-field shell). For dragonBreath it also rebuilds the flame palette. Spark colours are separate options (sparks.colorA, sparks.colorB) and keep their values, except where an effect derives them from its dye colour: the dragon's embers and a generic emitter's default sparks.

Dye already in the fluid keeps its colour and advects on. New dye mixes with it, so a recolour blends in as the old dye fades or is carried away rather than snapping.

#Dye, density and absorption

The dye field is RGB density plus glow. rate or density on an effect is how much dye it adds per second, and physics.dissipation (times the dissipation control) is how fast it fades. physics.glowDissipation fades the glow on its own clock, so smoke can outlive its glow.

In the volume renderer:

#Glow and emission

Glow is the part of the dye that emits. render.glow (9) scales dye glow into emission, render.flame (4.2) scales combustion, and the glow control multiplies both.

The volume itself is lit by a key light and an ambient term that you set in params.lighting:

lighting only lights the volume. Light your meshes yourself. The demo aims its moon light along lighting.keyDirection, so smoke and props agree.

#The glow light

Every third frame, the system reduces the fluid's emission on the GPU to one 32 × 16 texture and reads it back asynchronously with readRenderTargetPixelsAsync, so it doesn't stall the pipeline. The result drives magic.glow:

magic.glow.intensity = 0.5;             // half as bright on your scene
magic.glowLight.castShadow = false;     // or create with glowShadows: false
magic.setLightsEnabled(false);          // hide it and the spell orbs' lights

The same centroid and colour also light the volume from inside, with self-shadowing toward the centroid. The light's shadows need renderer.shadowMap.enabled = true. The shadow map is 512², with the shadow camera's far plane at 30 m.

setLightsEnabled(false)Default

#Reflections on the floor

render() reflects the volume on surfaces at the domain floor height whose colour alpha is below 1. patchReflectiveFloor() makes a MeshStandardMaterial or MeshPhysicalMaterial write that mask from its roughness:

const strength = patchReflectiveFloor(floorMat, { strength: 1, roughnessScale: 1.25 });
strength.value = 0.5;   // live

It writes alpha = 1 − strength · clamp(1 − roughness · roughnessScale, 0, 1), so glossy parts reflect and rough parts don't. The patch chains any existing onBeforeCompile. render.reflection (1) scales the reflection overall; the ink preset uses 0.35.

#The grade

render() and composite() finish with bloom and a grade, set in params.post:

Dark scene tones keep standard ACES. The hue-preserving curve fades in only above a luminance of about 0.08.