Do animatables take into account current frame rate?

[royibernthal]

Do Animatables take into account the current frame rate? Specifically when used for animating skeletons via Scene/beginAnimation().

 

Let's assume:

bjs renders at 60 fps

The current fps on a weak machine is 30 fps

I started an animation with a speedRatio of 1

 

Given that frame rate (executing at 50% of ideal fps), is the speedRatio compensated in any way under the hood to 2 instead of 1? Or do I need to compensate for it manually?

If I need to compensate for it manually, is there a dynamic way to base the speedRatio on the current fps?

For instance:

Let's say I started an animation in an infinite loop while the fps was 60. After a while it became 30 - would I have to stop the animatable and create a new one at speedRatio * 2?

In other words, would I have to recreate an animatable in order to have an updated speedRatio that takes into account the current fps?

[JohnK]

A couple of quotes from https://doc.babylonjs.com/features/animations

Instead of giving the time for each frame to be displayed, in BabylonJS the number of frames per second in an animation is given. This should not be confused with the rendering speed of a scene, also measured in frames per second. The animation frames per second is specified in an animation.

frames per second - number, the number of animation frames per second (independent of the scene rendering frames per second)

Would have to check the following statement but I think I am correct.

The speedRatio is like running a video at normal speed (1) or in slow mo (0.5) or fast forward (4).

[royibernthal]

Okay so I understand the animation fps is not dependent on scene rendering fps.

But when there is lag in scene rendering, it means the device is having a hard time to calculate stuff, therefore doesn't it indirectly affect the animation fps as well? (due to device lag rather than being directly tied to scene fps)

 

The most important question is - would I need to compensate in animation speed for lag on device? Or would it really be synced perfectly with time regardless of lag on device?

i.e. would time become subjective to the device's lag or does it always remain objectively accurate? (in the case of animations of course)

[brianzinn]

Yes, when FPS slows down then animation FPS is also affected - as they are the same.  Animations are done as part of render loop.  If you were to write your own smooth animation irrespective of frame rate, you would take the amount of time between the frames (delay) to determine how to proceed with the animation:

delta calculation:
https://github.com/BabylonJS/Babylon.js/blob/6a359893cba45ba93de744027370c54910fac5aa/src/babylon.scene.ts#L2602

animation next frame calculation:
https://github.com/BabylonJS/Babylon.js/blob/master/src/Animations/babylon.animatable.ts#L344
If you were writing your own simple animation then you could just use engine.getDeltaTime(), but animations in Babylon have a lot more going on (options, pause, weights, frame sets, easing effects, etc.).

If you are using physics then you can notice slower devices behave differently - the timeStep can help there, but looks like you are just on animations.  Also, if you are doing collisions with less FPS then there are differences as well.

Cheers.

[royibernthal]

Can you help me understand why this line doesn't take care of exactly that issue? It takes into account the difference in time between now and the previous time things were animated, doesn't it?

https://github.com/BabylonJS/Babylon.js/blob/6a359893cba45ba93de744027370c54910fac5aa/src/babylon.scene.ts#L2602

How'd you best approach compensating for low FPS in animation while still using Babylon's animations? (without creating my own animations solution from scratch)

[brianzinn]

5 hours ago, royibernthal said:

It takes into account the difference in time between now and the previous time things were animated, doesn't it?

Yes, and that's what makes the animation work well and not need to compensate for different FPS rates! In other words, if the animation knows how much to move in 1 second then only the duration of time is important, not the frame rate.  If your frame rate is twice as fast, you will move 1/2 the distance on each render.

[JohnK]

12 hours ago, brianzinn said:

Yes, when FPS slows down then animation FPS is also affected - as they are the same

This is not correct (and from what else you stated I don't think you believe this either). In the first PG below are two boxes running in the same scene so the rendering frame rate must be the same for both. Animation for both is set with 200 animation frames running in a loop from frame 0 to frame 200. Each box has a different animation frame rate and you can see the difference so rendering FPS and animation FPS are not the same.

http://www.babylonjs-playground.com/#9WUJN#69

This is a PG with low rendering fps and a skeleton animation https://www.babylonjs-playground.com/#1F57V still pretty smooth. You can compare it with one without the cause of the slow fps. https://www.babylonjs-playground.com/#1F57V9#1

TL;DR

A change in rendering FPS does not change an animation FPS but will change how the animation is seen. In the same way that the FPS of a film can change how a car wheel is viewed, at some FPS the wheel can appear stationary at others it can appear to rotate backwards, the stroboscopic effect.

Take an animation rendering rate of 30 fps, this means that after 1 second animation frame number 30 is viewed  whatever the rendering fps. So frame 1 is shown between 0 and 1/30 or a second, frame 2 between 1/30 and 2/30 of a second etc..

Take a rendering frame rate of 60 fps, ie each new screen image is calculated every 1/60 of a second and so every 1/60 of a second the animation frame to show is calculated.

since 0 < 1/60 < 1/30 frame 1 of the animation is viewed

at 2/60 = 1/ 30 switch to frame 2

since 1/30 < 3/60 < 2/30 frame 2 of the animation is viewed

etc

after 1 second frame 30 is viewed

Lower the rendering frame rate to 30 fps, ie each new screen image is calculated every 1/30 of a second and so every 1/30 of a second the animation frame to show is calculated.

from 0 to  < 1/30  frame 1 of the animation is viewed

at 1/30  switch to frame 2

from 1/30 to < 2/30 frame 2 of the animation is viewed

at 2/30 switch to frame 3

etc

after 1 second frame 30 is viewed.

Now take a low rendering frame rate of 5 fps,  ie each new screen image is calculated every 1/5 of a second and so every 1/5 of a second the animation frame to show is calculated.

from 0 to <1/5 frame 1 of the animation is shown

at 1/5  = 6/30 switch to frame 6 of the animation (frames 2 to 5 are skipped)

at 2/5 = 12/30 switch to frame 12 (skip 7 to 11 frames)

after 1 second = 5/5 = 30/30 switch to frame 30

after 1 second frame 30 is viewed.

For some rendering fps frame 30 will be skipped, eg rendering rate of 7 frps

at 1/7  = 4.285/30 switch to frame 4 (skip 1, 2, 3)

at 2/7 = 8.57/30 switch to frame 8 (skip 5, 6, 7)

at 7/7 = 30/30 switch to frame 30 

after 1 second frame 30 is viewed

So for low rendering fps frames can be skipped perhaps making the animation less than smooth.

 

 

[brianzinn]

2 hours ago, JohnK said:

This is not correct (and from what else you stated I don't think you believe this either).

Thanks for clarifying and adding the important distinction (and PG) between rendering FPS and animation frame rate.  I was just thinking about rendering FPS as the question was in terms of slower devices 

[royibernthal]

Longest TL;DR I've seen in my life  Thanks for the explanation, I think I get the picture.

[Guest]

TLDR: If your animation is supposed to last 1s, it will last 1s whatever FPS you get