Three.js - skinned skeletal mesh instances, animations and blending

jozxyqk picture jozxyqk · Dec 9, 2013 · Viewed 9.5k times · Source

I'm working on a small multiplayer game which has a single skinned player mesh with many players using it. Some Background: I've tried loading via maya and blender collada export. Both seem to reference some form of animation data but I couldn't get it working. I've tried the maya JSON exporter, which spat out tiny 1k files with only a material line. Finally the blender JSON exporter worked. To those also trying to load skinned meshes, I found this very helpful: Model with bones animation (blender export) animating incorrectly in three.js

So now I have a geometry object and a materials array from the JSON loader.

I can set skinning=true on the materials, create a THREE.SkinnedMesh, add it to the scene, add animations via THREE.AnimationHandler.add (I'm quite unclear on what the AnimationHandler actually does), create a THREE.Animation, call play() and update(dt). Finally I have a single mesh and an animation playing in my scene.

Now what I want are these...

  1. Many instances - I want more than one player model running around in my scene.

    • I don't want the same mesh and animation data loaded many times.
    • Animation time should be per-instance (so they don't all animate in sync).

    Should I be creating many THREE.SkinnedMesh and THREE.Animation for the same model? Where does THREE.AnimationHandler come in?

  2. Many animations - I want idle/run cycles able to be played individually.

    AFAIK there's only a single timeline of animation keyframes. How does Three.js partition this up for me, or do I have to do it manually?

  3. Animation Blending - When a character stops running and stands still with the idle animation, I don't want an instant snap from one to the other. I'd like to pause the run animation and blend that state back into the idle animation.

    Is this currently possible with skinned meshes (not morph targets)? Are there examples or docs about this?

Any information would be greatly appreciated, even just a nudge in the right direction. I'm not after a full tutorial, I would like some higher level information about these features.

I could happily implement 2 and 3, but I'd like some information/descriptive docs about the threejs skinning and animation framework to get me started. For example, this isn't much to go on.

[EDIT]
Thanks, @NishchitDhanani, this page is quite good but doesn't mention multiple animations or blending skeletal animations: http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_characters_with_skinning

This page says multiple animations are still a current issue but not much more (discussed a little in the comments): http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

The current answers are...

  1. Use many THREE.SkinnedMesh and still not sure about THREE.AnimationHandler.
  2. Don't know. Perhaps there's a way to modify the start/end keyframes manually in the THREE.Animation.
  3. Not implemented AFAIK. I might try creating a custom shader that can take two THREE.Animations and interpolate between them.

Answer

insominx picture insominx · Feb 10, 2014

As of release 67 (April 2014), both skeletal animation blending and multiple animations are supported. You will still need to create a SkinnedMesh for each model. The AnimationHandler is responsible for updating (ticking) the animations every frame so you should be calling update on that and not manually on each Animation.

See the newly added example: webgl_animation_skinning_blending.html or check out a couple of my own here:

Basic Character Controller (with time warped speed blend)

Time Warped Speed Blend