# Rust + Wasm + Webgl Global Population

**–IN PROGRESS–**

# Setup

# 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 \([-1.0; 1.0]\) in the shader and use that to draw pixels to the viewport. The coordinate system then looks like this:

With that out of the way lets find out our \(XYZ\) coordinates. Latitude and Longitude basically describe a three dimensional polar coordinate system with the distance set to \(1\). Put a different way they’re describing vectors of length \(1\) that point from the origin \([0, 0, 0]\) to a point on the surface of a 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 \(Y\) coordinate and the radius \(R\). “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:

Ok time to calculate. Since everything is normalized to \(1\) it’s actually pretty easy. Since we know \(\lambda\), \(Y\) is simply \(\sin(\lambda)\) and \(R\) is \(\cos(\lambda)\), easy.

Now lets find out \(X\) and \(Y\). To that let’s switch our perspective from the \(XY\) plane to the \(XZ\) plane, i.e. instead of looking at the sphere from the front, we’ll look at from the top, so \(X\) again is \(R * \cos(\phi)\) and \(Z\) is \(R * \sin(\phi)\).

And that’s it, we moved from latitude/longitude to \(XYZ\) 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!

Then head over to Github and open an Issue please!