Texture Mapping on a Sphere

To differentiate different types of terrain we could just use different colors but that gets a bit boring after a while, and doesn’t look that great. Instead let’s use textures. There’s a couple ways to go about this. We could give each tile its own hexagonal texture. It would be easy to implement. But it would make the seams between cells very obvious and would require a lot of work to make each texture. What would be easier is if we could use standard tilling 2d textures. We can get rid of most seams and, because each cell is at a slightly different position in the texture, there is some natural variation. But how do we put the texture, which is basically a 2D square, onto a sphere? If it was a cube this would be easy, each face of the cube gets a copy of the texture. But what if we put the sphere inside this cube and projected the texture from the cube onto the sphere? That’s how we’re going to do this.

First the sphere is divided into 6 regions. 

​Then we just do a flat projection on each of those faces. So how does it look with a texture?

​Looks good!

Well, at least all the lines connect… 

​So we want this to be a square, not a triangle. Also, the border of each face should align with the texture borders. Right now they start overlapping at the edges.

So how do we solve this? Remember at the beginning I said we put the sphere inside a cube. It turns out that it works much better if we put the cube inside the sphere. This does require some math though.

Let’s use the subscripts c and s for cube and sphere respectively
First, normalize all the coordinates

Code Editor

Then divide by the max value. This is the part that puts the cube inside the sphere.

​Now each coordinate goes from -1 to 1 but this would cause the texture to repeat one. So we remap the range to 0 to 1.

​Finally we choose the appropriate coordinates for each face.

Code Editor

​ Here’s how this looks

So now all the edges line up and things look much better. But it’s easy to see that the squares at the center of each face are larger than those near the corners. To solve this we need a better mapping. This post goes into the math of this next mapping, but here’s the equations. 

\[ x_s = x_c \sqrt{1 - \frac{y_c^2}{2} - \frac{z_c^2}{2} +\frac{y_c^2 z_c^2}{3}} \]
\[ y_s = y_c \sqrt{1 - \frac{x_c^2}{2} - \frac{z_c^2}{2} +\frac{x_c^2 z_c^2}{3}} \]
\[ z_s = z_c \sqrt{1 - \frac{x_c^2}{2} - \frac{y_c^2}{2} +\frac{x_c^2 y_c^2}{3}} \]

Since we’re already splitting into 6 faces we can simplify by setting z_c = 1
In this case we break up the coordinates by face before doing the math

\[ x_s = x_c \sqrt{1 - \frac{y_c^2}{2} - \frac{1}{2} +\frac{y_c^2 }{3}} \]
\[ y_s = y_c \sqrt{1 - \frac{x_c^2}{2} - \frac{1}{2} +\frac{x_c^2}{3}} \]
\[ z_s = \sqrt{1 - \frac{x_c^2}{2} - \frac{y_c^2}{2} +\frac{x_c^2y_c^2}{3}} \]


\[ x_s = x_c \sqrt{ \frac{1}{2} - \frac{y_c^2}{6}} \]
\[ y_s = y_c \sqrt{ \frac{1}{2} - \frac{x_c^2}{6}} \]
\[ z_s = \sqrt{1 - \frac{x_c^2}{2} - \frac{y_c^2}{2} +\frac{x_c^2y_c^2}{3}} \]

Solving for x_c and y_c so we only need 2 equations.

\[ x_s = x_c \sqrt{ \frac{1}{2} - \frac{y_c^2}{6}} \]
\[ y_s = y_c \sqrt{ \frac{1}{2} - \frac{x_c^2}{6}} \]

Now solve for x_c and y_c
https://www.wolframalpha.com/input/?i=a+%3D+x+*+sqrt(1%2F2+-+y%5E2%2F2++%2B+y%5E2+%2F3),++b+%3D+y+*+sqrt(1%2F2+-+x%5E2%2F2+%2B+x%5E2+%2F3),+solve+for+x,y
Rather complicated, but some manual simplifying gives this.

After x_c finding y_c is easy.

​As before x_c and y_c are currently from -1 to 1, so rescale to 0 to 1

​There’s still some distortion, especially near the corners. But overall each square is about the same size.

The final thing is giving each hex its own texture. Fortunately, this part is simple. For each type of terrain we want we need a different texture. This texture is then applied just like the test pattern above.

Finally, just like with cell colors, each cell chooses a texture and then the texture is blended between cells.