r3f-learning-01

SHOWCASE · DATA VIZ

Globe & Arcs

A procedural dotted globe — no Earth texture, just step() on a fract-grid in the fragment shader. 14 arcs draw on between random lat/lon points; tube geometry is built once, animation runs on a shader uniform that clips the rendered range. Add 12 more arcs and frame time barely budges.

Where it shows up: GitHub homepage globe, Stripe global landing page, Cloudflare network visualizations, payments-platform marketing pages, crypto-bridge dashboards. Anywhere the message is "we operate everywhere."

Implementation note (the trap to avoid): do not rebuild tube geometry per frame to animate the draw-on. With 14 arcs at 64 path × 8 radial segments, that's ~14 k triangles re-extruded 60×/second — visible jank. The arc primitive builds the tube once and animates a uProgress uniform that the fragment shader uses to discard pixels past the head, with a soft fading tail.

Variations: real Earth texture (equirectangular) for a photoreal globe; region-based dot density (denser over land, sparse over ocean); arcs that pulse in response to live data (websocket → uniform); add particle markers at endpoints with a HUD label per city.