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.

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.

How to Make Animated Peeps #3 ~ MoCap & BVhacker

Screen capture of the BVhacker program

This is the third in a series of tutorials that guide you through the process of sourcing and using applications that enable you to create 3D animated characters visible in most (but not all) modern web browsers. The ambition is to show you how you can create a demo of a character with a suitable motion in a matter of minutes.

How to Make Animated Peeps #2 ~ MakeHuman

Screen capture of the MakeHuman program

The goal of these tutorials is to help you create a 3D character, add a motion to it and get it playing in your browser ASAP. In this second tutorial I cover creating a 3D model using a FOSS application.

How to Make Animated Peeps #1 ~ Demo & Intro

Screen capture from "Animated Peeps"

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

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.]

Access Cross Origin Images from WebGL/Three.js

Screen capture of WebGL/Three.js demo showing images hosted on cross origin server

Demo: http://theo-armour.github.com/threo.js/cube-demos/webgl-cubed/index.html
Source Code: https://github.com/theo-armour/threo.js/tree/gh-pages/cube-demos/webgl-cubed

One of the beautiful things about an HTML web page is that the page can can grab images, style sheets and JavaScript from just about any server on the web. The cross-origin feature enables third-party ads to be displayed, visitor statistics to be monitored, jQuery code to be updated automatically and much much more.

Blender to Three.js >> Create 3D Text With Any Font

Screen capture of 3D text in Three.js

Thanks to Zz85's work, Three ,js has excellent 3D text creation capabilities. These are described in the Three.js wiki and in a post on Zz85's website. If there is an issue it is that the 3D text uses fonts that have been converted into a special format developed by Typeface.js (as of this writing the web site is not operational) - and is described here.

There can be times, however, when you need to use a specific TTF font and want to be able to do so fairly quickly and easily. Or it may be that you might need custom kerning of text or text with a taper. Again this post if for you.

The technique described here uses a Python script to generate text inside Blender, export the text in JSON format using the Three.js blender export script and then load the text into a Three.js applet. Loading a Python script into Blender is described here.

Below is the Python script I used to generate three lines of text with each line using a different font all as shown in my3D text demo. Each line of extruded text uses a different material and the text is beveled.

Visualizing the Future in Three.js: The Long Walk

Screen grab of "The Long Walk" 

The journey to describe and build the next generation of data visualization apps will be a long and circuitous one. [Is this part of what makes the journey so enjoyable?] On the journey, on occasion, we must stop looking at mere numbers and just look out and see see what we can see.

All this is to say that the weekend before last, I participated in the Art Hack at GAFFTA. The idea was that small teams could develop new artisticky apps. I was predestined to join Tony Parisi's team but no particular job had been decided. My role ended up as being "technical artist". My task was to bring over data created by designers and display it in the web app we were building. This ended up by necessitating the conversion of OBJ files into JSON files and then embedding these into a Three.js files in order to create a scene.

While I was able to accomplish this task, the results were not particularly gratifying. Subsequently I've learned quite a bit more about the topic and present a little demo here with.

The demo is on GitHub and is titled The Long Walk.

Jaanga WeB3D Real-time R3 Takes Off

Jaanga WeB3D Real-time R3 displaying every stock on the SP500 

As promised at the recent WebGL San Francisco Meetup, the first portion of the code that I presented there is now available on GitHub.

Jaanga Web3D Real-time R3 is ready for you to bang on (ever so lightly, please):

Live demo page
Source code repository

The Economist has Us Drowning in Numbers - Again

The Economist has yet another excellent video on the 'deluge of data'. This time we are drowning in numbers. The short take is that there are more and more numbers – so much so that we need to learn new names to track the numbers: Giga, Tera, Peta, Exa, Zetta and Yotta - the last being a number with 24 zeros.

The video, however, makes no recommendations as to how we are to understand those numbers, come to grips with what they mean and to use them in productive manners. But then that is what this website is for.