TerraGemini

When Canvas 2D hits its ceiling around 50,000 animated points, you have to go to the GPU to maintain frame rates. This project skips Three.js entirely — 918 lines of raw WebGL, every buffer allocated by hand, every shader written from scratch. It is the fourth and final paradigm in the Cartography project, and the one with the highest performance ceiling.

Rather than relying on abstraction layers, TerraGemini uses direct gl calls to manage its state. Offloading calculations to GPU fragment shaders enables rendering hundreds of thousands of points, raytraced specular ocean glints, and procedural coastlines at 60fps.

What It Does

• Point density slider: 50K to 250K vertices dynamically without PCIe reallocation, using O(1) buffer slicing.
• Blinn-Phong specular ocean reflection: Raytraced ocean glint with a scrubbable 3D solar vector for precise azimuth control.
• 3×3 Sobel edge-detection: Dynamic convolution kernels extract crisp coastline boundaries procedurally.
• 4 colorway shader presets: Instant uniform vector lerping across Cyber Cyan, Night Radar, Day Satellite, and Holo Gold without recompiling.
• WGS84 to MGRS 1-meter geodetic telemetry: Full screen-to-sphere raycasting and forward projection with tactical HUD rings.
• Orbit physics: Momentum-based interaction for smooth, natural globe rotation.

Technical Deep Dive

• O(1) vertex buffer slicing: By pre-allocating a 250K Float32Array on the GPU, scrubbing the density slider simply changes the gl.drawArrays count without expensive reallocation or bus traffic.
• Blinn-Phong reflection: Computed analytically on a billboard quad. The half-vector H = normalize(L + V) powers the specular term max(dot(N, H), 0)^shininess.
• Sobel coastline: The fragment shader samples 8 neighbors in UV texture space, computes the gradient magnitude, and thresholds it to modulate point sizes for coastline pixels.
• The Three.js precursor (Rotating Earth): Proved the visual concept in ~50 lines of GLSL fragment shader, implementing a limb-angle atmospheric halo before TerraGemini took the engine to raw WebGL.
• Screen-to-sphere raycasting for mouse interaction: Unprojects the mouse vector into world space and solves the quadratic equation |O + tD|² = R² for perfect surface targeting.

What I Learned

Writing raw WebGL is debugging with no safety net — no scene graph, no material system, no error messages beyond a black screen. But the payoff is total control: 250K points at 60fps with specular lighting that you tuned by hand. The Three.js version (Rotating Earth) proved the concept in 50 GLSL lines; TerraGemini proved it scales.