Saturday, April 28, 2012

How to Make Animated Peeps #4 ~ Blender

Screen capture of the Blender program

This is the fourth in a series of tutorials designed to help you build animated 3D characters in a matter of minutes. It is taking me much, much longer to write these tutorials then it did to make my first demo that finishes with eight characters dancing about.

By now you should have a character model in an MHX file and a MoCap BVH file. Now we want to use Blender to combine the two and export them so that they can be displayed in your browser using Three.js.

Configure Blender for MakeHuman Import

Blender > 'Info' window (top left) > 'File' menu > click 'User preferences...'
Blender User Preferences dialog box > click 'Addons' tab
'Addons' tab > Left menu > 'Categories' > click 'MakeHuman'
'MakeHuman' tab > check 'MakeHuman: MHX Mocap'

'Addons' tab > Left menu > 'Categories' > click 'Import-Export'
Import-Export' tab > check 'Import-Export: Import: MakeHuman (.mhx)'

In you need more help, MakeHuman tells you more in the 'Preparations' item here:
MHX for Blender 2.6x - Makehuman

Configure Blender for Three.js Export

Three.js Blender import and export is covered here:

Import MakeHuman File

Blender > 'Info' window > 'File' menu > 'Import' item > click 'MakeHuman (.mhx)...'

Blender file dialog box > Left menu > 'Import MHX' tab

Set the following:
  • Scale: leave at 1:00 or as is.
  • 'Proxies': Checked
  • 'Armature': Checked
  • 'Rigify': Checked
  • All other settings (especially 'Mesh'): Un-checked
These settings are important because they control how much data will be exported into Three.js. And the smaller the export file the better.

Blender file dialog box > Select the .mhx file from the MakeHuman/exports folder.

Clap your hands once the MHX is successfully imported.

Load and Attach BVH file

Blender > '3D View' menu [look for cube icon/lower left] >' View' menu > click 'Properties'

Note: Properties panel now displays on right side of '3D view' window.

Scroll down the Properties panel until the 'Mocap:' tabs appear. Do the following:

'Mocap: Init' tab
Click 'Initiliaze'

'Mocap: Target armature' tab
Click 'Intitialize target character'

'Mocap: Source armature' tab
Click 'Recan source rig'
Check 'Guess source rig' << must do

'Mocap: Retarget'
Click 'Load, retarget, simplify' << thank you Thomas Larsson
Blender file dialog box> Fiand and load the .bvh file you have selected in the previos tutorial.

Then wait...

If your character jumps to a new position: You have animated your character.  If the BVH armature appears in Blender separately from the mesh you have imported then something has gone wrong.

Congratulations, you may now do a little dance yourself, if you wish.

Play the Animated Character and Set End

Blender > 'Timeline' Window [At bottom of screen] > click 'Play Animation' button

Note: the character walking and then pausing.

Click 'End:250' > type in the number of the actual end frame.

If you used 08_07.bvh then the end frame is 60.

Setting the end frame is critical because the Three.js exporter uses this setting to control the number of frames that are exported.

The other helpful trick is to turn off all the Blender layers except the one you want to see in Three.js - which in this case is the layer holding just the bronze-colored mesh. 

Export in JavaScript format for Three.js

'Info' window > 'File' menu > 'Export' > click 'Three.js (.js)'

Blender export file dialog box > Left menu > look for and open 'Export Three.js' tab

Set the following settings as c
  • Geometry: Vertices, Faces, Normals
  • Materials: UVs, Materials, Colors
  • Settings: Flip YZ, Align model: none
  • Scene: Embed Meshes
  • Animation: Animation
  • Settings: All meshes
All other check-boxes can be un-checked or left as-is.

Note that the 'Truncate' check box enables the creation of much smaller export files - with highly reduced quality. Truncated files would be useful when you need characters only a few pixels high. On the other hand, at close distance, they create a sort of animated Cubist film effect. A truncated file is included in the source code and you can enable it by un-commenting the source code.

The other setting of interest is the 'Frame Step' setting. When set to '1' the export will save every frame. When set to, say, '4' the exporter will export only every fourth frame.

This can be very helpful in significantly reducing files size. It is also worth noting that Three.js has excellent morphing/tweening capabilities and will easily update an entire meshes so that flows smoothly from on frame to another.

For this demo I set the step value to 3.

Now click on 'Export Three.js' and you are finished with the Blender portion of the tutorial. Next will be the final tutorial on importing and displaying your character in Three.js.

Next: How to Make Animated Peeps #5 ~ Three.js & Conclusions:

Updated: 2012-05-01
Added trick about turning off Blender layers.


  1. Awesome tutorial; I'm just having trouble in Blender 2.63 finding Mocap init or indeed any mocap parameters in the 3d window properties panel. I turned on mocap add on in user preferences and there is mocap stuff in the general properties window but nothing about initializing. Are the versions different? How might I follow your tutorial in 2.63? Thanks!

  2. The effect of stagnant regions depends on the mixture and the flow properties of its individual on