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.
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
Natanael L
http://img716.imageshack.us/img716/7374/facerigtest1.png
Pete G
Like it, good work!
Diego
great! good work people
I look forward for those animation tools. Projects like these are unveiling a very interesting future online.. thanks!
Rob McCardle
This is superb work, thanks for sharing
yuriki
WOW! This is amazing tool!
WebGL is a future!
carlo
not working on my chrome browser, it’s just: “Please wait while I load the model…”
I keep waiting thinking it will load but it doesn’t. I waited at least 30 minutes.
Any idea?
Justin Ribeiro
Hi Carlo, this is video card issue. I’d check to see if your video card (or really, the driver) is not on the blacklist.
michael
o meu não dá para ver nada fica azul o boquinho…..
Reinier
Hey Carlo,
I would guess you need to get a better graphics card… I’m experiencing the same, but i know my card sucks. It won’t load ever.
best,
Reinier
Phoinx
Hi, there!
Very amazing work! The look is great and the rig and controllers are awesome!!
And even more exciting to see it running in the browser!
I could run it on Chrome+Windows. However, with Chromium+Linux (Mint 11) I could not.
The head looks small, without textures and in tones of blue (http://www.pasteall.org/pic/show.php?id=19560).
I got an ATI card and other WebGL demos run fine, except yours.
When running through terminal, I got some messages:
$ chromium-browser –ignore-gpu-blacklist
NP_GetMIMEDescription
[28321:28321:19678634876:ERROR:profile_impl.cc(1155)] Could not initialize login database.
[28561:28561:19679625423:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679625453:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679625462:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679659034:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679697471:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679697509:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679697517:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679697572:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
[28561:28561:19679697582:ERROR:gles2_cmd_decoder.cc(4289)] glDrawXXX: attempt to access out of range vertices
Does anybody knows something about it?
I hope I can see this cool demo running on my dear Linux! =]
Thanks!
Justin Ribeiro
If your video card driver on Linux is on the blacklist (which I presume it is as you’re firing up Chromium with the –ignore-gpu-blacklist option) then it’s a video card driver issue. The error you’re getting is at the decoder level, which is something we can’t deal with in WebGL (sans trying to work around specific driver issues).
Phoinx
=[
Ok, thank you!
And congratulations again! =]
Gaurav
Hey man, its a nice project, awesum rigging and moreover it is in a browser…’Webgl’ is powerful….
its just that i cannot scroll down to the expression and other controls without selecting and dragging on the text
P.S.-I am using chrome at a resolution of 1366*768