Eight codebases, four rendering pipelines, one recurring problem: how to render geographic datasets interactively on a 2D screen while balancing projection distortion, GPU overhead, and garbage collection pressure.

This isn't a single project that grew — it's a problem I kept returning to. Every few months a new constraint surfaced: a new projection to support, a dataset too large for Canvas 2D, a flight path that exposed Mercator's lies about Great-Circle distance. Each time, the "correct" rendering approach turned out to depend entirely on the tradeoff being prioritized — fidelity, interactivity, or raw throughput.

The result is four distinct paradigms, each with its own rendering pipeline, performance ceiling, and set of hard-won tricks. Canvas 2D handles thousands of points with zero dependencies. Leaflet gives tile-map context but locks you into Web Mercator. D3 projection mutators let you morph between any two projections but fight you on the sphere-to-plane seam. WebGL removes the frame-rate ceiling entirely — at the cost of writing every vertex buffer and shader by hand.

Rendering Paradigm Matrix

Paradigm 1: Canvas 2D & Continuous Projection Morphing

Canvas 2D was the starting point because it's the fastest path to rendering geodata with zero dependencies beyond d3-geo — no build step, no WebGL context, no framework lock-in. The challenge was sustaining 60fps while morphing between two projections without triggering garbage collection pauses from per-frame object allocation.

• Dot Matrix Globe: Plots ~8,000 Poisson-disc points across Natural Earth TopoJSON landmasses stored in typed Float32Array buffers with dynamic back-face culling ($z > 0$).
• Globe → Map Transform: Morphs between orthographic and equirectangular projections via continuous blending factor $\alpha \in [0, 1]$ and an adaptive superellipse boundary ($n: 2 \to 32$).

Paradigm 2: Leaflet & Spherical Geodesic Telemetry

Web Mercator projects spherical meridians as parallel lines, making straight flat segments deviate significantly from true Great-Circle shortest paths. This high-contrast E-Ink flight deck visualizes real-time spherical slerp geodesics, continuous velocity modulation, and cartographic path divergence.

$\Delta\sigma = 2 \arcsin\left(\sqrt{\sin^2\left(\frac{\Delta\phi}{2}\right) + \cos\phi_1\cos\phi_2\sin^2\left(\frac{\Delta\lambda}{2}\right)}\right)$

• Continuous Velocity & Mach Scrubber: Real-time speed modulation from $500\text{ mph}$ (subsonic aviation) to $25,000\text{ mph}$ (lunar skip re-entry) with live Mach number calculations ($M = v / 767.26$).
• Spherical Slerp vs. Mercator Linear Chord: Interactive toggle revealing the $+1,078\text{ mile}$ ($+18.15\%$) path error and $1,857\text{ mile}$ lateral separation between true Riemannian spherical geodesics and naïve flat Mercator straight lines.
• High-Contrast E-Ink & NASA Dark Themes: Scoped GPU-accelerated CSS tile filter pipelines with active camera tracking and real-time heading vector alignment.

Paradigm 3: D3 Unfurling & Projection Mutators

Three distinct approaches to the geometric seam where visible front-face coordinates meet occluded back-face data during an unfold transition.

• GeoGenesis (React 1,053-line Canvas): Full projection laboratory featuring frame-by-frame Pythagorean limb departure ($\sqrt{R^2 - y^2}$), dynamic horizon clipping ($\alpha(t) = \frac{\pi}{2}(1+t)$), multi-projection topology mutators (Winkel Tripel with 4th-order Taylor sinc guards and Mollweide equal-area via Newton-Raphson Kepler iteration), 24-bit bijective RGB country hit detection ($<0.05\text{ ms}$), and Great-Circle Haversine SLERP flight arcs.
• Interactive Globe (344 lines): Solves hidden point emergence using the Pythagorean limb relation, sliding occluded points from the sphere's silhouette edge to their equirectangular slots.
• GeoGenesis (Angular 21): Implements d3.geoProjectionMutator to mutate the projection pipeline per frame with signal-driven zoneless change detection.

Paradigm 4: WebGL & Fragment-Level GLSL Shaders

When point density exceeds 50,000, CPU-side Canvas 2D loops experience frame drops. Offloading calculations to GPU fragment shaders enables rendering hundreds of thousands of points, raytraced specular ocean glints, and procedural coastlines at 60fps.

• Rotating Earth (Three.js + GLSL): Land masses defined via UV-space dot matrix, coastlines extracted with a $3 \times 3$ Sobel edge-detection filter, and view-angle limb falloff producing atmospheric halo in ~50 lines of fragment shader.
• TerraGemini (Raw WebGL): 918 lines of handwritten WebGL with zero Three.js abstraction. Features $O(1)$ GPU vertex buffer slicing from 50k to 250k points without PCIe reallocation, raytraced Blinn-Phong specular ocean reflection with scrubbable 3D solar vector, and WGS84 to MGRS 1-meter geodetic telemetry with screen-to-sphere raycasting.

Cross-Paradigm Benchmark

How the four rendering approaches compare across performance, complexity, and capability:

What Eight Codebases Taught Me

The biggest lesson wasn't about any single rendering technique — it was about the tradeoff surface itself. Canvas 2D is trivially debuggable but hits a hard ceiling around 10,000 animated points. Leaflet solves the tile-context problem but Mercator distortion makes every geodesic path a lie. D3's projection algebra is mathematically beautiful but the unfurl seam — where occluded back-face data meets visible front-face coordinates — requires frame-by-frame geometric surgery. WebGL removes every CPU bottleneck and introduces every GPU debugging nightmare in exchange.

If I were starting fresh, I'd reach for Canvas 2D for anything under 10K points, Leaflet for any work requiring real-world geographic context, and WebGL for anything where point density or visual fidelity matters more than development speed. D3 projection mutators remain the only option when you need to morph between arbitrary projections — nothing else in the ecosystem does that.