Every data grid claims to handle live data.
Every data grid claims to handle live data. We wanted a workload that would not let us hand-wave, so we compiled Doom to WebAssembly and made a grid its screen. You can play it here: https://toclocoinc.github.io/lattice-grid-demo-doom/ (arrows move, F or Shift fires, Space uses). The code is on GitHub: https://github.com/toclocoinc/lattice-grid-demo-doom This is the story of how it works, what we…
Recent research demonstrates that many data grids claim to handle live data, but the team behind the Lattice Grid wanted a more rigorous benchmark. To achieve this, they compiled Doom to WebAssembly and transformed it into a grid-based screen. The source code is available on GitHub.
The original Doom engine, dubbed doomgeneric, renders each frame as a raw pixel buffer and communicates it to the host. It operates without SDL, audio, or canvas, receiving a 320 by 200 pixel frame in each iteration. The page stores the previous frame, contrasts it with the new one, determines the rows that changed, and applies those changes through the grid.rows.apply method – the same method utilized by applications for price updates or status changes.
Initially, the grid treated each pixel as a separate cell, with background colors derived from cell values using formatting rules. This version supported 4,000 cells and achieved 33 frames per second. After proper measurement, the team realized that the cost of enqueueing the update was around 17 milliseconds.
To better accommodate larger grids, the team modified the design. The current demo features a single column and 200 rows, with each row's cell containing its line of pixels as a CSS gradient. When a frame changes 35,000 pixels, it requires roughly 170 row writes. A desktop Chrome browser can render a frame with 35,000 pixel changes at a rate of 30 to 60 frames per second, making the engine's own 35 frame cap the limiting factor.
The page keeps both resolutions accessible, offering 160 by 100, 80 by 50, and automatically falling back to 160 by 100 if the machine cannot maintain 30 frames per second within the first few seconds of gameplay.
The grid's improvements include conditional formatting rules that now cost the same as unstyled cells during bulk updates. With all cells styled, 4,000 styled cells still update in one frame. Partial updates now incur costs only for the affected rows and cells, and the grid writes attributes, classes, text nodes, and cell positions only when their values change.
In an 80 by 50 grid, 4,000 styled cells reach the screen in around 49 milliseconds, and 900 cells update in approximately 33 milliseconds, according to the measurement harness.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
