Lumpy Potato Geoid Visualizer

Overview

I was introduced to my favorite map of the PCC Geomatics program in my very first course, Maps and Geospatial Concepts, called nullschool earth — a visualization of global weather conditions forecast by supercomputers and updated every three hours. It was the first Three.js and WebGL globe project I had encountered, and it just ran so smoothly and loaded all these myriad weather data layers so quickly. That same PCC course is also the first to introduce the equipotential surface of the Earth known as the geoid, which was immediately mind-meltingly interesting to me. There wasn’t much in the way of visualizations to aid in understanding the concept and certainly nothing, at least that I ever encountered, that offered any level of interactivity.

These two key pieces — the low compute resource cost and web-friendly nature of Three.js and WebGL rendering — along with the need to have some kind of tool for visualizing and experiencing the geoid vs. ellipsoid relationship, led into a long weekend project designed to create this missing tool and test a coding agent’s ability to build a website. Aside from scant amounts of HTML and CSS for blogs in the early 2000s, I had zero web development experience, and selected GitHub Copilot within VS Code to assist in designing the website. This was the first time I integrated AI into a project workflow, and the output, given my unfamiliarity with web design, was impressive. Though I’m sure any web designer reviewing the code would have a great deal to say about its structure and volume, I applied lessons about AI project workflow on future projects.

The final output is an interactive 3D web visualization that renders Earth’s geoid with a vertical exaggeration from a reference ellipsoid, letting users distort the difference between how we model gravity (the geoid) and how we mathematically approximate Earth’s shape (the ellipsoid).

The name comes from what the geoid actually looks like when rendered at exaggerated vertical scale: a lumpy, asymmetric potato. Built agentically over four days and hosted on GitHub Pages.

The Science

The geoid is an equipotential surface of Earth’s gravity field, the theoretical shape the ocean surface would take if it were perfectly calm and extended through the continents. It’s lumpy because mass is distributed unevenly inside the Earth.

The ellipsoid (specifically WGS84) is a smooth mathematical approximation, an oblate spheroid slightly flattened at the poles. It’s what many projected maps reference as well as GPS coordinates.

The difference between them, geoid undulation or N value, ranges from about −106 meters (near India?) to +85 meters (near Iceland?). This difference matters enormously for precision leveling, vertical datums, and any application where “height” needs to be physically meaningful.

Implementation

Data Pipeline (Python + GDAL)

EGM2008 geoid undulation data was downloaded from the NGA (National Geospatial-Intelligence Agency) in grid format. Python and GDAL were used to:

• Resample the global grid to a workable resolution for web delivery
• Export the undulation values as a JSON height field consumable by Three.js
• Normalize the range for display with configurable vertical exaggeration

3D Visualization (Three.js / WebGL)

The frontend uses Three.js to render two sphere geometries:

1. Ellipsoid: a smooth SphereGeometry representing WGS84
2. Geoid: the same sphere with vertex positions displaced radially by the undulation values loaded from the data pipeline output

Users can rotate, zoom, and toggle between vertical exaggeration levels of 1x, 5x, 10x or use a slider — when set at 1x, the subtle ~200-meter variation in undulation can be amplified enough to see clearly. The UV sphere appears as the ellipsoid, wrapped in Earth Blue Marble and Earth Night NASA composite images, served via UNPKG, a free service billing itself as a fast, global content delivery network for everything on npm. Users can toggle the day/night UV wraps, major and minor graticules, the axial tilt of the earth, and play/pause the Earth’s rotation as well as control its RPM with a slider.

Reflections

The core technical challenge was bridging the Python/GDAL data preparation pipeline with the Three.js runtime, specifically getting the EGM2008 grid resampled and indexed in a way that maps cleanly to Three.js’s UV sphere vertex ordering.

Building it in four days required strict scope discipline. The result is minimal but complete: the math is right, the data is authoritative, and the interaction makes an abstract geodetic concept tangible.