domlamps · 2.5D lighting for the real DOM

Light that knows how tall things are

Every block here is plain HTML with a height in pixels. The orb is a light 140px above the floor. Anything taller than the light blocks it outright; anything shorter throws a shadow that shrinks as the light climbs.

Docs · npm i domlamps

  • Drag the orb, or focus it and use the arrow keys.
  • PgUp / PgDn raises and lowers it by 10px.
  • Lift it past z 240 and the obelisk stops swallowing the room.
obeliskz 240
pillarz 90
discz 40
glassz 30
paperz 14

Materials

Five blocks, one beam

All five blocks stand 60px tall; only the material changes. A spot light on the central post sweeps round every 14 seconds. Solid stops it, paper lets some through, coloured glass passes a tinted share, and metal blocks it but catches a highlight when the beam hits it.

Field notes

How top-down games fake a third dimension

A top-down game has no depth buffer to lean on, so its lighting is a trick played on a flat map. The oldest version is a light map: a darkness layer drawn over the scene, with soft holes cut wherever a light reaches. Multiply that layer over the art and the room falls away into shadow.

Holes alone make every light shine through walls. The fix is a visibility polygon: cast rays from the light to each wall corner, keep the nearest hits, and fill the shape they enclose. Only the inside of that shape is lit. Sorting the corners by angle makes it fast enough to rebuild every frame.

Height is what sells the effect. Give each wall and crate a height, and a short crate under a tall lamp throws a short shadow while a tall wall throws a long one. When a lamp sits lower than a wall, it cannot light the top of that wall at all. Light has to spill around the sides.

This page runs the same model on real HTML. Each element's box is a footprint, its --lamp-z is its height, and one shader works out, for every pixel, which surface is on top and what stands between it and each light. The text you are reading is still text: select it, zoom it, or read it with the lights off.

Light controls
Orb
Scene