THREE.JS / FOUNDATIONS 282

Make a flame out of pixels.

The official VFX example layers sprite billboarding, UV deformation, generated cellular/perlin noise, animated texture sampling, gradient lookup, and alpha shaping. This study keeps two flame graphs visible so the material boundary is something we can tune, compare, and release.

Initializing-

Generating local noise fields and a color gradient.

backend: -
material: -
flames: -
palette: -

Shape the fireuv -> noise -> gradient -> alpha

renderer target flame profile palette noise speed 1.00 UV turbulence 10 vertical stretch 2.00 glow strength 1.00 sprite scale 1.00

pause animation horizontal billboard

Noise graphwaiting

cellular: -
perlin: -
gradient: -
UV: -
motion: -
lookup: -

Generated local textures keep the flame material deterministic while the graph makes the noise and gradient ownership visible.

Sprite materialwaiting

material: -
vertex: -
color: -
alpha: -
blend: -
profile: -

Two camera-facing sprites use different UV/noise shaping recipes but share the same local gradient and release policy.

Backend boundarywaiting

WebGPU: -
WebGL2: -
fallback: -
sprites: -
draw calls: -
resources: -

WebGPU executes TSL texture nodes and billboarding; WebGL2 uses matching samplers and a direct shader reference.

Billboardbillboarding()

Each flame follows the camera horizontally without rotating its shape away.

WarpspherizeUV()

Sprite UVs bend into a flame-like silhouette before noise sampling.

Sampletexture()

Cellular and perlin fields move through the deformed UV domain.

Lookupgradient

Shape becomes color through a one-dimensional gradient texture.

CompareGLSL fallback

The direct route keeps the TSL ownership boundary explicit.

Flame timingwaiting

rebuild ms: -
CPU avg: -
CPU p95: -
frames: -
updates: -
draw calls: -

Tune the sprite graph, then measure thirty frames of the active flame path.

uvnoiseshapegradientsprite

This is a deterministic adaptation of the official VFX flames example: local generated noise and gradient textures replace external image assets while the dual sprite, billboarding, UV deformation, animated sampling, gradient lookup, alpha, and additive-blending contracts remain executable.

Sources: official VFX flames example · TSL · SpriteNodeMaterial · TextureNode