Animation Interpolation And BlendingSpeed

[MackeyK24]

Yo @Deltakosh or ANYBODY how can help... Can you please show me how to do animation interpolation from scene.beginAnimation start and stop range calls and how I can handle 'transition duration'  which I think is blendingSpeed ... the time it takes to blend... I think that would be blendingSpeed but I'm not sure bablonylon blendingSpeed is time in milliseconds or what... I basically got Animation State machine (very early stages) working but I am going from animation clip to animation clip just using scene.begineAnimation with now BlendingSpeed options setup (because I don't know what the really means and to really use it right) and I have now interpolation so going from idle to walk to run is really choppy.... even more so when using blending trees when jumping around in the animation track with so many beginAnimations calls for each direction change on the characters... you can really se with then...

Anyways... some code samples and some description on how to interoperate between animation beginAnimation calls... THANK YOU SO MUCH...

BTW ... Its all going into the toolkit so everybody can take advantage... Not just my own personal use

So if you have some code that already does interpolation ... can I please see it

[Aerion]

I'd LOVE for a character to be able to walk & swing a sword at the same time! <3

 

[JCPalmer]

Mimetus showed easings here.  This is pre playground, but the js fiddle shows an example.  Do other searches for easings.

The ever present problem seems to be switching from one bone state to another where the rotation is very different.  There is a long topic about the problem, where a thing with wings transition.  I recommend reading.

In QI, all I do is interpolate between skeleton poses merged with sub-poses.  It works fine for the skeleton that the poses were exported from.  I was attempting to have the same poses be used on both adult & toddler, and the rotation is not currently correct.  This option makes my code less straight forward.

[MackeyK24]

13 hours ago, JCPalmer said:

Mimetus showed easings here.  This is pre playground, but the js fiddle shows an example.  Do other searches for easings.

The ever present problem seems to be switching from one bone state to another where the rotation is very different.  There is a long topic about the problem, where a thing with wings transition.  I recommend reading.

In QI, all I do is interpolate between skeleton poses merged with sub-poses.  It works fine for the skeleton that the poses were exported from.  I was attempting to have the same poses be used on both adult & toddler, and the rotation is not currently correct.  This option makes my code less straight forward.

 Can I see how you are interpolating ???

[JCPalmer]

Yeah, it is in the Extensions repo.  Here is the directory for skeletons https://github.com/BabylonJS/Extensions/tree/master/QueuedInterpolation/src/deformation/skeletonBased.  There is a lot to explain, since it is an entirely separate animation system, based on queuing animations in multiple queues per mesh (POV, skeleton, & one per shape key group for morphin), all processed by a single before renderer in QI.Mesh.  That is why I refrained from listing it.

In the skeleton area, I export Blender skeleton pose libraries as a QI.SkeletonPoseLibrary.  This is what gets generated for the screen shot below.

The advantage of just shipping the poses is it is much more compact than mocap.  I have taken the approach of only exporting the parts, and doing all animation in BJS.  Moving the performance of animation directly into the runtime environment, while difficult, will eventually overcome regurgitation of foreign animation patched together.

I am just finishing up my speech solution, probably Tuesday.  Then I will begin working on my adult - toddler rotation scaling issue.  I have an un-published scene which is a tool for turning poses into js animation.

[MackeyK24]

Yo @Deltakosh or @JCPalmer

So what exactly is blendingSpeed... Is that a time or what is that...how come ZERO is so SLOW, I would think ZERO would be NO blending more than ZERO would be the length, but that is not so...

Can it be less than zero... can it be more than 1

I need to EQUATE that to a duration... Say I want the blend to be .25 secs or even 1 sec... How would I compute the blending speed value ???

PLEASE

 

[GameMonetize]

The blending speed is the increment added to blending factor on every animation frame:

https://github.com/BabylonJS/Babylon.js/blob/0aa9d94b486cd97b4f7bd78d1015d078e483d6e8/src/Animations/babylon.animation.ts#L581

Blending factor is moving from 0 to 1 to lerp between old animation value and new animation value:

https://github.com/BabylonJS/Babylon.js/blob/0aa9d94b486cd97b4f7bd78d1015d078e483d6e8/src/Animations/babylon.animation.ts#L579

[MackeyK24]

1 hour ago, Deltakosh said:

The blending speed is the increment added to blending factor on every animation frame:

https://github.com/BabylonJS/Babylon.js/blob/0aa9d94b486cd97b4f7bd78d1015d078e483d6e8/src/Animations/babylon.animation.ts#L581

Blending factor is moving from 0 to 1 to lerp between old animation value and new animation value:

https://github.com/BabylonJS/Babylon.js/blob/0aa9d94b486cd97b4f7bd78d1015d078e483d6e8/src/Animations/babylon.animation.ts#L579

