Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Work → 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.

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

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

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

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