THREE.JS / FOUNDATIONS 276

Let the GPU process a waveform.

A TSL compute function transforms a typed waveform in a storage buffer, reads the result back with getArrayBufferAsync(), and feeds a live visualizer and optional AudioContext output. WebGL2 stays honest with a direct CPU DSP reference.

Initializing-

Creating the waveform buffer, compute graph, and visualizer.

backend: -
compute: -
buffer: -
readback: -

Choose the signal and DSP graphWaveform -> storage buffer -> readback

renderer target signal source pitch 1.00x delay mix 0.20 delay time 0.55s

loop generated output

Compute contractwaiting

kernel: -
storage: -
work items: -
input: -
output: -
pbo: -

The compute graph applies pitch and multi-tap delay to every waveform sample.

Audio bridgewaiting

sample rate: -
duration: -
rms: -
audio: -
analyser: -
source: -

Readback becomes a playable mono AudioBuffer and a red-channel DataTexture visualizer.

Backend boundarywaiting

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

The compute/readback contract is WebGPU-only here; WebGL2 runs the same DSP policy on the CPU.

GenerateFloat32Array

Deterministic local waveforms keep the exercise repeatable and offline.

ComputeFn + instancedArray

One storage-buffer element maps to one TSL compute invocation.

Read backgetArrayBufferAsync

The transformed samples cross the GPU/CPU boundary explicitly.

VisualizeDataTexture

RMS bins become a live red-channel texture and bar field.

PlayAudioContext

A user gesture can schedule the processed mono buffer.

Compute timingwaiting

transform ms: -
readback ms: -
CPU avg: -
CPU p95: -
frames: -
updates: -

Run the transform, then measure the active visualizer submission path over thirty frames.

Float32ArrayinstancedArrayFn.computereadbackAudio/DataTexture

This is a deterministic adaptation of the official audio-processing example: generated local signals replace external MP3 input, while the TSL compute, storage-buffer, PBO readback, AudioBuffer, and visualizer contracts remain executable.

Sources: official audio-processing example · TSL · Renderer · StorageBufferNode