I built a mipmap version of r/place — WebGL pixel art on a real world map

#showdev #opensource #webgl #javascript

I wanted to build a "mipmap version of r/place" -- zoom out and you see the whole world, zoom in and you're placing individual pixels at real geographic coordinates.

The result: WorldCanvas -- a real-time collaborative pixel art canvas where every pixel sits at an actual lat/lon position on a world map.

The concept

r/place is great but the canvas is an abstract grid. I wanted the canvas to mean something geographically. Place pixel art in Seoul and it shows up in Seoul. Tokyo, New York, Paris -- the map is the canvas.

Zoom level 1 = world overview. Zoom level 12 = individual 1px cells. All backed by real Mercator coordinates.

The hard parts

WebGL-only renderer

My first version used Canvas2D as a fallback. During profiling I noticed zoom-out caused massive frame drops -- the culprit was Canvas2D's drawImage on large tile counts. Solution: remove Canvas2D entirely. WebGL-only.

Now it runs at 60fps regardless of zoom level.

Viewport-scoped SSE

Initially I was broadcasting every pixel update to every connected client. Fine for low traffic, terrible at scale. Now SSE updates are scoped to the client's current viewport -- you only receive updates for tiles you can actually see.

Real-time at scale

The tile system divides the world into a grid. Each tile is a 256x256 pixel region. Tiles load on demand, cache in memory, and invalidate via SSE when someone paints nearby.