THREE.JS / FOUNDATIONS 284

Let attractors write the particle field.

The official example couples a storage-backed particle simulation to an instanced SpriteNodeMaterial. This study keeps initialization, force accumulation, velocity clamping, wrapping, and compute-to-render state visible, with a direct CPU/InstancedMesh reference for WebGL2.

Initializing-

Preparing deterministic particle state.

backend: -
compute: -
particles: -
attractors: -

Shape the fieldinit -> force -> velocity -> sprite

renderer target particle count attractor mass exponent 7 particle mass exponent 4 max speed 8.00 spinning strength 2.75 velocity damping 0.10 simulation speed 1.00 particle scale 0.008 field half extent 8.00

pause simulation show attractors

Storage graphwaiting

position: -
velocity: -
init: -
update: -
attribute: -
dispatch: -

Two instanced arrays are initialized once, updated in place, and read back as a render attribute.

Force graphwaiting

attractors: -
gravity: -
spin: -
clamp: -
wrap: -
color: -

Each particle loops over attractors, accumulates gravity and spin, clamps velocity, then wraps through the bounded field.

Backend boundarywaiting

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

WebGPU executes `renderer.compute()` over storage arrays; WebGL2 uses the same force contract through a CPU update reference.

StateinstancedArray()

Position and velocity live in writable GPU storage instead of ordinary JavaScript objects.

ForceLoop()

One compute invocation accumulates gravity and axis-aligned spinning from every attractor.

GuardIf()

A speed clamp keeps a few close encounters from destabilizing the particle field.

RendertoAttribute()

The same storage position becomes a SpriteNodeMaterial instance attribute.

CompareCPU fallback

The direct path preserves the simulation contract without pretending WebGL2 supports compute.

Compute timingwaiting

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

Measure the active compute-to-render path after tuning the force budget.

initstorageforcevelocitysprite

This is a deterministic adaptation of the official compute-attractors particles example: seeded storage state and three fixed attractors keep the simulation reproducible while initialization, force accumulation, speed clamping, wrapping, compute dispatch, and the direct fallback remain executable.

Sources: official compute-attractors example · TSL · StorageBufferNode · SpriteNodeMaterial · InstancedMesh