THREE.JS / FOUNDATIONS 283

Twist a tornado out of noise.

The official VFX example combines radial UV coordinates, skewed texture domains, a procedural twisted-cylinder position graph, and a RenderPipeline bloom pass. This study keeps the geometry deformation and post-processing boundary visible across the TSL and direct-shader paths.

Initializing-

Generating a deterministic local noise field.

backend: -
pipeline: -
meshes: -
bloom: -

Shape the vortexradial uv -> twist -> noise -> bloom

renderer target output view time scale 0.20 parabola strength 1.00 parabola offset 0.30 tornado amplitude 0.20 noise scale 1.00 bloom strength 1.00 bloom radius 0.40 bloom threshold 0.10 exposure 1.10

pause animation wireframe shells

Coordinate graphwaiting

radial UV: -
skew: -
samples: -
motion: -
floor: -
texture: -

Two radial domains and a local noise texture make the floor and shell patterns independently observable.

Twisted geometrywaiting

position: -
shells: -
segments: -
parabola: -
turbulence: -
alpha: -

The TSL route owns vertex displacement with a custom Fn; the dark shell keeps the silhouette readable behind the emissive shell.

Pipeline boundarywaiting

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

WebGPU uses PassNode plus BloomNode; WebGL2 uses a direct ShaderMaterial and EffectComposer reference.

Radialatan + distance

Centered plane coordinates become a radial texture domain before noise lookup.

SkewFn()

A reusable TSL function shears the noise domain into directional motion.

TwistpositionNode

Local cylinder positions become a parabola with animated angular turbulence.

BloomRenderPipeline

PassNode output and emissive color become a controllable post-processing graph.

CompareGLSL fallback

The direct route keeps the TSL geometry and pipeline ownership boundary explicit.

Tornado timingwaiting

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

Tune the deformation and bloom graph, then measure thirty frames of the active path.

radial uvskewpositionnoisebloom

This is a deterministic adaptation of the official VFX tornado example: a generated local noise texture replaces the external Perlin asset while radial UV conversion, skew functions, twisted-cylinder position deformation, alpha shaping, PassNode output, bloom, and the direct-shader boundary remain executable.

Sources: official VFX tornado example · TSL · RenderPipeline · MeshBasicNodeMaterial · BloomNode