Load and Animate an MD2 Model in Away3D

The Backstory

Nearly every 3D Flash project I’ve recently developed has needed at least one 3D model for something. So my next logical Away3D adventure was exploring model loading.

The Description

Just looking over the list of loaders in the away3d.loaders package is impressive.  Seeing all those supported types right out of the box just blew me away.

I’ve found that the MD2 format, while super out-of-date, is one of the best choices for model formats in Flash 3D engines. It has two main advantages over other formats: simplicity and super compact files.

MD2 is a super common file format and most 3D modeling software can export it without any additional plug-ins or converters.

The Classes

There is only one class you’re gonna need to use an MD2 model: MD2. It has loading logic and events built-in as well as a publicly accessible parser for embedded data. After loading or parsing it returns an Object3D so you can throw it in a scene, skin it, animate it or whatever.

The Setup

You’re gonna need two things: a 3D model in the MD2 file format and a material. For this tutorial I’m using Boba Fett from my weird AR video. Don’t worry, he’s provided with the example code later in the post.

The How-To

First things first, you need to decide whether you want to dynamically load your model and material at runtime, or embed them.  I’m going the embed route because it’s easier for demonstration purposes.

There are two steps for displaying an MD2 model:

1. Parse the file
2. Apply the material
3. Add the model to the scene

Pretty freakin basic. Here’s what it looks like in code:

var bobaFett:Mesh = Md2.parse(Cast.bytearray(new MD2Tutorial.bobaFettModel()));
bobaFett.material = new BitmapMaterial(Cast.bitmap(new MD2Tutorial.bobaFettMaterial()), {smooth: true});
this.view.scene.addChild(bobaFett);

As far as animation goes, well, that’s a different beast and I’m only going to touch on it slightly.

Basically, MD2 animation is stored as an array of frames. Each frame contains a copy of the model with it’s verticies moved. So, animation is achieved by swapping the rendered verticies with the ones in a particular frame. Each frame also has a name in this format: prefix + frame number. This name is used to access and identify multiple animations across a series of frames.

To play animation in an MD2 file you need to have prior knowledge of what animations are provided with that model.  Boba Fett has # different animations with these prefixes:

• stand
• run
• attack
• pain1
• pain2
• pain3
• jump
• flip
• salute
• taunt
• wave
• point
• crstand
• crwalk
• crattak
• crpain
• crdeath
• death1
• death2
• death3

So, armed with that knowledge, all we have to do is one line of code to start playing one of those animations.

bobaFett.play(new AnimationSequence("run", true, true, 8));

Pretty simple (except for my trainwreck of an explanation). If you combine the loading and animation you get code that should look similar to this:

var bobaFett:Mesh = Md2.parse(Cast.bytearray(new MD2Tutorial.bobaFettModel()));
bobaFett.material = new BitmapMaterial(Cast.bitmap(new MD2Tutorial.bobaFettMaterial()), {smooth: true});
bobaFett.play(new AnimationSequence("run", true, true, 8));
this.view.scene.addChild(bobaFett);

The Example

Here’s a quick example using the code from above.

The Code

Download the code for this example here. Keep in mind that this was built using Flash 10, so if you’re using Eclipse or Flex Builder then you’ll have to change some stuff in your project before it will compile.