Hey @Deltakosh howz it going 

I took a look at the animation and blend factor... How would you suggest I calculate a "Blending Duration" for this... I am taking unity values and if I am going to setup transitions , they use seconds to say how long each transition should take .. say going from idle to walk should be .25 seconds ???

Is there any other way to handle transitioning from idle to walk with some kind of duration ???

[MackeyK24]

Hey @Deltakosh  What about the easing function... Can they be used LIKE blending speed ... Will it still interpolate ???

Could we give it a default blendingSpeed mixed with some kind of easing to achieve what unity is Calling "Transition Duration"

Transition Duration

The duration of the transition, in normalized time, relative to the current state’s duration. This is visualized in the transition graph as the portion between the two blue markers.

...

 Just trying to think of ANYTHING I can use to be able to integrate the Unity Animation System and use it just like you would in Unity to produce your Babylon Animations... So anything you can think of would be great

 

[GameMonetize]

as the speed is per frame and frame animation is by default running at 30fps or 60fps (depending on what you specify on the beginAnimation) we can say that

in 1s we will cover 60x blendingSpeed. So if blendingSpeed =  0.01 you can deduce the length to move from 0 to 1

[MackeyK24]

27 minutes ago, Deltakosh said:

as the speed is per frame and frame animation is by default running at 30fps or 60fps (depending on what you specify on the beginAnimation) we can say that

in 1s we will cover 60x blendingSpeed. So if blendingSpeed =  0.01 you can deduce the length to move from 0 to 1

Thanks for the reply... Unfortunately I don't quite understand STILL. I think I need to go the other way and I just not getting the math...

I need to set the blendingSpeed from a time in secs... So I need to calculate if the duration specified is .25 secs, How much blendingSpeed to give if running at 60 fps...

I don't quite get 1s well be cover 60x (if running 60 fps) the blendingSpend if blendingSpeed = 0.01.

So I should be divided by something to get the value 'X' for blending speed based on desired time (1s) and the fps (60fps) and the clip length is lets say 4 secs

Some things just go over my head I guess...

Or maybe I am thing of the usage of blending speed totally wrong... I am under the impression the blending speed is HOW long the 'interpolation' is going to take got from playing 1 animation to another... If I give that I higher value like 0.2 it goes from idle to walk pretty quick but NOT snapping... if I got lower like .01 it takes a longer time for the transition to complete ... So I get that setting that blendingSpeed to a higher value is goes faster...  because its blendingSpeed * blendFactor (which is calculated in babylonAnimation.ts).

If that is true .. I'm sorry I don't know HOW to calculate the OTHER way around... I don't know what I want blendingSpeed to be so I don't get

if blendingSpeed = 0.01 I should deduce length from 0 to 1...

... Thanks for your reply... I appreciate it

I will take another crack at in the morning

 

[MackeyK24]

21 hours ago, MackeyK24 said:

Thanks for the reply... Unfortunately I don't quite understand STILL. I think I need to go the other way and I just not getting the math...

I need to set the blendingSpeed from a time in secs... So I need to calculate if the duration specified is .25 secs, How much blendingSpeed to give if running at 60 fps...

I don't quite get 1s well be cover 60x (if running 60 fps) the blendingSpend if blendingSpeed = 0.01.

So I should be divided by something to get the value 'X' for blending speed based on desired time (1s) and the fps (60fps) and the clip length is lets say 4 secs

Some things just go over my head I guess...

Or maybe I am thing of the usage of blending speed totally wrong... I am under the impression the blending speed is HOW long the 'interpolation' is going to take got from playing 1 animation to another... If I give that I higher value like 0.2 it goes from idle to walk pretty quick but NOT snapping... if I got lower like .01 it takes a longer time for the transition to complete ... So I get that setting that blendingSpeed to a higher value is goes faster...  because its blendingSpeed * blendFactor (which is calculated in babylonAnimation.ts).

If that is true .. I'm sorry I don't know HOW to calculate the OTHER way around... I don't know what I want blendingSpeed to be so I don't get

if blendingSpeed = 0.01 I should deduce length from 0 to 1...

... Thanks for your reply... I appreciate it

I will take another crack at in the morning

 

 Can anybody else break this down to newbie terms for me... I appreciate @Deltakosh replying, I just don't understand.

To clarify... I have an actual time in seconds (and I know the frame rate and the total length of the animation range in seconds) called transition duration.

this need to be duration of the blend... AKA animation.blendingSpeed. It does not use time is is multiplied but a 'blendFactor' to control the speed of the blend.

the lower the number the SLOWER the blend happens... the higher, the faster... I THINK thats how blendingSpeed works

