Made in Calgary

Read as an agentWork with us

The Lab.

Our own WebGPU engine. One scroll through a world made of particles, computed live by the graphics card in a browser tab, with no video.

The Meridian15 wordmark in particles over the Calgary skyline, captured from the running engine.

Some pictures a template can't draw.

The usual way to draw particles on the web is a small textured square per point, blended together. At hundreds of thousands the squares pile up into fog and black stops being black. Tuning never moves that ceiling.

WebGPU gives a browser compute shaders, writable storage buffers and atomics. With them each particle places itself on screen and settles which grain is nearest, with no blending. No page builder offers that, and a studio that builds sites should know where every millisecond goes.

One world, and the same particles all the way through.

A letter of the wordmark up close, loose grain with true black between the specks.

The wordmark is 200,000 grains.

They flow into the letters through a coarse velocity grid, so neighbours move together like a thick liquid. Up close each letter reads as loose grain with true black between the specks.

Past the D, the city's particles settling into contour threads that draw a mountain range.

The city becomes the mountains.

Downtown Calgary and the mountain range are one population of 340,580 particles with two sets of positions. The camera dives through the D and nothing is swapped on the way down.

The bright cord forging ahead of the camera between two client stations.

Spun from the logo.

A bright cord forges just ahead of the camera, born at the wordmark's live particles. Each client project arrives on it as a curved pane carrying a still of the site.

The engine, counted.

  1. Particles in the city340,580
  2. In the wordmark200,000
  3. MB to open the Lab5.5

Every particle is one thread on the graphics card. It works out its pixel and writes straight into a buffer, and atomic operations settle what happens when thousands land on the same one.

Most of it was measuring the right thing.

A note in the code said the sky faded during the ride. Nothing ever set the fade, so it ran at full resolution the whole way. Drawn at half resolution it saves 11 ms a frame. Boot waited 3.06 seconds on kernels compiling behind every other step. Compiled the moment they exist, time to ready fell from 8.6 seconds to under 4.5.

Work that didn't pay came out, a tiled splat that slowed its pass from 5.1 to 8.0 ms among it. The Lab runs on desktop browsers with WebGPU, and a machine that can't run it is told so before the engine loads. Open it at lab.fifteenthmeridian.com.

A client station on the ride, the Sipp Vodka site on a curved pane of particles.
Next casePrecise Detailing.A protection-first site for a Calgary PPF shop.