Custom Software Development and Engineering

Three.js powered facial rigging morph targets

We’ve been working on a set of tools for creating web based WebGL animations, but since we’re not quite finished yet, we decided to release a demo of something fun.

Meet Ginger.

Ginger is a facial rig that utilizes 25 or so morph targets that get powered by three.js in WebGL. The facial features of the model can be shifted into different forms and expressions using the jQuery UI sliders (we originally had html5 range inputs, but wanted to get some love for Firefox out there which doesn’t quite support them yet).

The demo works pretty well in the latest versions of Chrome and Firefox (sorry IE users…no WebGL for you).

The models where designed by our resident Chief Artist David Steele in Maya (he also did all the conversions and a significant portion of the JavaScript for this particular demo). He’ll be getting into more of the technical details of the models in Maya and the three.js action in a later post.

While the demo offers simple functionality, the overall toolset that we’re working on has to deal with creating easier animation tools for the cutting edge of the web in canvas and WebGL. But we’ll get into that later.

In the mean time, enjoy playing with the demo, and stay tuned from some cool tools in the pipe!

NOTE: if the demo isn’t loading (and in certain cases with video drivers being blacklisted in Chrome/Firefox that will be the case), you can see the demo in action in the YouTube videos below. For comparison purposes, we did videos in both Firefox and Chrome.

In Firefox

In Chrome

Ready to start?

Get in touch. We're ready to listen.