Blog about (Web-) Programming, Graphics and Games.


WebGL skeletal animation demo

Click here to see it (you need a webgl-enabled browser). This WebGL-demo runs completely without external javascript libraries. All code (incl some basic matrix-computation-routines), mesh and animation data is stored within the Html file, only the Texture is loaded from an external Jpg. The demo is similar to the previous for O3D (here), but there I use external libraries.


Paul Brunt hat gesagt…

Impressive stuff

Pl4n3 hat gesagt…

Thanks :)

Giles hat gesagt…

Very cool!

29a hat gesagt…

Cool stuff. :) Do you know a good 'tutorial' on skeletal animation, or would you mind explaining it a bit?

Also, do you have a xmpp/gtalk account? We seem to have similar interests. :)


pl4n3 hat gesagt…

Thanks people!

@29a: In this demo, the skeletal stuff is inspired by md5-model-format in doom3: The skeleton is made up by bones, like a tree, with transformations. A bone can have weigths. Then there are vertices, a vertice has 1+ weighted weigths assigned. Triangles are drawn using the vertices. I have gtalk here but dont use it very often. There are nice demos on your website, especially the normalmap canvas looks great!

29a hat gesagt…

@Pl4n3 Cool, thanks for the reply.

kikko hat gesagt…

very nice! and also very instructive thanks!

In your code, you refer to an MD5Editor that you made. It sounds great! Is there any more information available about it?


pl4n3 hat gesagt…

Thanks! The MD5Editor, which I wrote (in Java)and use to create content, isnt currently downloadAble. Its is very featureincomplete, hacky, completely without documention and help, and subject of constant change, as I add new functions to it. I may make it publicly available onve, but currenty have no idea how and when.

kikko hat gesagt…

Ok, thank you Pl4n3 :)

I'd like to implement matrix palette skinning to my model viewer but I'm wondering if the best/most easy is to extends the Blender's Obj exporter to add skeletons datas in a third file (along with the .obj and .mtl because later i'd like to convert all those datas to binaries like fhtr does : ).

Or maybe I should just forget about the obj format and go for
- md5 (but no blender 2.5 exporter atm)
- Collada (really huuuge xml files but since specs are made by khronos I guess that the datas are well suited for opengl)

Any thoughts ? :D

pl4n3 hat gesagt…

Hmm, its a difficult topic. :) I dont know much about Blender and the Obj Format. The Md5 format is quite old and imho kinda limited so i wouldnt concentrate on that. I would probably store the skeleton data into a textfile using and own format that just covers all my needs. Maybe json-style so its fast loadable into javascript. In this skeletal demo I also use a own format, the data is stored in js-arrays, but could as well be loaded from a textfile. Im curious how your modelviewer progresses, esp. the shading looks great already :)

kikko hat gesagt…

Ok thank you very much for your advices! I haven't had time to do more work on skinning (which still looks like a difficult task to me!). So I think i'll first try to implement a working prototype with collada to be sure everything is ok on webgl side and then I'll opt for that solution you suggest which sounds perfect but requires me to write a blender exporter. and the Blender python API for armatures/vertexgroups is quite obscure to me atm :D
The more I learn about skeletons, the more impressed I am by your demo! mad work :)

pl4n3 hat gesagt…

Thanks for the kind words :) yes, you have to write an exporter if you use an own format, and the content wont easily portable, so a standard format has its merits too. I currently experiment with physics (bullet.js), where i have additional physics information for skeletons. In my own format I can easily integrate this..

kaj hat gesagt…

maybe you can use the o3d skinning example from google, They are using a own made converter who makes collada .dae files well suitable for their javascript parser (I thought to json). here some links. I thought it was Open Source so.. Here some quick references:


COLLADA Converter:

Rodrigo Silveira hat gesagt…

Good work. I know the original post is a bit old, but I was wondering if you could give me a super high level description of what your function calcVerts() does. I'm assuming it calculates the new vertex position for each vertex based on how it gets affected by the bone and its weight... correct me if I'm wrong, please. Thanks

pl4n3 hat gesagt…

Hi, above comment

somewhat summarizes what calcVerts() does: First bone-positions and -oriatations are calculated according to key-frames. Then weights (that belong to bones) and vertices (relative to 1+ weights) positions are calculated. After that triangles between vertices can be drawn.