Animation Methodology Review

[Wingnut]

Ahem.  Wingy points to the wonderful .babylon file type, and then pops a confetti cannon. 

Early mesh.spin() and mesh.move() tests... here.  Funcs defined in lines 3-13, and 5-segment animation sequence in lines 110-114.  Just doing ground, early tests, no easing yet.

Update:  [link]  A bit longer animation sequence, built-in cubic ease-in/out... and look how little the PG is.  So fun! 

Not so well 'sync'd.  Also, fuschia and yellow cones... don't want to ever finish.  hmm.  Wingnut bug, likely.  But perhaps, not.

Another update: [link]  Ahh, there we go.  Two of my spin calls had negative speed settings, but needed negative radians and positive speed.  Wingnut screw-up... now fixed.

One more:  [link]  Coded-up the other 2 funcs... .scale()/scale2... and .color().  They are working fine.  YAY!  Fun!  Still evolving.

Okay, just one more (so far)   [link]   A little shorter demo, but using ALL "To" and targets.  Notice that there is a BJS vector3 or color3 in EVERY animation line (150-166).  These are the targets.  I'm still thinking about HOW I get control of components, when other values are unknown.  In other words, moveTo works fine to force all three components, x, y, and z. 

Difficult to animate ONLY Y component, while NOT knowing the values of mesh X and Z components.  Currently, the first param of all "To" funcs.. is not used.

Animating a specific component (like setting ONLY Y-axis to +5, yet not knowing current X or Z)... via using a "To" func... will require some ingenuity: 

setTimeout(()=>mesh.moveTo("unused", new BABYLON.Vector3(mesh.position.x, 5, mesh.position.z), 35), 19000); 

(not tested, but should work, in theory)

[JackFalcon]

@Wingnut cool!  Neat easing, and also how the cones spin differently.... speed (I see). Nice magic there.

[JackFalcon]

~ ANIMATION METHODOLOGY > IK - ARM-MINIMUM:

It comes from an awesome playground shared on another thread about bones...

Not sure who made it, but it is... cool-thing -> top-ten.

https://www.babylonjs-playground.com/#PNJGW#7 via: @adam @JCPalmer.

Giving it a go, to find questions or tips. Looks pretty solid for such a complex thing.

Next up: IK-ARM-MINIMUM, skinning...

[adam]

I created that PG when I was developing the IK controller.  At that time I hadn't added the slerpAmount feature.

Here is an example of how to use slerp:

https://www.babylonjs-playground.com/#PNJGW#8

[JackFalcon]

Awesome, I had not researched SLERP yet.... 

...  can't wait to check that out.

 

UPDATE -> MINIMUM-IK: ImportMesh && GTLF -> runs animation() automatically(?) Watch out for that. Switching back to .babylon.

 

[JackFalcon]

~ ANIMATION METHODOLOGY > IK - ARM-MINIMUM:

@adam your IK is really good....

 

 

[JackFalcon]

"too many gifs" might've sunk this thread...

I'll have to break these out...

 

[Wingnut]

Oh, way to go, breakin' stuff. 

Perhaps "break these out" to your github/images/animreview/ folder, and then use links instead of pasting gifs?  (ahem)    (hug)

If you decide to clean-up this thread by putting all your gifs in a folder somewhere, and changing all your gif-pastes... to LINKS-TO gifs... then holler, and I'll delete that new thread, if you wish (I'm a moderator).  Your call... on all of it.  Wingy simply pointing-out some options.

[JackFalcon]

Thought it over...

I'll look to add these as playground based tutorials.

[JackFalcon]

Another TIP:

            When exporting from Blender there was a flicker error in an Idle Animation.

             You guessed it...

BLENDERFIX:

             Extend the end of the timeline -> to beyond the animation range -> export again, and it runs smooth.

[JackFalcon]

Thx #wingy for bringin-the-funky-back....

 

UPDATE: another BLENDERFIX. A very-very tricky one. ATTACH ITEM TO IK BONE.

There are many ways to attach item to IK bone - but not many of them export as an animation.

 

What follows is a singular methodology to successfully export IK-to-Item-Bone animation.

Any alteration of these steps results in animation not running at all (ver 5.4.2).

As you can see the steps are rather complex...

 

Item-IK -> Blend-Recipe:

- SHIFT+D a single bone on armature. Move to position. This is your item-bone.

- Edit item-bone, (do not uncheck Deform ) -> parent to the K-Bone.

- Pose Mode, select mesh then item-bone, Ctrl+P -> 'Attach with Automatic Weights',  NOT 'Attach as Relative Bone',

- fix any weight paints (outside the radius of weight).

- animate the IK Bone, with IK Influence = 1.