Anyways... using what delta said above about 1s covering 60x blendingSpeed... I need a formula or calculation that I run to compute WHAT that blendingSpeed should be set to if I want the blend duration to accord over .25 seconds...

A function might look like this:

public computeBlendingSpeed(durationInSeconds:number, frameRate:number, clipLength:number):number {
   
   // Somebody Please Fill In Here
   var blendingSpeed:number = (blah * blah / whatever);
   
   return blendingSpeed;

}

Sorry I just can't figure it out myself... If anybody can PLEASE fill that part in... I would REALLY appreciate it... And make you a friend forever

Just Kidding... We can be friends even if you don't fill in the above

Yo @Wingnut or @Sebavan or @JCPalmer ... Can you guys help

Im giving a general SHOUT OUT

 

P.S. How many smiley faces in this ONE POST... Here is one more

 

 

[brianzinn]

Sounds like a cool project you are working on!  I must be reading this wrong as often occurs, but just not sure how the computeBlendingSpeed() would accomplish that with those parameters unless it is just called at beginning of animation as a "speed goal".  I've seen general samples using window.requestAnimationFrame() and delta from last frame to calculate the needed speed/difference (for smooth animations).  If your animation requested frame rate is 60 and the actual frame rate is less (or varies), I expect the animation should complete as expected...

[GameMonetize]

Hey

let's consider the durationInSeconds is 1 and framerate is 60 fps. This means that you will be called 60 times then the blendingSpeed will be: 1 / 60. You will advance the blendingFactor 60 times from  0 to  1

Now le'ts add some parameters

var blendingSpeed = 1 / (framerate * durationInSeconds)

 

Does it make sense?

[MackeyK24]

5 minutes ago, Deltakosh said:

Hey

let's consider the durationInSeconds is 1 and framerate is 60 fps. This means that you will be called 60 times then the blendingSpeed will be: 1 / 60. You will advance the blendingFactor 60 times from  0 to  1

Now le'ts add some parameters

var blendingSpeed = 1 / (framerate * durationInSeconds)

 

Does it make sense?

Dude... You gotta be kidding... It can't be that simple... WTF.... I been scratching my head for a while now....

 

THANK YOU SO MUCH.... I gonna try that now

 

 

EDIT:

So it ALWAYS 1 /(frame rate / dursecs). even if its 30 fps ???

 

[GameMonetize]

if framerate == 30 then it will be 1 / (30 * dursecs)

[MackeyK24]

1 minute ago, Deltakosh said:

if framerate == 30 then it will be 1 / (30 * dursecs)

Thanks so much:: My VERy SIMPLE compute blending speed function:

 

        public static float ComputeBlendingSpeed(float rate, float duration)
        {
            return 1 / (rate * duration);
        }

 

Trying  it out now... Will take a sec

[MackeyK24]

Yo @Deltakosh  That worked... I got some small issues with More than 1 skin piece ... you can kind of see the Joints in my example 'Distort' for a split second during the blend. But the calculation from unity Transition Duration In sec to animation.blendingSpeed seems to be working fine...

 

Thanks Dude

 

BTW... Did you watch the Character Animation System Video... I almost got a working Babylon JS Animation System Machine System Going... Need to finish a few small things but all in all...Its working better than I even imagined it would... No matter HOW complex the State Machines are , no matter how many layers or sub state machines... The logic is working great so far

 

Heads Up... Im gonna BUG you about root motion... Wait till you se what I got so far and where I stuck there... It might just as simple as your solution to my blending Speed...  Basically I record the root motion animation (Loop Behavior Relative)... I use that recorded motion to actually move the charter transform (an remove that root motion from the actual hips X and Z = 0)

So you can have a variable like:

var rootPosition:Vector3 = this.animator.getRootPosition(); // Already ready for translation movement (Note: Divide by deltaTime to use as velocity)

this.mesh.position = rootPosition;

 

that will actually move the charter along using the motion that cam from the animation (with minimal foot sliding since moving at speed of animation and not having to match user input speed with animation speed).

The problem is I don't my "What is Forward vs What Is Current Position And Rotation" so I can "Apply" that rootMotion to my current position and rotation...

If I use PURLEY the recorded animation values EACH loop ALWAYS forces the move movement forward in the same direction as the recorded animation... No if it was just strait ahead work great because its always moving same direction... If the motion 'arcs' right, at the loop it move forward the exact same as recorded values... But need to apply that motion to where I am... So If a ran a Animation that moves in arc right turn the motion SHOULD MAKE IT RUN IN CIRCLES...

Please Help me with that and I'm done with animation system (until we get blend tree support)

 

I know its something SIMPLE for you

 

[GameMonetize]

I saw it and I appreciated it a lot!

I'm not sure to get the point of your second question  Is there a way to demonstrate it simply?

[MackeyK24]

