Story

I built a pixel canvas where you place tiles at real lat/lon coordinates on a world map – a 1.6M × 1.6M pixel grid (2.6 trillion addressable pixels). The technical challenge was making it feel smooth from zoom level 0 (whole world) to zoom level 18 (individual pixels).

What I tried and what worked:

- Canvas2D → WebGL: At wide zoom, Canvas2D couldn't keep up redrawing millions of pixels. Switched to a WebGL renderer with mipmap-style tile pyramids – pre-rendered lower-res textures for each zoom level, only loading full-res tiles when you're close enough.

- Viewport-scoped SSE: Instead of broadcasting all pixel updates to every client, the server only streams changes within your current viewport bounds. Cuts bandwidth by ~95% for a sparse map.

- Mercator pixel mapping: Each pixel maps to a real geographic coordinate. The tricky part was making pixel density feel uniform despite Mercator distortion at high latitudes.

- Seeded pixel art: Pre-placed recognizable characters in major cities so new users see something interesting immediately instead of a blank map.

Stack: Node.js, WebGL, SSE, S3 tile storage, Lambda for tile generation.

Free to use, no account required to browse. Still early – would love feedback on the rendering approach.