Thomas Spina | @GitHub @LinkedIn @X

Yu Cheng Li | @Github @LinkedIn @X

Introduction


My colleague and I embarked on a coding journey to build a 3D geographic globe web application. Since I was responsible for much of the frontend, the most of the main globe visualization fell to me. One of the first challenges I encountered was with the data source. How could I render a high-definition map on a globe using freely available data? Virtually all useful geographic data I found—detailing landmasses and other features—was formatted in longitudes and latitudes, a fundamentally 2D coordinate system. Yet I needed to render this in 3D space. Fortunately, a sphere's surface is (arguably) a 2D manifold wrapped in 3D space, which I thought suggested that accurately transforming this data would be challenging but feasible.

This article details my technical approach to converting flat GeoJSON coordinates into 3D meshes that could be rendered on a digital globe using Rust and WASM. I would like to note that much of the computational geometry and 3D mathematics involved was entirely new to me when I started this project. Therefore, this writeup represents my understanding and implementation approach, which may contain errors or suboptimal solutions. I would welcome any corrections, suggestions, or alternative approaches from readers with more experience in these domains.

Full code for everything can be found in the code repo in the sources (in the repo the algorithm is mostly defined in the mesh_generator.rs file).

Background and Motivation


Maps have always faced fundamental challenge: representing our spherical planet on a flat surface. Traditional 2D maps inevitable distort either shape, area, direction, or distance due to this dimensional mismatch [1]. While tools like Google Maps and OpenStreetMap do exist and are quite useful, they do introduce the issue of distortion however as they are 2D tools. A great website to see this distortion in action from the Mercator projection map is thetruesize.com. I would recommend giving it a look.

3D globe visualizations solve many of these problems by representing Earth in its natural spherical form. This approach is particularly valuable for applications involving:

Although this post describes just one component of a larger project, my motivation to solve this specific challenge—rather than simply using detailed earth imagery for the globe surface—stems from both technical curiosity and practical necessity. I also saw this as an opportunity to deepen my understanding of computational geometry and 3D mathematics.

Technical Foundation