Skip to content
Andrew Voirol
Work → Cartography → Dot-matrix globe: GLSL coastlines on a specular map
ThreadComplete

Dot-matrix globe: GLSL coastlines on a specular map

The easiest AI Studio rescue — a 3D rotating Earth built entirely in custom GLSL shaders. UV-space dot grid, Sobel coastlines, and atmospheric glow in ~50 lines of fragment shader.

Code
Started Aug 3, 2026·Latest Aug 3, 2026·2 entries

GLOBE.GL — GLSL dot-matrix Earth with Sobel edge-detected coastlines, specular highlights, and SYSTEM ONLINE indicator showing lat/lng coordinates

Full GLSL Earth view — Sobel edge-detected glowing coastlines over a UV-space dot matrix grid with live telemetry.

Angled close-up of the rotating dot matrix globe highlighting South America and atmospheric limb falloff
Rotated perspective view of the 3D dot matrix globe in space with orbit coordinates HUD

An AI Studio export that turned out to be the easiest rescue in the fleet — a 3D rotating Earth built entirely in custom GLSL shaders. Two conversations: one blind recon that discovered zero AI integration and a clean shader architecture, one build session that shipped it to GitHub with media in a single commit. The project's visual identity lives in ~50 lines of fragment shader: a UV-space dot grid for land mass, Sobel edge detection for coastlines, and view-angle falloff for atmospheric glow. The only design tension — dots trading continental detail for style — turned out to be the point, not a flaw.

Latest Update

Dot-matrix Earth: export zip to GitHub in ten minutes

Mon, Aug 3, 2026

Timeline

Dropped into a blind AI Studio export and found something I didn't expect: no Gemini API, no backend, no env vars — just a 255-line React component with two custom GLSL shaders doing all the work. A fragment shader samples a 2K specular map to separate land from ocean, tiles a UV-space dot grid across the sphere with smoothstep circles, and runs a Sobel-like edge filter on four neighboring texels to trace coastlines in real time. An atmosphere shader fakes edge glow with view-angle falloff. The whole thing renders on a 128-segment sphere geometry behind an occlusion sphere that hides backface dots. Two fixes to get it running — a missing CSS file and a CDN importmap fighting Vite's bundler — and it was rendering at 60fps. Cleanest AI Studio export I've seen: zero surgery, zero dead dependencies, zero scaffold cruft worth worrying about.

ReactAI StudioShaders
Permalink →

Asked the agent to spin it up and ship it — one conversation later, the whole thing was on GitHub with a README, screenshots, and a GIF. Killed a duplicate texture load (two 2K images fetching from CDNs, only one wired to the shader), fixed Tailwind content globs that were scanning all of node_modules, removed the cleanup scaffolding, captured Playwright screenshots at headless 2x DPR, assembled 48 GIF frames at 10fps into a 4.9MB demo loop. One commit, 17 files, 3,990 lines inserted. The interesting moment came after shipping: I noticed the dot-matrix pattern trades away continental detail for the stylized look — the coastlines felt overexposed, the interior dots too uniform. Turns out that's the shader's deliberate choice. dotDensity: 110 and a smoothstep(0.2, 0.6) coastline threshold are tuned aggressive on purpose. The dots aren't trying to be a map. They're trying to be a mood.

ReactAI Studio
Permalink →

Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkThreadsBuilder's LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.