Mixamo, by Adobe, provides an easy way to get started with character animation:
- 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.
- 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 =
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.
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:
- File → Import → FBX.
- Under Main, select Manual Orientation.
- Under Armatures, select Automatic Bone Orientation.
- Select the base character model, then Import FBX.
- In the Blender scene graph, rename this object as Character, and rename its animation as 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.
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.
- 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
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.
- 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.
The export will create multiple files: 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.
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!
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:
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.
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.