Rendering 15 Million Moving Nodes in the Browser with WebGPU

Rendering 15 Million Moving Nodes in Real Time with WebGPU

I’ve been experimenting with WebGPU and wanted to see how far the modern browser GPU pipeline can be pushed.

The result is a benchmark that simulates and renders up to 15,000,000 independently moving nodes
entirely on the GPU.

Demo:

https://ajlaston.github.io/Nova-Web/

Repository:

https://github.com/ajlaston/Nova-Web

---

What the Demo Does

Each node is a small rectangle with:

• position (x, y)
• size (w, h)
• velocity (vx, vy)
• color (r, g, b, a)
• a visible flag set by the compute shader

All movement, boundary clamping, and visibility checks are computed in a WebGPU compute shader, not on the CPU.

A second pass uses indirect drawing, where the compute shader writes the number of visible nodes into a buffer and the render pipeline draws exactly that many instances.

---

How It Works Internally

1. Compute shader simulation

The compute pipeline runs every frame and updates:

wgsl
node.x += node.vx;
node.y += node.vy;

if (node.x < 0.0 || node.x + node.w > canvasSize.x) {
    node.vx = -node.vx;
}
if (node.y < 0.0 || node.y + node.h > canvasSize.y) {
    node.vy = -node.vy;
}