2D shader to draw representation of rotating sphere

Question

I want to display a 3D textured sphere, and then rotate it in one direction. The direction will never change, and the camera will never move. One way is to actually create a spherical mesh, map a texture to it, rotate the sphere, and render in 3D.

My question is, is there a way to display a 2D circle, that looks like a rotating sphere, with just a 2D shader.

In other words, can someone think of a trick, like mapping a texture to the circle in a particular way, to give the appearance of an in-place rotating sphere, that is always viewed from the side?

I don't need exact shader code, I'm just looking for the right idea.

Answer 1

You can perform a spherical projection in a pixel shader applied to a quad.

Assume the sphere is centered in the quad and the projection is orthogonal (it becomes slightly more difficult with perspective projection but if you pass your inverse view and projection matrices within the shader you should manage to do it, too).

Instead of querying the texture coordinates the usual way:

gl_FragColor = texture2D(texture, texCoord);

You use texCoord as the final coordinates of a spherical texture mapping and retrieve the original texture coordinates by reversing the process:

float x = 2.0 * (texCoord.x - 0.5);
float y = 2.0 * (texCoord.y - 0.5);
float r = sqrt(x * x + y * y);

float d = r ? asin(r) / r : 0.0;
float x2 = d * x;
float y2 = d * y;

Now x2 and y2 are values between -π and π. You need to “scroll” the texture according to your time variable, and normalize your texture coordinates. For a simple rotation around the Y axis:

float x3 = mod(x2 / (4.0 * pi) + 0.5 + time, 1.0f);
float y3 = y2 / (2.0 * pi) + 0.5;

Then finally query the texture, but only if we fall inside the sphere:

if (r <= 1.0)
    gl_FragColor = texture2D(texture, vec2(x3, y3));
else
    ; /* Choose something to do here */

Answer 2

If it doesn't have to be highly accurate, you could write a simple 2D displacement-map filter (something like this pixelbender shader). Then use a 2D normal-map to achieve a spherical effect. Here's an image showing the result (above) and the normal-map (below) [source]:

To give the effect of a rotating sphere, you would simply move the image (checkerboard) and mask it with a circle (or discard all the pixels outside the circle radius).

Answer 3

You might find http://www.voofoostudios.com/?p=33 useful.

Note that a sphere towards the edge of the screen won't be represented in 2D by a circle - perspective will distort it a bit.