Things on a Heap

A Collection of Programming Ramblings by chjdev

Rust + Wasm + Webgl Global Population



The Data

Lat/Lon to XYZ

Since the data is in latitude/longitude format it’s pretty easy to convert them to XYZ coordinates using some trigonometry.

But first of how does the coordinate system work in WebGL?

WebGL Coordinates

Device coordinates, i.e. WebGL will normalize all axis to in the shader and use that to draw pixels to the viewport. The coordinate system then looks like this:

device coordinates

With that out of the way lets find out our coordinates. Latitude and Longitude basically describe a three dimensional polar coordinate system with the distance set to . Put a different way they’re describing vectors of length that point from the origin to a point on the surface of a sphere:

point on sphere

In order to convert this representations to coordinates we can use for WebGL we’ll use some trigonometry and start out to find the coordinate and the radius . “Radius?” I hear you asking, well we’ll treat the coordinates as points on circles drawn on a sphere that move from top to bottom. A graphic makes probably more sense:

sphere slices

Ok time to calculate. Since everything is normalized to it’s actually pretty easy. Since we know , is simply and is , easy.


Now lets find out and . To that let’s switch our perspective from the plane to the plane, i.e. instead of looking at the sphere from the front, we’ll look at from the top, so again is and is .

And that’s it, we moved from latitude/longitude to for our vertex! Now you can do with it whatever you want, rotate it, move it, you do you.

Drawing circles

Recursive callbacks

You have a question or found an issue?
Then head over to Github and open an Issue please!