Creating animated glTF Characters with Mixamo and Blender

UPDATE: This blog post has been updated since it was originally published. For the most current version, please read this post from my blog.

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.

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.

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:

• character.fbx
• character@run.fbx
• character@idle.fbx

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

• File → Import → FBX.
• Under Main, select Manual Orientation.

When importing the FBX, select “Manual Orientation” under the “Main” tab.

• Under Armatures, select Automatic Bone Orientation.

When importing each FBX, select “Automatic Bone Orientation” under the “Armatures” tab.

• Select the base character model, then Import FBX.
• In the Blender scene graph, rename this object as Character, and rename its animation as TPose.

The base character should have name like “Character”, and the animation should be called “TPose”.

• Repeat for each animation file. After importing each animation file, name the animations Run and Idle respectively.

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’s 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.
• In the Dope Sheet panel, select Action Editor in the footer.

Open the Dope Sheet in a new panel, then select Action Editor.

• After selecting the character, try playing different Actions (there will be one Action for each animation, plus the T-Pose).

I 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 from the animations, leaving only the base character and its armature.

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

• Install the Khronos Group glTF exporter or Kupoman glTF exporter. Both exporters cannot be enabled at the same time.

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

• Khronos Group exporter only: Ensure the actions you want to export
  are either active, stashed, or “pushed down” into NLA tracks.
• File → Export → glTF
• Kupoman exporter only: In the Animations section, ensure that All Eligible objects and armatures are exported. This ensures we get all of the available animations, not just the T-Pose.

Select “All Eligible” for animation Armatures and Objects.

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.

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:

• Using Mixamo with Blender. The first ½ of the video is relevant — disregard everything after the author begins creating a single combined animation track. The video advises using an experimental Apply Transform option, which DID NOT work for me in recent versions of Blender.
• A-Frame / Mixamo walkthrough. This video describes a somewhat different workflow, and targets the three.js JSON format, but may also be helpful.