WebGPU vs WebGL Benchmark

Draw the same scene with both APIs, per object and instanced, and compare them on your own browser and GPU. A full run takes about a minute.

What this benchmark measures

Every mode draws the same scene: a number of small coloured quads, each with its own position, size and colour, animated every frame. Two numbers matter:

CPU ms is the JavaScript time spent uploading data, recording commands and submitting one frame, measured with performance.now(). Upload ms is the part of it spent copying per-object data into a GPU buffer.
FPS is the number of measured frames divided by the time between their requestAnimationFrame callbacks. Most screens cap this at 60.

The four modes

Mode	How each frame is drawn
WebGL2, per object	One `uniform4fv` call and one `drawArrays` call for every object.
WebGPU, per object	One `writeBuffer` for all objects, then a dynamic-offset `setBindGroup` and a `draw` for every object.
WebGL2, instanced	All object data in one buffer, drawn with a single instanced call.
WebGPU, instanced	All object data in a storage buffer, drawn with a single instanced call.

How to read your results

Compare modes within the same object count, not across browsers or machines. If one draw call per object is much slower than instancing in both APIs, that is the cost of issuing draw calls, and the reason games batch their objects. If WebGPU per object stays fast at large counts but FPS drops, the browser's GPU process has become the bottleneck rather than your JavaScript.

Our own results from an Apple M1 Pro, and why they look the way they do, are in the article WebGPU vs WebGL: real numbers.

Tips for fair numbers

Close other tabs and plug laptops into power, so the CPU does not slow down to save battery.
Run the benchmark two or three times. The first run includes shader compilation and warm-up.
Keep this tab visible while it runs. Browsers slow down background tabs.
Timers are rounded to about 0.1 ms for privacy, so very small numbers are approximate.
Add ?autorun&counts=1000,20000&frames=200 to the address to start a run straight away; results are also on window.benchmarkResults.

Questions

Why does the benchmark say WebGPU is not available?: WebGPU needs a recent Chrome, Edge or Safari, or Firefox on Windows, and a supported GPU. The WebGL2 modes still need WebGL2. See What is WebGPU? for browser support.
Is WebGPU always faster than WebGL?: No. WebGPU removes a lot of driver work, but for simple scenes with many tiny draw calls WebGL2 can use less JavaScript time. The big win in both APIs is drawing many objects with one call, which this benchmark shows with the instanced modes.
Is any data sent anywhere?: No. The benchmark runs entirely in your browser and the results stay on this page.