12 minutes ago, Deltakosh said:

I saw it and I appreciated it a lot!

I'm not sure to get the point of your second question  Is there a way to demonstrate it simply?

Ill make another video... (shorter... just showing root motion)... Post in a but

 

[MackeyK24]

1 hour ago, Deltakosh said:

I saw it and I appreciated it a lot!

I'm not sure to get the point of your second question  Is there a way to demonstrate it simply?

Yo @Deltakosh here is another video trying to explain the root motion problems:

BabylonJS Toolkit - Root Motion Problems

[brianzinn]

Looks like your rotation keeps going back to original position, but you are slowly veering right position-wise. You have another post (http://www.html5gamedevs.com/topic/32728-delta-position-and-rotation/).

I just wanted to refer you to another post from JohnK as it helped me understand rotations better: http://www.html5gamedevs.com/topic/32410-draggable-mesh-with-constraint/?tab=comments#comment-188275
Hope I'm not throwing you off track and this code is totally untested - looks like a tough problem for me to see without issue isolated in a PG. So, my comment to get the last rotation set for next frame is to add delta rotation something like:

private updateDeltaRotation():void {
            if (this.owned.metadata != null && this.owned.metadata.state != null && this.owned.metadata.state.deltaRotation != null && this.owned.metadata.state.lastRotation != null && this.owned.metadata.state.rootRotation != null) {
                this.owned.metadata.state.rootRotation.subtractToRef(this.owned.metadata.state.lastRotation, this.owned.metadata.state.deltaRotation);
                this.owned.metadata.state.lastRotation.addRotation(this.owned.metadata.state.deltaRotation.x, 0, 0);
                this.owned.metadata.state.lastRotation.addRotation(0, this.owned.metadata.state.deltaRotation.y, 0);
                this.owned.metadata.state.lastRotation.addRotation(0, 0, this.owned.metadata.state.deltaRotation.z);
            }
        }

 

[MackeyK24]

27 minutes ago, brianzinn said:

Looks like your rotation keeps going back to original position, but you are slowly veering right position-wise. You have another post (http://www.html5gamedevs.com/topic/32728-delta-position-and-rotation/).

I just wanted to refer you to another post from JohnK as it helped me understand rotations better: http://www.html5gamedevs.com/topic/32410-draggable-mesh-with-constraint/?tab=comments#comment-188275
Hope I'm not throwing you off track and this code is totally untested - looks like a tough problem for me to see without issue isolated in a PG. So, my comment to get the last rotation set for next frame is to add delta rotation something like:

private updateDeltaRotation():void {
            if (this.owned.metadata != null && this.owned.metadata.state != null && this.owned.metadata.state.deltaRotation != null && this.owned.metadata.state.lastRotation != null && this.owned.metadata.state.rootRotation != null) {
                this.owned.metadata.state.rootRotation.subtractToRef(this.owned.metadata.state.lastRotation, this.owned.metadata.state.deltaRotation);
                this.owned.metadata.state.lastRotation.addRotation(this.owned.metadata.state.deltaRotation.x, 0, 0);
                this.owned.metadata.state.lastRotation.addRotation(0, this.owned.metadata.state.deltaRotation.y, 0);
                this.owned.metadata.state.lastRotation.addRotation(0, 0, this.owned.metadata.state.deltaRotation.z);
            }
        }

 

How come you dont  do one AddRotation and specify all three axis.... Looks like you use a separate addRotation for each axis ???

 

[JohnK]

14 minutes ago, MackeyK24 said:

How come you dont  do one AddRotation and specify all three axis.... Looks like you use a separate addRotation for each axis ???

This way you specify the order of rotations you want.

[brianzinn]

1 hour ago, MackeyK24 said:

How come you dont  do one AddRotation and specify all three axis.... Looks like you use a separate addRotation for each axis ???

 

Specifying all 3 separately just matches the use case that I saw before when working with rotation as a Vector3 directly - plus what JohnK said.  I am assuming the rotationQuaternion is null on your meshes, otherwise the .rotation property would be ignored.  In my game I have numerous meshes rotating based on other meshes (location + rotation) in essentially a state machine and to link meshes I use code to sync rotations similar to the new Mesh.setParent(...) that I think was added in 3.0.  I have buttons to pause/unpause animations, which is useful for inspecting meshes and seeing what is happening with rotations/positions at different stages.  I wrote my version of rotation synchronizing across meshes with BJS 2.5 from a PG made by adam that I can't find right now.  Here is the setParent code for getting two meshes to match rotational differences in world space when parenting/unparenting:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.abstractMesh.ts#L1973
Hopefully something like that can setup your next frame rotation correctly - I can't see why your rotations are not additive/reset without more specifics.  Maybe you can make a PG with same behaviour?   Cheers.