Saturday, April 28, 2012

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

Screen capture of  'Kurt' - an animated 3D character in Three.js
Source code:

Posts in the tutorial:
jaanga: How to Make Animated Peeps #1 ~ Demo & Intro
jaanga: How to Make Animated Peeps #2 ~ MakeHuman
jaanga: How to Make Animated Peeps #3 ~ MoCap & BVhacker
jaanga: How to Make Animated Peeps #4 ~ Blender
jaanga: How to Make Animated Peeps #5 ~ Three.js & Conclusions

In this fifth and final post of the tutorials on how to make animated peeps that display in Three.js, you will load the character named 'Kurt' into Three.js and watch him strut his stuff. There just a few tasks left to do.

Slight Edit to Character's JavaScript File

When Blender exports the JavaScript fie, it uses the name of the texture file supplied by MakeHuman - which is 'texture.tif'. Three.js, however, just reads JPG and PNG files.

I used Irfanview - an image processing utility -  to convert 'texture.tif' to 'texture.jpg'. Any image-processing app you are familiar with can do this.

You will also need to update the file name in the exported JavaScript file. See line 25 of 'kurt.js' in the sample code.

Quickly Putting on Clothes

The texture file as exported by MakeHuman creates a fully unclothed human. This may not always be appropriate. There are a variety of techniques in MakeHuman and Blender for adding clothes, hair and more. All of these methods take considerable time and effort. Given that this tutorial is about making peeps at faster miles an hour, another process - painting the clothes right on to the texture image - is much faster and easier.

Again, most any image processing or paint program can be used to do this - or you can just copy the 'texture.jpg' with the nice green tights file in the source code folder.

Coding Demo Three.js File

In order to view Kurt the animated character, you need a web page to load and display the character. The demo/sample file in the source code is the simplest file Three.js I could think of that does the job.  About the only bells and whistles are the 'stats' widget and a camera controller that allows you to rotate, pan and zoom the view with your pointing device. Also the BLEND, MHX and BVH I used are files are in the source code folder.


Looking at the Three.js coding examples on GitHub and the demo in the first post of the series you will find much more that you can use to take your animations to (heh heh) the next step.

Now that I've configured the apps and run through the process a few times I can create a human-like character of most any, age, sex, ethnicity or whatever within a few minutes. The characters can be of widely varying quality depending on your needs. The total file size - animation plus texture - for this particular demo is just over 3mb - which is not unreasonable. The loading time and frame rate statistics are all acceptable. With more time clothes and many other features could be added. This is just the beginning.

And a very early beginning at that. This tutorial is very much a revision one affair. How many real-time-controlled animated 3D peeps have you seen wandering in your browser before?  But because WebGL and Three.js allow somebody with a tiny brain such as myself to pop out characters with such ease, my guess is that within the next year or so you will see that Kurt will have a lot of friends out there on the Internet. On the other hand he may become jealous, because most of them will be much classier than he is...

Return to the first post in the series:
jaanga: How to Make Animated Peeps #1 ~ Demo & Intro


  1. One thing to keep in mind is that this demo uses morph targets instead of skeletal skinning. Therefore it is very inefficient (consumes too much memory)

    1. Hello Aleksandar

      Thank you for the comment. You hit a very important nail on a very important head.

      The JSON file used in the demo animation is 2.8 MB, while the BVH file is just 231K – and the BVH includes much data not used by Three.js.

      Two thoughts:

      1. Who cares? With today's computers being so fast, what is the issue with a bit of code bloat? ;-)

      Just look at the demo in the first post of this series of tutorials. In the grand finale, there are eight characters dancing simultaneously. The frame rate is quite acceptable. And the demo was made before I learned some tricks such as turning off the unused layers in Blender.

      2. Just wait! Currently the only significant tool for producing animations in Three.js is THREE.MorphAnimMesh. I feel quite certain that more choices for animation tools will be appearing very soon. For example, I think it would be quite possible to attach BVH MoCap data to geometry in three JS at runtime...