20,000 particles moved by a compute shader
The console shows the backend, the particle count and the compute and draw call counts. On WebGPU and on the WebGL 2 fallback the picture is the same kind of fountain, because the kernel uses no shared memory. No output because the backend line differs.
A compute shader is a GPU program that draws nothing: it reads and writes buffers. With instancedArray and compute() the GPU moves 20,000 particles each frame while JavaScript only presses start. On the WebGL 2 fallback it still runs, with limits.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a floor bounce to the update kernel: when a particle hits y < 0, flip and halve its vertical velocity instead of respawning.
Write one line that reads the first particle's position back to JavaScript for a test.
Explain it without notes
Why is a compute shader better than a JavaScript loop for 20,000 particles?
What happens to compute when the renderer falls back to WebGL 2?
Console
Nothing logged yet.