Perch
A million shuffled pixels settle into order on your graphics card, one stage of a sorting network at a time. Then Perch times three ways of doing the same sort, on your card.
Waking the graphics card…
Your graphics card
What the browser says it can do, read here and never sent anywhere.
Three ways to sort, timed
Each route sorts the same shuffled keys on a copy of its own: two warm-ups, then up to seven timed runs (fewer on a slow card, to keep the wait short), and the middle time is shown. The first run of each is checked against a sorted copy on the CPU. Whole sorts are timed, never single stages.
| Route (dispatches) | Time | Against the first | Checked |
|---|
How it works
A bitonic sort is a sorting network: a fixed list of stages, each putting pairs of numbers a set distance apart in order, up or down. The list does not depend on the numbers, which is why it suits a graphics card. A million keys take 210 stages. Each pixel is one key, its colour is the key's size, and the pixels lie along a Hilbert curve, a path that never jumps, so a sorted picture is one smooth path of colour.
The animation uses one dispatch per stage, the slowest route, because it can stop between stages. The tiled routes do the stages whose pairs all fall inside a tile of 1,024 keys in the card's fast workgroup memory, in one dispatch, so the card reads and writes the big array once for them instead of dozens of times. The third route also lets threads in a subgroup swap values directly, with no memory at all. Which parts your browser offers is in the panel above: immediate data (a few bytes pushed with each dispatch, in recent Chrome), subgroups and subgroup size control, and timestamp queries.
The keys are random numbers made here with crypto.getRandomValues. Nothing is sent, stored or logged, and the page loads nothing but its own files.