
I built a mipmap version of r/place — WebGL pixel art on a real world map
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 upda
Continue reading on Dev.to JavaScript
Opens in a new tab