- Object Mode, select all, Ctrl+A -> Apply RTS (rotation, transform, scale). (don't forget!). Export warns of this. +1.

- export, animate run-time....

all good. Not easy.

Hope this helps someone...

[Wingnut]

Good discovery/tip, aF!  Thx!

[shen]

On 17/11/2017 at 5:45 PM, aFalcon said:

GLTF animations not supported for assetsManager.addMeshTask

After a lot of Googling, this is the only place I found some one mentioned that. Why no one report this bug?

I only can make the animation in assetsManager loaded glTF work with https://github.com/BabylonJS/Babylon.js/issues/3536#issuecomment-357266541, but can't figure out how to control the animations. 

[JackFalcon]

Thank you for reproducing shen. glTF specification is awesomely large. Surprised if there wasn't something left over.

Ping @Deltakosh  for re-ping.

ah, jeez. oops. Sorry - keep doing that...  : )

[Guest]

What do you want to control? Play / pause / stop?

In this case you should not ask the system to start it automatically but instead call beginAnimation manually on the object you want

Do you have a repro we can test on the Playground?

[JackFalcon]

@Deltakosh Two (separate) things:

A possible edge-case in asset manager around the glTF import (above). For re-ping... on import. idk...

There was a work-around... .babylon.

... i'll stop pinging. 

And the Animation syntax suggestion:

BJSObj.animate({target:value, done:fn(){}})

With a reason...

~over-and-out 

 

[shen]

3 hours ago, Deltakosh said:

In this case you should not ask the system to start it automatically but instead call beginAnimation manually on the object you want

That's what I'm talking about. I tried use beginAnimation, but it's not working.  

https://www.babylonjs-playground.com/#DS22WT 

You can see line 16 doesn't do anything with the animation. 

 

 

BTW, I followed https://donmccurdy.com/2017/11/06/creating-animated-gltf-characters-with-mixamo-and-blender/ to create glTF files with multi actions. drag-and-drop three.js glTF viewer can play animations correctly. I'm not sure about Babylon.js, then it end here. 

[JackFalcon]

@shen

In this case I put a debugger before beginAnimation() and look at the armature and animations.

Usually something is wrong with the skeleton on the import... not a problem with the animation (necessarily). Sometimes it is missing too.

I did find a singular glTF anomaly in export and using AssetManager. (if i recall correctly). perhaps these are different.

Important. With all animations - must prove the concept first.

Build animations gradually - exporting every step.

see what exported and what didn't (see above) ->

because you cannot export everything that you can create in blender...

... then use the blender workflow that is confirmed to export.

BabylonJS does famously on the import -> and I switched back to .babylon files.

you will probably have to experiment on the Blender side. Good tips above.

I was able to do successfully, but it is tricky.

[Guest]

gltf loader relies on the new AnimationGroup features to merge multiple animations together:

https://www.babylonjs-playground.com/#DS22WT#1

Documentation: http://doc.babylonjs.com/how_to/group

[JackFalcon]

+Like1 ~Animation Groups.

 

[shen]

@Deltakosh Thanks! AnimationGroup works.

But I got another question... How to apply beginWeightedAnimation and syncWith  with AnimationGroup like https://www.babylonjs-playground.com/#DMLMIP#1 ? 

 

[Guest]

AnimationGroup.animatables is the way to go.

You can reach each animatable and then set animatable.weight and also call animatable.syncWith

[shen]

https://www.babylonjs-playground.com/index.html#DS22WT#3

Since 3.2.0-beta.1 to the latest, setting animatable.weight to no -1 will cause error. 

            if (weight !== -1.0) {
                this._scene._registerTargetForLateAnimationBinding(this);
            }

BTW, the stable version Babylon.js engine (v3.1.1) I found in https://www.babylonjs-playground.com/indexstable#DS22WT#2 is not a tag in github (AnimationGroup was not supported). 

So, After commit 1c51062c8d9860baa9f91e7757a30cd9c2df35dc, animatable.weight can only be -1 and before that no syncWith for animatable. 

 

 

[Guest]

Looks like a big bug! Will fix it for next nightly

[shen]

I checked out the latest codes. setWeightForAllAnimatables and syncAllAnimationsWith are all there, so I gave them a try...  

https://www.babylonjs-playground.com/#PSR2ZX#17 The animation blending seems different from https://gltf-viewer.donmccurdy.com/ with the same UFO file (abduction_rings animation itself is different on the two viewers too). I guess maybe they retreat weight 0 or -1/stop or not differently and the start time can be different too. 

I also generated a glb file ybot.glb to make something like https://www.babylonjs-playground.com/#DMLMIP#1 and found out it's not working.

In https://gltf-viewer.donmccurdy.com/, the animation blending of ybot.glb is working and seems correct. 

I also find that after the asset file was loaded, not all the items were loaded in scene.animationGroups. So if setWeightForAllAnimatables are used immediately, you will get errors in most cases (for strange case like the UFO file, it just doesn't blending unloaded animation but no error...comment out line 88).

TypeError: runtimeAnimation.currentValue.decompose is not a function

So I start all the animation before set weight. There must be a proper way to do it in certain event... I guess...