Hey, I'm Simon and I made a game!! :)
Support me: BUY & Demo on Steam

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?

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:

And he described that Half Life 2 did it already for special monsters like this … ant-thingie (it glows from the inside):

For more details, you can read the original comment here.

Update 2
Daniel has played around using the idea of the WoW balloon:


17 thoughts on “World of Warcraft – Balloon

  1. Simon

    I would say the main difference is, that you have no texture when using fresnel, isn’t it? As far as i know, you only use one color and the fresnel will use this color where it occurs. But with the lit sphere tech you have the chance to not only define a gradiant, even more you can use a real texture and define the left/right/top/bottom color of the “fresnel” effect. That’s what i would suggest.

    Reply
  2. Jordan Cain

    Huh. I made this same effect for an earlier environment. I had these big round paper lights and was messing around in the UDK material editor for awhile.

    I used a camera vector piped into the UV coords of the emissive texture, and added that to an emissive fresnel function. I also made a lerp between two emissive colors to have greater control over intensities/hues of the glow.

    Later on, I stumbled on Jordan Walker’s Bathhouse scene and noticed he used a very similar method for his paper lanterns, except that he added a fresnel function to his diffuse material as well.

    Neat to see how other people create the effect as well, though! :)

    Reply
    1. Simon

      You’re right! I already knew the bathhouse scene but now i see that he also had this nice effect. Thanks for mentioning!

      Feel free to drop a screenshot of your lamps :)

      Reply
  3. eRiC Werner

    To do this with really low tech one could make a balloon with inverted faces as background, have all the ornaments and borders straigt in front with alpha and the glow set to cam in the middle. I can imagine this would work too.

    On the other hand I remember we had an environment map setting on the shaders in Nebula1 at Project Nomads.
    That would map each pixel according to the viewing direction. A face pointing directly at you shows the env map center, as it bends to a direction the mapping shifts there in UV space too. So if you mapped a glow to a sphere: It looked the same from any direction.

    Reply
    1. Simon

      Your low tech approach definitaly should work – of course it needs more geometry and you have to be able to define faces which always are camera oriented (a feature not every engine supports….no idea why not :,) ).

      Oh nice to hear that you worked on Project Nomads. Then you might know Bernd Diemer, right?

      Reply
  4. Charles

    Hi,

    To do this the most simple way for me is to use an inverted fresenl like this : half fresnel = pow(saturate(dot(normal, viewDir)),sizeoftheglow);

    Then you’ll just have to mask it by a texture :

    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 you can see it in UE4 :

    [img]https://dl.dropboxusercontent.com/u/1812933/IllumFresnel.jpg[/img]

    With this you can control the size of the glow and color the result with a texture and add extra light/color with the bias.

    First time I saw this effect was in Half-Life 2 episode 2 for the Antlion

    [img]http://img3.wikia.nocookie.net/__cb20071014171816/half-life/en/images/3/3e/AcidAntlion.jpg[/img]

    You can see here the glowing coming from the inside of the beast !

    I think they used that same technique in Bioshock Infinite on the big balloon.

    This how I would have do it myself :).

    Nice blog I really like it !

    Reply
    1. Simon Post author

      Thanks man! I thought about inverted Fresnel sometime but didn’t have an idea how to do it – til now ;) I’ll pack you code and the pictures as an update to the article – for all the people not reading the comments :)
      Glad you like my blog! Oh and i saw that you did space ships for Endless Space – Cool! I do Space Ships too for X Rebirth :)

      Reply
      1. Charles

        You’re welcome :).

        I’ve made a little mistake in the code at this line :

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

        It’s not bias+color but bias*color.

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

        Sorry for that !

        Yeah I did somespace ships was a good time :). X rebirth ? Awesome :).

        Thanks for adding my thought to the article !

        Reply
    1. wolf96

      but this is effect is not great because it’s not stylize(like cartoon), so if used such like cartoon stylize,will still use the look up texture tech.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *