How do I wrap an image around a sphere?

Question

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.

Answer 1

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.

Answer 2

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);
}