GeoGenesis

The sphere-to-plane problem has haunted cartographers for centuries, but for interactive rendering, unfurling the globe in real-time is the hardest part. You can easily draw a 3D orthographic sphere, and you can easily draw a flat equirectangular map, but bridging the two requires continuous geometric surgery on the fly. As part of my broader Cartography project exploring rendering paradigms, I wanted to build a seamless transition without relying on hacky cross-fades or artifact-ridden clip interpolation.

GeoGenesis exists as two distinct codebases because while the projection math is framework-agnostic, the rendering integration is not. The first variant is a 1,053-line single-file React component built around a raw HTML5 Canvas 2D render loop, proving that high-performance continuous morphing is possible without WebGL or Three.js abstractions. The second variant is an Angular 21 implementation that leverages signals and zoneless change detection to drive D3's projection pipeline.

What It Does

• Continuous unfurl from 3D globe (0%) to flat map (100%) with Pythagorean limb departure
• 4 projection topologies: Orthographic, Plate Carrée, Winkel Tripel, Mollweide
• 5 geodesic flight presets with Great-Circle Haversine SLERP arcs
• 24-bit bijective RGB country hit detection (under 0.05ms)
• 4 CRT phosphor color palettes

Technical Deep Dive

• Pythagorean limb departure: $\sqrt{R^2 - y^2}$ — sliding occluded points from sphere silhouette to equirectangular slots
• Dynamic horizon clipping: $\alpha(t) = \frac{\pi}{2}(1+t)$
• Winkel Tripel: Multi-projection topology mutator built with 4th-order Taylor sinc guards
• Mollweide equal-area: Solved via quadratic Newton-Raphson Kepler iteration in $\le 4$ steps
• Angular 21 variant: Uses d3.geoProjectionMutator with signal-driven zoneless change detection for frame-by-frame projection blending

What I Learned

The unfurl seam — where occluded back-face coordinates emerge into the visible front-face — is the hardest problem in this project. Every projection handles it differently, and none of them handle it cleanly. When you flatten a sphere, the points that were hidden behind it have to suddenly decide where they belong on the new 2D plane. You have to write specific mathematical logic to drag those hidden vertices across the limb boundary without them snapping or streaking across the screen. It's a continuous problem of mathematical classification that turns out to be far more complex than just interpolating between two shapes.