Saturday, April 28, 2012

How to Make Animated Peeps #1 ~ Demo & Intro

Screen capture from "Animated Peeps"
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

The holy grail of coding for 3D display is creating real-time photo-realistic animations of human beings. If this is so then my demo is a holy fail. Why is it a fail? Let me count the ways:

  • Each loop starts from a different place than from where the previous loop ended.
  • It's so bad, I make the characters disappear between loops
  • Some characters float above the ground, whereas others have their feet buried in the ground
  • None of the characters have hair
  • The coding often moves the character to the exactly same place a dozen times
  • These are low polygon count characters - so things like hands passing through bodies happens
  • And on and on...

Even if the demo is full of holes, there is nevertheless a holy aspect to the demo. It's one of the first of its kind. We've got 3D peeps dancing around in your browser all created using just a couple of hundred lines of JavaScript. They have shadows, can be loaded at asynchronously at run-time ['just in time' delivery]. Any character can be matched up to any motion. The process starting from creating a rough and ready character, adding motions to it, and to seeing the peep animated in your browser can take as little as a two or three minutes. [Perfection takes a little bit longer.]

The second post on this demo will walk you through the process from start to finish. Beginning with MakeHuman, the character will be designed using just mouse clicks. Motions [as motion capture BVH files] will be selected and edited using BVhacker. Designs and motions will be combined in Blender and exported in JSON format for use with Three.js. My guess is that building characters using Maxamo will be just as straightforward.

This new simplicity in building characters is built on the shoulders of giants  - people of great intellect and wide vision. Just have a look at the Reddit sections on WebGL and Three.js. You will see that there are a lot of great WebGL demos out there already. For example, the shaders that are being developed, I believe, will in the future alter our sense of reality - can you imagine Light Emitting Cloth without the use of shaders. And is an example of the user experience being driven in new directions. But ultimately we must come to back to people [and robot simulators]. And so far there's not been that many peeps to be seen dancing in the streets of the land of WebGL. [Altered Qualia and Oos: you are leading the way.]

The emergence of characters in apps is important not just for the gaming world but for civilization as a whole. We need tools so that the architect working with Maya or Reddit can be designing while her clients walk through her design. Historians need the tools that will recreate the events of the past - using tools designed and built by historians (as opposed to programmers). And what about books? For most of the history of the book the book has been a combination of text and image. The primacy of books without images is a phenomena perhaps about only fifty years old. With e-readers adept at both text and graphics we will a resurgence of books made correctly.

All of this can only be accomplished by straightforward work-flows that can be operated by non-professional programmers.  The professional programmers must not let up. This is only the start. There's a lot more to be done. For script-kiddies like me WebGL and Three.js plus all the demos is opening a whole world of power. For programmer with a full CS background the same tools offer all manner of new coding possibilities.

So this little demo is nowhere near the holy grail of 3D coding and it may not actually be a total holy fail. Maybe the demo is where there came to be the first few "peeps" of the holy quail...

Next: Start learning how to make the holy quail go "'peep, peep, peep...'

Update: 04-28-2012
Added links to the full series of posts in the tutorial and other minor edits.


  1. Sick stuff!
    Did you rock everything in MakeHuman? I am guessing it auto rigs your characters. What of skin weighting? Will the application let you control the weighting of joints?

    I understand the need and want for photo-realism in 3D. But I truly believe in the uncanny valley. As an artist I want to create something that is not photo real or even something that is hyper real, even now with games such as Minecraft we are seeing a regression to simpler forms and abstract shapes to convey our characters.

    1. Thanks archie.

      >> Did you rock everything in MakeHuman?

      MakeHuman > Blender > BV hacker > Three.js

      Many steps - but none that complicated.

      I will go into more detail in the nex post.

      >> But I truly believe in the uncanny valley.

      Agreed. Why should we be hamstrung by the stupid limitations of the physical world?

      This is still really early days with real-time 3D animations in the browser. Soon there will be toon shaders and much more. This is just the beginning...

  2. Jay

    Thanks for the nice words.

    >> Is this the first post in a series?

    Yes. I hope to have more details out in the next few days...

  3. Very cool.

    What do mouseless folks like me do?