Implemented Skeletal Animation Blending #4029

Closed
wants to merge 11 commits into
from

Projects

None yet

4 participants

@insominx
Contributor

This work was directly integrated into the Animation object with some additional bookkeeping added to the Bone object.

Concerns:

  • Because Animation is used for non-skeletal animation, this results in more special case code being added.
  • There might be a more flexible way to blend multiple Quaternions but the current way is correct and is easy to iteratively apply.
  • The API for handling animations is very bare bones. I'm hoping that somebody with more experience can fill it out.

Anyhow, it works!

Enjoy,
Michael

insominx added some commits Oct 28, 2013
@insominx insominx Added blending for skeletal animations.
Allows for smooth transitions between animations.  Look Ma, no popping!
c1f3cec
@insominx insominx Added blended character controller example.
Shows skeletal blending transitions between idle and walk cycles.
6625682
@insominx insominx Fixed seams and eyeballs on johnson character. 9a7b736
@insominx insominx Added space to be more consistent with Three style. 19913b7
@insominx insominx Added new blend example.
Allows manual control with a dat.gui slider.
503f787
@insominx insominx Switched to minified three. eb17123
@insominx insominx Changed indentation to tabs. 5b23a4e
@insominx insominx Added procedural skeletal animation example. 437080b
@insominx insominx Code style adjustments. ad0a700
@insominx insominx Fixed animation update bug and typo.
Removing an animation while the AnimationHandler was iterating over them
was causing an update to be missed resulting in a choppy 1 frame glitch.

Typo was preventing an optimization.
eb5d564
@insominx insominx Fixed non-looping animation bug. cd42956
@insominx
Contributor

@mrdoob If there's anything you want me to change/fix, I have until the end of Friday to do it. Please let me know before then as I might not be able dedicate much time to this after that. Thanks!

@insominx
Contributor
insominx commented Nov 1, 2013

Here's another demo to play with: http://www.realitymeltdown.com/WebGL2/marine-demo.html. Unfortunately, I don't think it's legal to distribute this model as it originally came from Evolver.com (when that was still around).

@Digitoxin
Contributor

Looks amazing, nice job!

I think this pretty much settles the only gripe I've had with this library.

@mrdoob
Owner
mrdoob commented Nov 5, 2013

Hmmm... I'll have to take a close look at this at some point.

@kaanozcan

Does this means we can do layered animation now?

@Joosua Joosua added a commit to realXtend/WebTundra that referenced this pull request Jan 31, 2014
@Joosua Joosua Three.js now supports animation blending. Merged three.js master and …
…animation blend pull request mrdoob/three.js#4029.
beda21d
@insominx
Contributor

I think I'll have some more time to work on this in a couple weeks. What would you like to see in order to get this merged?

@mrdoob
Owner
mrdoob commented Mar 22, 2014

Hmmm... I think before merging I wanted to clean up what's there right now.

I'm thinking that may be nice to have this kind of api...

var skeleton = new THREE.Skeleton( bones );
var mesh = new THREE.SkeletonMesh( mesh, skeleton );

Also would be nice, for debugging purposes to do a nice SkeletonHelper, which has been started in #4521.

That way we'll be able to visualise the skeletons and the blending nicely.

What do you think?

@insominx
Contributor
insominx commented Apr 2, 2014

I agree that factoring out the skeleton into it's own object would be more clean and readable.

As for the THREE.SkeletonMesh, are you suggesting a different object for that or rather making it a part of THREE.SkinnedMesh?

var mesh = new THREE.SkinnedMesh( geometry, material, skeleton, useVertexTexture )

Or perhaps THREE.SkinnedMesh could be modified to be composed of a THREE.Mesh and a THREE.Skeleton?

var mesh = new THREE.SkinnedMesh( mesh, skeleton )

Or THREE.SkinnedMesh could create its own THREE.Skeleton using the bones passed in geometry.bones.

@insominx
Contributor
insominx commented Apr 2, 2014

Also, I'm working on a visualization to help debug animations and blends. Here's what I've got so far: http://www.realitymeltdown.com/WebGL3/skeletal-anim-inspector.html

The top row of meshes each play a single animation. The mesh on the bottom will blend according to the weights set in the gui. You can change the speed of the animation as well as take individual time steps.

Sometimes blends will look terrible without some special massaging (ie time warping) and this demo will help make it more obvious as to whether there is a problem with the code or the art.

@mrdoob
Owner
mrdoob commented Apr 2, 2014

As for the THREE.SkeletonMesh, are you suggesting a different object for that or rather making it a part of THREE.SkinnedMesh?

var mesh = new THREE.SkinnedMesh( geometry, material, skeleton, useVertexTexture )

Or perhaps THREE.SkinnedMesh could be modified to be composed of a THREE.Mesh and a THREE.Skeleton?

var mesh = new THREE.SkinnedMesh( mesh, skeleton )

I think both options are ok. Thinking about it again, maybe the first one is more intuitive.

Also, I'm working on a visualization to help debug animations and blends. Here's what I've got so far: http://www.realitymeltdown.com/WebGL3/skeletal-anim-inspector.html

Looking good!

Hmmm, Show bones doesn't seem to work?

@insominx
Contributor
insominx commented Apr 4, 2014

Update:

I've fixed up the demo linked above quite a bit including hooking up the "show bones" option. Stepping and pausing work together much better as well.

I've pulled the latest three dev branch and re-merged the blending code. In the process I've fixed a couple areas I'd consider buggy that we can talk about when I submit a new / separate pull request.

Also, currently I have fade in/out code inside animation to alter the blend weights. This adds some additional complexity and may not be as flexible if you want to have direct control over modifying the weights over time yourself. I'm thinking there needs to either be a separate object to control weighting (fade in/out, cross fading, etc..) or maybe incorporate that into THREE.AnimationHandler. What do you think?

@insominx insominx closed this Apr 8, 2014
@insominx insominx deleted the insominx:dev branch Apr 8, 2014
@vincent vincent referenced this pull request in vincent/three-arena May 23, 2014
Open

Very impressive #11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment