FlareStart
HomeNewsHow ToSources
FlareStart

Where developers start their day. All the tech news & tutorials that matter, in one place.

Quick Links

  • Home
  • News
  • Tutorials
  • Sources
  • Privacy Policy

Connect

© 2026 FlareStart. All rights reserved.

Back to articles
I built a mipmap version of r/place — WebGL pixel art on a real world map
How-ToWeb Development

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

via Dev.to JavaScriptpurpleship1mo ago

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

Read Full Article
20 views

Related Articles

150 million users later, Roblox competitor Rec Room is shutting down
How-To

150 million users later, Roblox competitor Rec Room is shutting down

The Verge • 1d ago

Here are our favorite spring cleaning deals from Amazon’s Big Spring Sale
How-To

Here are our favorite spring cleaning deals from Amazon’s Big Spring Sale

The Verge • 1d ago

What we’re looking for in Startup Battlefield 2026 and how to put your best application forward
How-To

What we’re looking for in Startup Battlefield 2026 and how to put your best application forward

TechCrunch • 1d ago

Build Days That Actually Mean Something
How-To

Build Days That Actually Mean Something

Medium Programming • 1d ago

I have blogged about the difference between code coverage and test coverage and why it matters to distinguish between these 2.
How-To

I have blogged about the difference between code coverage and test coverage and why it matters to distinguish between these 2.

Dev.to Beginners • 1d ago

Discover More Articles