Distribution graphwaiting
- randomness
- -
- radius
- -
- branch angle
- -
- time
- -
- position
- -
- object
- -
Per-instance range nodes provide stable random values; trigonometry turns each branch into a time-animated radial position.
THREE.JS / FOUNDATIONS 281
Give a galaxy a shape.
A single SpriteNodeMaterial instance graph distributes thousands of camera-facing stars through TSL range(), trigonometry, time, and color nodes. The direct WebGL2 route keeps the same procedural contract visible in a labeled point-shader reference.
Initializing-
Creating the procedural spiral and instanced sprite material.
- backend
- -
- material
- -
- stars
- -
- branches
- -
Shape the spiralrange -> orbit -> sprite
Sprite contractwaiting
- material
- -
- scale
- -
- color mix
- -
- alpha
- -
- blending
- -
- depth
- -
One instanced plane becomes a camera-facing star through SpriteNodeMaterial scale, color, alpha, and additive blending.
Backend boundarywaiting
- WebGPU
- -
- WebGL2
- -
- fallback
- -
- instances
- -
- draw calls
- -
- resources
- -
WebGPU executes the TSL instance graph; WebGL2 computes equivalent attributes in a direct shader reference.
Per-instance values become the galaxy's radial coordinates.
Flooring a range value chooses an arm angle.
Inner stars orbit faster through a radius-weighted offset.
Radius maps hot inner stars to a cool outer palette.
The direct route exposes the same ownership without TSL execution.
Galaxy timingwaiting
- rebuild ms
- -
- CPU avg
- -
- CPU p95
- -
- frames
- -
- updates
- -
- draw calls
- -
Tune the distribution, then measure thirty frames of the active particle path.
rangeradiusbranchespositionsprite
This is a deterministic adaptation of the official TSL galaxy example: generated parameters and a compact control surface replace the Inspector while the instance-driven range, orbit, time, color, alpha, and additive-sprite contracts remain executable.
Study issue
Sources: official galaxy example · TSL · SpriteNodeMaterial · InstancedMesh