HN Showcase
Back to browse
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

by recuerdame·Feb 26, 2026·1 point·0 comments
Visit ProjectView on HN

AI Analysis

●●●BangerWizardryRabbit Hole

2.6-trillion-pixel r/place on a real map with mipmap rendering—genuinely clever technical solution.

Strengths
  • •Mipmap tile pyramid + viewport-scoped SSE cuts bandwidth ~95% while enabling smooth cross-scale zoom without redraw lag.
  • •Mercator distortion handling makes pixel-to-coordinate mapping feel natural despite geographic warping at high latitudes.
  • •Seeded pixel art + multi-language support suggests thoughtful product design beyond the technical core.
Weaknesses
  • •Requires login, limiting casual discovery compared to original r/place's no-friction entry point.
  • •Monetization path unclear—'Shop' link suggests merch, but value prop for long-term engagement is thin.
Category
Other
Target Audience

Pixel art enthusiasts, collaborative art communities, geospatial explorers

Similar To

r/place · Collaborative Canvas (Discord Bots)

Post Description

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.

Similar Projects