WebGPU TSL Transition Compute Lab

MODE: WebGPU Compute (TSL)

NODES: 100,000 Particles

Preset Target Geometry Sphere

Compute Pipeline Mode

TSL Compute Transition Operator

Compute Parameters

Particle Density (Nodes) 100,000

Morph Duration 2.0s

Transition Noise Frequency 1.8

Easing Curve

GPU Compute Telemetry & Metrics ● Live Sync

Compute Frame Time 1.24 ms Target < 16.6 ms

Dispatch Workgroups 157 64 threads / group

Buffer Stride / Bandwidth 76.8 MB/s 32-byte vec3 stride

Compute Throughput FPS 60 FPS WebGPU TSL Dispatch

storageBuffer(PosA) ➔ TSL.mix(Noise) ➔ storageBuffer(PosB) ➔ AttributeNode(Vertex)

Generated Three Shading Language (TSL) Snippet

// TSL Compute Node Pipeline Generator
const positionA = storage( positionBufferA, 'vec3', 100000 );
const positionB = storage( positionBufferB, 'vec3', 100000 );
const progress = uniform( 0.0 );
const noiseFreq = uniform( 1.8 );

const computeTransition = Fn( () => {
  const pA = positionA.element( instanceIndex );
  const pB = positionB.element( instanceIndex );
  const noise = mx_noise_float( pA.mul( noiseFreq ) );
  const morphed = mix( pA, pB, easeInOutCubic( progress ).add( noise.mul( 0.1 ) ) );
  positionA.element( instanceIndex ).assign( morphed );
} )();