Today we’re James Bond and investigate how the world works. Well, the world in a slightly smaller scale. On a display. In a game. But nevertheless, we’ll discover awesome stuff which was created by Q. This is related to the Diablo Case but deserves its own paper. It’s all about the rotating sphere you see here:
+++ TOP SECRET +++
I could reveal the identity of Q! It is MikieX! He’s the mastermind behind all this and asked how we think it was done. My guess: Texture animation or a sphere – squeezed like when you press any air out of a ball. Rolling the UVs over the flattened sphere would look “round”.
But that would be too easy for Dr. MikieX! He used shader tech for it. Before we dive into this, some background information:
On the left you see a UV space where normally texture space is associated with a polygon:
It doesn’t matter if the coordinates are called U&V, X&Y, James&Bond or: R and G! Let’s imagine the UV space as colors: The R channel could be used as U coordinate and the G channel as V. If you add a red and a green gradient (both reaching from 0 to 255) you end up with what you can see to the right.
It means, this time we use colors to associate texture space and positions within the UV space. Of course, your shader has to accept such a texture as UV input. And of course support UV panning for animated results. Here are some examples (top: UV input texture bottom: outcome):
 |
 |
 |
 |
 |
 |
 |
 |
- Just a unmodified UV input texture. Nothing happens.
- Smudged around with Photoshop. The textures “floats” along the smudge.
- A smaller version of the whole UV input texture. It’s a screen-in-screen effect.
- Our goal: a spherical UV input texture. Below you can read more about it.
If you create a sphere in 3Ds Max you already get a perfect UV layout for our purpose. You just have to assign the UV input texture to the sphere and bake “a photo” of it into a texture (the blue plane is my baking plane).
Q: “That’s it, Mr. Bond.”
Of course you should create a black/white mask to cut out the corners of the texture but since we only need the R and G channel, this mask could be stored in the B channel of the texture.
+++ IMPORTANT +++
Important fact (thx to sinistergfx) if you want create the base texture with Photoshop. You have to set the gradient smoothness to 0%. If not, the gradient isn’t linear and this leads to weird stretching artifacts. I made an example how different the texture looks with 100% and 0%:
 |
 |
Thanks to alfalfasprossen for his help when UDK trolled me again.
Oh and i got a nice link from Tamarin where he made this effect with Unity. With sliders!