WebGL mipmap renderer for a zoomable R/place on a real world map
WebGL mipmap renderer for a zoomable R/place on a real world map
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.
Share cardActual performance
Launch Intel predictions
Analyze your own launch →Incorrect prediction on native model
Similar products
PagerDuty for the real world
I made Pokémon but with real animals in the real world
Trying out actioncable in a real world app
Crowsnest – API for the Real World
Pharmacovigilance analytics for exploring real-world adverse
The Whicher: A/B test the Real World
NLP algorithms for real-world sentiment analysis
Prepares your team for challenging real-world scenarios
Spaced repetition for real-world skills.
Real-world tasks your agent can't do alone.