Creating animated glTF characters with Mixamo and Blender

Image of a figure in an online model viewer.
**End result:** Rigged glTF 2.0 character with multiple animation clips.

Mixamo, by Adobe, provides an easy way to get started with character animation:

  1. Automatic character rigging. *Upload a 3D model, place a few markers on joints, and you’ve got a rigged character. *Note: Mixamo only supports humanoid characters.
  2. Library of customizable animations. Mixamo’s library contains thousands of free animations, any of which can be used with their default characters or any model you upload.

Mixamo exports characters and animations to COLLADA or FBX. For game engines like Unity, those exchange formats work just fine: the engine will convert everything to an optimized runtime format when building your game. For WebGL and WebVR, developers and artists don’t have the luxury of a “build” step: models need to be optimized before loading in libraries like three.js and BabylonJS.

glTF (GL Transmission Format) offers a web-friendly runtime format that suits this use case well. In this post, I’ll go through my workflow using Mixamo to rig, animate, and export a character to glTF.

1. Create a rigged character

Mixamo makes this step incredibly easy. Log in, click Upload Character, and follow the step-by-step instructions. Characters rigged outside of Mixamo are probably not going to work with their animation library so if you want that level of control, consider reading this tutorial instead.

Once you’ve found or uploaded a model, download it — with no animations selected — choosing Format = FBX, Pose = T-pose .

When downloading a base character from Mixamo, choose **Format=FBX** and **Pose=T-pose**.
When downloading a base character from Mixamo, choose **Format=FBX** and **Pose=T-pose**.

2. Download animations for the character

Select one animation at a time in Mixamo, and download each in FBX format. Don’t include the skin, because we already have that in the base character file. These files can be reused for multiple characters.

Export animations from Mixamo in FBX format, without skins.
Export animations from Mixamo in FBX format, without skins.

3. Import everything into Blender

NOTE: These instructions were written against Blender 2.78c. The steps, especially the settings for importing FBX files, are different in older versions of Blender.*

We need to import all of the FBX files — our character and each animation — into Blender. Let’s assume you have a base character and two animations:

One at a time, we’ll add these to the Blender scene:

When importing the FBX, select “Manual Orientation” under the “Main” tab.
When importing the FBX, select “Manual Orientation” under the “Main” tab.
When importing each FBX, select “Automatic Bone Orientation” under the “Armatures” tab.
When importing each FBX, select “Automatic Bone Orientation” under the “Armatures” tab.
The base character should have name like “Character”, and the animation should be called “TPose”.
The base character should have name like “Character”, and the animation should be called “TPose”.

At this point, you should see your model and some skeletons in various poses, but no animation playing yet. If something has gone wrong, reset the scene and import each file again. Or, find more detailed instructions on this step in one of the Youtube videos at the bottom of this post.

4. Preview the character animations

Before we export anything, let’s try previewing each animation in Blender and make sure things look OK. Steps:

Play animation in the Blender footer.
Play animation in the Blender footer.

TIP: You should expect to see skeletons moving around now, but the model itself will appear stuck in the T-pose. We’ll apply the animations to the original model in the next few steps.*

Open the **Dope Sheet** in a new panel, then select **Action Editor**.
Open the **Dope Sheet** in a new panel, then select **Action Editor**.
Walk through the four steps above in this 30-second screen capture.

TIP: If you don’t see the option to select an animation, make sure that you have selected the character from the scene graph, and opened the Action Editor in the Dope Sheet. If the model isn’t animating, make sure you’ve selected the character before choosing an animation.

If this all looks right, switch back to the T-Pose animation and save the scene to a new .blend file.

5. Export to glTF

Time to export our model! Make sure you’ve saved your Blender scene by this point.

Delete the armatures for each animation, leaving only the base character.
Delete the armatures for each animation, leaving only the base character.

NOTE: When this post was initially published, only the Kupoman exporter supported multiple animations. Now both exporters should work.

Select “*All Eligible” for animation Armatures and Objects.*
Select “*All Eligible” for animation Armatures and Objects. Applies to Kupoman exporter only.*

The export will create multiple files: a .gltf, a .bin, and perhaps some textures. Test the model on the drag-and-drop three.js glTF viewer, by dragging all of those files into the window together. In the Animations tab, select animations one at a time and ensure that they play as expected.

Cycling through animations in the online glTF viewer.
Cycling through animations in the online glTF viewer.

If something is wrong at this point, test the model out in the BabylonJS viewer. Model working in Babylon but not three.js? File an issue on my viewer. Model not working anywhere? Double-check that everything looks OK in Blender, and if so, file an issue on the Blender exporter.

If you got this far and everything looks OK in the viewer, you’ve got an animated glTF 2.0 character ready for use in A-Frame, three.js, BabylonJS, and more. Nice work!

*CREDITS: *Thanks to Daniel Stokes for implementing support for multiple actions in the glTF exporter, and to Toby Tremayne for testing and feedback on earlier drafts of this post.

Appendix: Loading animated characters in A-Frame

A future post will describe how to transition between animations in A-Frame, and associate each animation with character states. For the quick/easy version in the meantime, use the animation-mixer component from A-Frame Extras:

<a-entity gltf-model="url(character.gltf)"
            animation-mixer="clip: Run;"></a-entity>

The animation-mixer component has a few simple options that allow you to crossfade between animations and control looping. For full control, check out the three.js animation system, which animation-mixer uses under the hood.

Resources

For more information, you may want to go through these Youtube tutorials on Blender and Mixamo: