A pinball dot-matrix display in one 4 KB texture

· 2 min read · tsl, webgpu, game-dev, pinball, shaders

An amber dot-matrix display above a gothic pinball table showing a score and a skull icon

The dot-matrix display of Graveyard Pinball is a 128x32 amber plasma-style screen: score, ball and bonus, event cards, achievements and a game-over leaderboard. It looks moody and cinematic, but it is almost free: one 4 KB texture, one draw call, no lights and no extra render passes.

The shader #

The CPU keeps a Uint8Array(128 * 32) of brightness levels from 0 to 15. The material, about 25 TSL nodes, does the rest:

  • the cell is floor(uv * (128, 32)),
  • the level maps to a color by piecewise-linear interpolation between the palette's four stops, so there is no uniform array and no palette texture, and it behaves the same on every backend,
  • the dot mask is a smoothstep on the distance from the cell center, with aa = fwidth(...),
  • once dots drop below a pixel, it fades to the average coverage, so a far camera shows no moire and needs no mipmaps.

The shader outputs above 1.0, so the scene bloom does the glow. The texture uploads only when something changed.

A palette per scene #

Amber by default, like old plasma DMDs. A director cross-fades palettes in 0.35 s while the dots never move: amber for the game, cyan for rare things and lanes, violet for multiball, green for secrets, red for tilt and game over, gold for legendary events and the jackpot.

A director, not a script #

Base scenes follow the game mode (attract, game, game over) and overlays are pushed by events. A higher priority interrupts, equal or lower waits in a queue of four, and an interrupted achievement is re-queued, never lost. Tilt hard-cuts. The tick is fixed at 30 fps.

Everything is plain JS #

Everything under the DMD folder except the one renderer file is plain JavaScript with no dependencies, so it runs in Node. That is how it is tested.

HUD and backglass #

During play the display is a plane attached to the camera, since the lens looks down at the table and the real backbox is out of frame. The same texture also drives the backglass panel.

The achievement system that feeds it is in the achievements post. The project is on its project page.

Related projects