Balloon | Simonschreibt.

Especially Mists of Pandaria has absolutely stunning assets. One of the most beautiful ones, at least in my eyes, is the hot air balloon which brings you to Pandaria. Besides the fact that it looks great, it has an very interesting graphical feature: the yellow “glow” in the center of the balloon is at the center at any time. Independent from your viewing angle! This means, the “hot” yellow area can’t just be painted on the surface of the balloon. But how is this possible?

Source: wow-screenshots.net

My first suggestion was, to create a shader with a red Fresnel effect. This would “surround” the whole balloon with this red vignette and with a mask you could “cut” out the patterns.

Of course, I was wrong. First of all, with the help of DirectX Ripper and the WoW Modelviewer I found out interesting stuff. Here the textures:

Left: diffuse texture Right: alpha channel of diffuse

Source: WoW

The first one is like expected. BUT the second is interesting. This is the gradient the use for this effect I’m describing! But how? I checked the model of the balloon in the model viewer.

Bad news: the cool effect isn’t visible there. Bad News #2: I thought the big quad in the wireframe gives a nice hint how they did it, but it’s wrong…
…this is how the balloon looks from near distance. There’s a shiny glow. And unfortunately this is why they needed the quad for. In the lower part of the next image, we’re “sticking” right in the balloon and there you can see that there is just a really big glow texture.
Finally: Good News! Thanks to Neox, we all will know the solution in some seconds. Let me explain: The technique they (Blizzard) used, can be called Lit Spheres Shading. Which seems to be “just” a remapping of colors (like the Gradient Map in Photoshop). But during the Gradient Map is just a 1D gradient (left to right), the Lit Sphere Shader uses a 2D texture (seen above, left to right, top to bottom). If you don’t understand what i mean, just checkout the thread from Peppi. He also wrote this awesome shader you can download and try out by your own.

As far as I understand, they use the normals (screen space) of the object to map the colors. The more the normals “look” away from the camera (at the sides of the sphere), the outer colors are grabbed from the texture. Of course, the colors in the center of the texture are used the more the normal “looks” to the camera.
Here is another example. The plane is rotating and so the normal also points to different directions. The results are the different colors.

And here comes the result in 3Ds Max with the shader from Peppi. An interesting fact is, that the texture center moves, the more you move the sphere to one direction. And this my friends, happens also in World of Wacraft.
So now we have only one last question: How did they mask out the painted patterns? My suggestion: they used the mask stored in the alpha channel of the diffuse map. Most of the red balloon fabric is black in there and the patterns are white. Seems logical to me. But who knows? Maybe they have another secret.

Update 1

Charles mentioned another really interesting way to do this effect: Inverted Fresnel. Even better: he provided shader code and images! Awesome! So here’s the code which not only gives you the iFresnel effect but also supports a mask:



half fresnel = pow(saturate(dot(normal, viewDir)),sizeoftheglow);
half mask = tex2D(mymask,uv).r; // mask stored in a the R channel

half3 color = half3(mycolor); // 0.4,.02,0.01 for example

half3 selfillumfresnel = fresnel* color+(bias* color)*mask;

Here’s his example out of the UE4 engine: