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.
09.02.2010
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.
Abonnieren
Kommentare zum Post (Atom)
Posts
15 Kommentare:
Impressive stuff
Thanks :)
Very cool!
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. :)
Cheers,
Jonas
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!
@Pl4n3 Cool, thanks for the reply.
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?
kikko
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.
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 : http://fhtr.blogspot.com/2009/12/3d-models-and-parsing-binary-data-with.html ).
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
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 :)
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 :)
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..
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:
skinning:
http://code.google.com/intl/nl/apis/o3d/docs/skinning.htm
http://code.google.com/p/o3d/wiki/ColladaConverter
COLLADA Converter:
http://code.google.com/intl/nl/apis/o3d/docs/artdesignerguide.html
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
Hi, above comment
http://pl4n3.blogspot.de/2010/02/webgl-skeletal-animation-demo.html?showComment=1270083376470#c4530085395861971881
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.
Kommentar veröffentlichen