Fog of war in a 128x128 byte grid

· 1 min read · shaders, game-dev, three.js, javascript, odd-and-out

A bright island seen from above with part of it covered by soft mist, a fog-of-war mechanic in a 3D game

The fog of war in Odd & Out is a grid of 128 by 128 bytes. Zero means never seen, 255 means seen. That is the whole system, and it serves three readers.

The grid #

Characters paint it as they walk, with a soft-edged circle. It is plain numbers in a Uint8Array, with a version that bumps on every change, so the texture uploads only when something changed.

Three readers #

  • The materials. The stylized materials read the grid as a texture and cover what is still unseen with mist.
  • The minimap, which draws the same data.
  • The scene itself. A cheap unseen(x, z) check asks whether nothing of the 3x3 cells around a point has been seen. The texture is read bilinearly, so a cell next to a seen one is a little seen too, and unseen mirrors that. If the mist covers the place entirely, whatever stands there need not be drawn.

Points outside the grid count as unseen.

Why a byte grid #

  • It is tiny: 16 KB per level.
  • It is testable in Node, with no renderer.
  • It is trivially serializable if you want to save what the player discovered.
  • A single texture feeds every material through the shared stylized module, so adding a new material that respects the mist is a few lines.

A pattern #

Anything that is "a map of what the game knows" can be this: a small typed array, one version counter, and several consumers. The same idea is behind the foot analysis: keep the maths separate from the scene, and tests are cheap.

The project is on its project page.

Related projects