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

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

Demo: http://theo-armour.github.com/threo.js/animated-peeps/tutor/index.html
Source code: https://github.com/theo-armour/threo.js/tree/gh-pages/animated-peeps/tutor


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.

Conclusions

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