# How do I wrap an image around a sphere?

Ideally I'd like a reference of the math involved, so I can start breaking down the problem.

The simplest thing I can deduce about this problem is that the part of the sphere that the user is currently seeing is a circle on the image that is located somewhere on the image, and the rest of the coordinates on the image are somehow mapped to 3D with a linear transformation.

Consider the following example:

If I rotate the sphere theta degrees on the Y axis (up/down) to the left, the sun will come close to the center of the sphere and the tree that is currently positioned in the center will be shifted to the left as the three on the left currently is. You can consider that the volume of the image is exactly enough to have the image completely wrap the sphere.

• Could you add an image of what you're trying to achieve? Is quite unclear to me for now... Apr 8, 2015 at 15:50
• @AlexandreVaillancourt edited, if still unclear I'll try to have a better drawing :D Apr 8, 2015 at 16:06
• Yes, this is just basic UV mapping. Apr 8, 2015 at 16:09
• Just googled it , exactly what I was looking for. What's the best way to learn about it? Apr 8, 2015 at 16:10
• Code it :P Find yourself a rendering engine, program it and render it, you'll see how it all works together! Apr 8, 2015 at 17:05

Part of what you are looking for is an understanding of map or sphere projections.

http://en.wikipedia.org/wiki/Map_projection

A rectangle is not a sphere. (I know it's obvious, but useful to state.) To map a rectangle onto a sphere, you have some choices about how to do it. Your picture looks like it's an "equirectangular" mapping, which maps vertical position to latitude and horizontal position to longitude, like a classic wall map.

And this format is pretty standard for sphere pictures and sky environments, and is what @Dudeson's shader is doing.

But! It's valuable to know that it's a choice, and there are other projections. For example, "fisheye" projections like the one below are created by some cameras and are standard for planetarium projection images.

Expressed as a GLSL fragment shader (untested):

const float M_1_PI = 1.0 / 3.1415926535897932384626433832795;
const float M_1_2PI = 1.0 / 6.283185307179586476925286766559;

uniform sampler2D texture1;

varying vec3 v_normal;

void main(void)
{
vec3 n_normal = normalize(v_normal);

vec2 texture_coordinate;
texture_coordinate.x = 0.5 - atan(n_normal.z, n_normal.x) * M_1_2PI;
texture_coordinate.y = 0.5 - asin(-n_normal.y) * M_1_PI;

gl_FragColor = texture2D(texture1, texture_coordinate);
}

• thanks for the answer I appreciate it, but I prefer words for an answer since the function over the coordinates is hard to understand like that Apr 28, 2015 at 8:29