Darkwind Media Blog

We recently finished up our skeletal animation tech demo, and I wanted to go into some of the details behind it.  One of the first things you’ll probably notice is that it’s not simply showing off the skeletal animation capabilities of Luster.  We ended up also using normal maps, scrolling UV texture animation, several shadow techniques and Flash/Luster communication.   And all of this runs in a web browser (this particular demo requires Shader Model 3).

The main questions we get are “How did you get the Arthas model?” and “How did you animate him?”  To answer the first question, we’ll go back to the beginning of the project.   We had been thinking about possible Luster demos for a while.  We wanted something that would not only show off the features of Luster, but get people talking about it.  Around this time everyone in the office had renewed their World of Warcraft accounts for a bit so we could play during our spare time.  Matt came up with the idea to use World of Warcraft models in Luster somehow.  I immediately opened up the WoW Model Viewer to see if there were any model export options.

Not only were we able to export models (with textures and skeletons intact), but the WoW Model Viewer could automatically grab a character’s gear from the Armory and dress the model up appropriately.  One of our initial tests was the get a character from the Armory and try to get it into Luster.  To do this we exported from the WoW Model Viewer in the Milkshape3D format.  This export also provided us with the textures for the model we exported.  Once in Milkshape we exported the model to FBX, which allowed us to get the model into Maya.  Getting the model into Maya was important for two reasons: 1) We could go from Maya to the Ogre3D Mesh format which is supported by Luster and 2) I actually know how to use Maya.

Once we figured out the pipeline, we scoured the WoW Model Viewer for more characters and models to import.  The sample application in Luster grew from one random character to having several characters from the Armory, Arthas, Illidan, a huge protodrake, Sylvanas and a boss from Naxxramas.  We added some stationary and dynamic lights and per-pixel lighting (with normal maps), which made the models look great, but something was definitely missing.  The models were too static.  They had no sense of life to them, no purpose.  It was at this point that we tried to extract the animation data from the WoW Model Viewer, but it doesn’t support animation exporting.  We could export different poses, like a single frame of an animation, but not the whole animation.  We did find some tools to extract the .anim files from World of Warcraft’s .MPQ content files, but these were not useful to us in their raw form.

Pretty disheartened by the fact that we couldn’t extract any animation data, I went into Maya to play around with the models we had.  After realizing that the models already had skeletons and the vertex/joint bindings were intact, I started animating an arm here and a head there.  It dawned on me that I could probably create my own animation on one of the characters and incorporate that into the application, maybe as an Easter egg of some sort.  I decided to use Arthas for a few reasons.  First, he is from the latest expansion and therefore has much more detail than many of the older models.  Second, he has some animated textures (his eyes and sword for instance) which look great.  Third, he just looks badass.  After the Arthas animation was complete, we decided to focus soley on that particular model since the animation process worked so well.

The controls for the animation were created in Adobe Flash.  The resulting .SWF file was imported into Luster and incorporated into the project.  The Flash movie and Luster communicate back and forth.  When you click on the play button, Flash tells Luster to start the animation.  Luster then tells Flash to update the scrollbar as the animation plays.

The finishing touches were to add a gradient background and some shadows.  I did the main ground shadows using a regular shadow mapping technique.  The self-shadow implementation was done by Brian and used Variance Shadow Maps (VSMs) to produce soft shadows.  The normal maps on the model were generated from the original textures using the NVIDIA Normal Map Filter Photoshop plugin.

-Chris