Build an Anime Robot in WebGL Using Three.js

Tachikomas are robotic spider tanks (which can also double as vehicles) from the anime TV series Ghost In The Shell: Stand Alone Complex. Despite some fairly relentless fan service, it's a great show. It features terrific cyberpunk, where the Tachikomas are not just props or weapons, but also characters.

I built a pair of Tachikomas in the commercial 3D graphics software Cinema 4D:

This software is awesome, but it costs around $3,600. (Fortunately, I'm taking a class on it, and my school set up a free student license for everybody in the class.)

After I built the Tachikomas above in Cinema 4D, I then made a simplified Tachikoma using Three.js, the popular and excellent JavaScript library for WebGL:

While I was building the robot, I used a wireframe view to make it easier to see what I was doing:

Obviously, this is less fully-developed than the version I did in Cinema 4D. And better animators than me have done far more amazing work with WebGL and Three.js.

But this Three.js Tachikoma is 100% JavaScript-created, running in a web browser. And it's easy code (with an important caveat). Using Three.js allows you to bypass a lot of the verbose weirdness of raw WebGL. If you do JavaScript work with Node.js, or you work on a site with a relatively dense and complicated DOM, understanding this code might even be a cakewalk for you.

I didn't use any of the more obscure features of WebGL, like custom GLSL shaders, and I didn't use any expensive or incomprehensible 3D animation software. It's something any JavaScript developer can do. The software to create these images doesn't cost $3,600; it's free and open source, and you interact with it by writing code.

Here I am typing JavaScript commands into the console to move the Tachikoma around during the process of building it:

But here's the caveat: although the code is easy, there's a whole paradigm you need to understand before you can write code like this. If you work with JavaScript, you're probably a web developer, with a lot of domain knowledge about Web browsers. You may even be an expert in which Web browsers mess up which parts of their own implementations (which is thankfully becoming less valuable knowledge than it used to be). But working with 3D graphics requires that you understand a completely different and unrelated set of domain knowledge.

The same basic mental model powers Cinema 4D, Maya, Blender, and Three.js (and very probably the proprietary systems at Dreamworks and Pixar as well). It's a paradigm with quirks that could really baffle you if you've never been exposed to it before. And it's probably obvious that you can't claim to be anywhere near the cutting edge of JavaScript development unless you understand this paradigm. So if you want to create innovative interactive experiences on the Web, or build HTML5 games, you should learn how to do 3D with Three.js.

And I can teach you.

I made a product where I explain the 3D graphics paradigm. I included a bunch of code in a git repo and I made it easy to follow along. I demo building a TIE Fighter, in real time, and I show you the process of building this Tachikoma in Three.js.

This is a product which includes several videos. In one, I give a presentation which explains the 3D paradigm and setting up the Tachikoma code. In the next video, I show the entire process of building the Tachikoma, very quickly. In the next, I take you through the whole thing slowly and clearly, line by line.

Building the Tachikoma took 18 git commits; I recorded separate, individual videos for 14 out of the 18. Then I edited them all together into one seamless video. Not only that, you can match the stages of the video to the git repo, because I put the git hashes onscreen:

This means you can check out specific commits and follow along as I write the code.

I also highlight random useful third-party libraries, tips, and gotchas:

The line-by-line video is about an hour and fifteen minutes long. But, because I know that a lot of programmers like to move quickly through videos, I've also included a "speed painting" version, set to an original drum-and-bass track which I created. The "speed painting" video condenses the entire hour-plus process of building the Tachikoma down to less than six minutes.

The first video, the presentation video, is about 20 minutes long, and there's another 15-minute video at the end. For fun, I finish the product by showing you how to create some simple animations in Three.js, so you can play around with what you've learned. For instance, I show you how to create these animations:

And this one:

(There's also a fourth bonus animation as well.)

And of course I include the code in the repo. It's another 4 commits, grand total 22.

Again, just to be clear, this is all JavaScript. I'm using animated gifs and YouTube to show it to you, but I made it all in JS (and the Chrome browser). And after you learn how, you'll be able to do the same thing.

At least, this is my hope; I can't actually guarantee that. But I can guarantee that if you buy my presentation, you'll be 100% satisfied. If you're not, you can have a full refund.

Since I fully intend to stand by that guarantee, I better be upfront with you about the product's limitations: the audio isn't perfect in the full-length Tachikoma build video, because I had some microphone noise when I was recording it. The file itself is a huge download. The whole product's extremely slanted towards Chrome and OS X users; I didn't test any of this code on other operating systems, and I'm pretty sure some of it only works on Chrome. (I wasn't worried about that because Firefox and Safari will almost certainly catch up, although Internet Explorer never does.)

Lastly, if you don't like bad language, the good news is I tried not to swear anywhere in this product, but the bad news is I failed. The silly bouncing tachikomas animation contains swearing on 8 lines of code. But I only swear once in the actual presentation videos, and it's while reading one of those lines of code, so hey, personal best. Anyway, other than that, I'm pretty happy with this product, and I think you will be too.

So there's a detailed code base, containing a Three.js version of an anime robot, plus four bonus animations (technically the fourth bonus animation is more of an import/export format demo). There's a video which shows you how the bonus animations work. There's a video which shows you how 3D in general works. And there are two videos which show you how to build the Tachikoma -- one fast and one slow. For now, you get all of that for just $41.

By the way, I made a little music video with dancing Tachikomas. I don't show you how to do this in JavaScript, this is 100% Cinema 4D, but you might find it entertaining anyway.

Finally, this is a brand new product, and I haven't shown it to anybody yet, so here's a bunch of praise for my other products: