I created a human model in Blender, exported the vertices and indices into a JSON file and render the model in a browser using WebGL. Now I created a walk and jump animation in Blender and would like to do the same with WebGL.

I saw examples that use a list of vertices for every frame of the animation. Is this the way to go? Do I need to export the vertices for every frame for every animation?

  • \$\begingroup\$ Animation is a pretty large topic covering scene graphs and arguably too big of a topic to answer on this site other than few links. Here's an answer you might find useful stackoverflow.com/a/41649931/128511 \$\endgroup\$ – gman Mar 13 '17 at 8:30

You need to implement either something like bones or morphs. As stephelton suggests, a WebGL framework would make this easier.

Since you're using Blender, how about using three.js ?

It already has a Blender exporter and there is also a python script to convert objs to the json format the framework uses, in case you need to use other applications.

Among great other projects, it was used for Ro.me and you can see samples of morphs there. You can have a look at the source code for the models as well.

animation skinning three.js sample morph targets three.js sample


You want to employ some kind of skeletal animation system. I suggest you find a WebGL framework to support this.


Your Answer

