solved Animation Framerate ... does not control the animation framerate?

[Nodragem]

Hello,

I'm trying the animation system, which is very neat, however, I can't see any effect of the framerate variable of the animation.

Using this playground: http://www.babylonjs-playground.com/#9WUJN#11

If you change the frameRate to 1, you do not obtain a choppy movement of the cube; it continues to move smoothly. I would have expected to see the cube changing position every 1 second.

 

[Guest]

Hello!

The frame rate is meant to be the number of frame per sec. So framerate of 1 means 1 frame per second so it will take time to play the full animation but it will always stay smooth

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

[kcoley]

@Nodragem if you actually want choppy movement of the cube, you can use a Step animation interpolation:

https://www.babylonjs-playground.com/#9WUJN#71

[Nodragem]

That is exactly what I was expecting to see @kcoley!

I did search for an interpolation type property in the animation object, but I did not think of looking in the key frames options  !

@Deltakosh, I tried with frameRate = 60 and frameRate = 0.1, there seems to be no noticeable difference in the duration of the animation.

[JohnK]

This topic might be worth a read

 

[JohnK]

1 hour ago, Nodragem said:

Using this playground: http://www.babylonjs-playground.com/#9WUJN#11

 

5 minutes ago, Nodragem said:

I tried with frameRate = 60 and frameRate = 0.1, there seems to be no noticeable difference in the duration of the animation.

The above PG ties the number of frames to the frame rate hence the consistency even when you change the frame rate. In the topic I suggested above the example http://www.babylonjs-playground.com/#9WUJN%2369

 uses a fixed number of frames and differing frame rates.

[Nodragem]

Thank you very much @JohnK  I think I understand now.

 

@kcoley, it seems that I look at your code too quickly. It does not appear to do what I would expect with step interpolation. Here an example:

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

With an animation framerate of 10fps and with a duration of 10 frames, we would expect to see the cube being drawn 5 times while moving to the right and 5 times while moving left.

 

@Deltakosh, when animation frames are linearly interpolated, to have a variable for "animation framerate" and a variable for the "animation duration" seems redundant.

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

To increase the duration by 10 has the same effect as decreasing the frameRate by 10.

Finally, is speedRatio different from the changing the animation frame rate?

 

I am just wondering, wouldn't be simpler:

- to either set the keyframes in seconds and have a variable "speedRatio" to change the animation speed/duration?

- or to set the keyframes in percentage and have a variable "duration" to control the animation speed/duration?

 

 

 

[kcoley]

@Nodragem are you wanting the cube to move left to right within one second of animation over ten frames?  If so, your playground does that.  

Or are you wanting to use the actual frame rate of the engine?  You can use scene.onBeforeRenderObservable to trigger an event every frame.  

 

[JohnK]

9 hours ago, Nodragem said:

when animation frames are linearly interpolated, to have a variable for "animation framerate" and a variable for the "animation duration" seems redundant.

An animation object has a property framesPerSecond, an animatable object (a running animation) has a speedRatio property, neither have a property of duration or any time setting properties. 

This line creates the animation object, setting amongst other things the framesPerSecond property using the frameRate perameter.

var xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

this line adds the keyFrame array to the animation

xSlide.setKeys(keyFrames);

The keyFrame array is an array of objects of the form

{
    frame: frame number,
    value: value to assign to property 
}

which set values for key frames of the animation, the between frames calculated automatically. Note that the frame property is a frame number not a time. Just because the word duration has been used in the code does not mean a time has been set directly. In the context of the code duration is just the total number of frames in the animation.

So this line

scene.beginDirectAnimation(box, [xSlide], 0, duration, true);

creates the animatable object,  which uses frames 0 to 10 (= duration).

When you play a video you only set the fast forward speed (speedRatio) when the video is playing. In the same way you only apply a speedRatio when the animation is to play, ie when the animatable is (or has been) created hence

on creation

scene.beginDirectAnimation(box, [xSlide], 0, duration, true, 5);

Playground set speedRatio on creation

or after creation

var animatable = scene.beginDirectAnimation(box, [xSlide], 0, duration, true);
animatable.speedRatio = 5;

Playground set speedRatio after creation

In summary an animation lets you set the frame rate and the number of frames and a running animation (animatable) lets you set the speed the animation runs at.

[JohnK]

9 hours ago, Nodragem said:

I am just wondering, wouldn't be simpler:

- to either set the keyframes in seconds and have a variable "speedRatio" to change the animation speed/duration?

- or to set the keyframes in percentage and have a variable "duration" to control the animation speed/duration?

Current Method

Set frame rate to say 30 fps

I want an object to move from position A to position B in 5 seconds, this will take 30 * 5  = 150 frames

In the key frame array set frame N with value for position A and set frame N + 150 with value for position B.

Code calculates the positions for frames N + 1 to N + 149

Run animation drawing new frame every 1/30 second

Keyframes in seconds and have a variable "speedRatio" Method

What data structure should we use to store the pair time T and value V and ensure that at time T we read the value V?

In this case we need to know V at time T, so we could have a function to do this V = f(T). In this case we would need to know the time since the animation started.

With this method we should not be using the animation object but the method in this playground https://www.babylonjs-playground.com/#4U74WL  note you can set speed

Set the keyframes in percentage and have a variable "duration" Method

Complete animation is 2 minutes or 120 seconds

Data structure for percentage of key frames? Array with 100 *10^N entries?

Object takes 7 seconds to move, this is 700/120  = 5.83333.... percent of the time, so frame 583 out of 10000?

Definitely not easier

[Nodragem]

It seemed to me that running an animation at 6fps for a total number of frames (i.e. what I called duration) of 6 frames was equivalent as running the same animation at 60fps for a total number of frames of 60 frames. Furthermore, to run the animation at speedRatio=2 seemed to be equivalent as to run the animation with frameRate*2. Because of all this equivalence, I saw an opportunity to simplify the animation system.

Now, I started to play with the Spline Interpolation, and there, we can see that an animation of 6 frames at 6fps give different results than an animation of 60 frames at 60fps:

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

That means that the tangents' size are dependent on the animation duration (i.e. total number of frames).

Concerning, speedRatio and frameRate, speedRatio=2 is still equivalent as frameRate*2 in term of what happens on the screen.

 @JohnK, if I understood correctly, you are telling that if I set the animation framerate to 60fps with a total number of frames of 600 frames, the animation will take more space in memory than if I set the animation frame rate to 6fps with a total number of frames of 60 frames? Then the question is: why use the 60 fps solution? in any case, that point may need to be added to the documentation, as memory is an important thing to consider on mobile web.

Concerning your point about the data structure, and the complexity, I don't think you need to change the data structure to implement either methods. You can see that vue-babylonjs simplified the animation parameters exposed to the end-user using method 2 (percentage and duration), while not modifying BabylonJS: https://beg-in.github.io/vue-babylonjs/#/animation

Here how the end-user sets up a multiple frame animation:

<Scene>
  <Entity>
    <Animation property="position.x" :duration="3">
      <Key frame="0%" :value="1"></Key>
      <Key frame="20%" :value="5"></Key>
      <Key frame="100%" :value="10"></Key>
    </Animation>
  </Entity>
<Scene>

I guess that the vue-babylonjs developers just use a default framerate (e.g. 60fps) to convert the duration to total number of frames, and the percentage to frames. They also exposed a parameters framerate, in case you want to change the framerate, which could be useful if 60fps animations are indeed more memory costly than 6fps animations. 
 

I am just saying that there maybe users who would feel more comfortable working with seconds or percentage.

 

 

[JohnK]

2 hours ago, Nodragem said:

if I understood correctly, you are telling that if I set the animation framerate to 60fps with a total number of frames of 600 frames, the animation will take more space in memory than if I set the animation frame rate to 6fps with a total number of frames of 60 frames?

No, since the in between frames are calculated not stored. (I may have been a little loose in my description on the array and frame number, frame number N will not be in position N in the array).

2 hours ago, Nodragem said:

I am just saying that there maybe users who would feel more comfortable working with seconds or percentage.

This is more than likely true and as you have shown it is perfectly possible to write a front end to accommodate such users. Whoever wrote the current animation system was clearly more comfortable with key frames by number, frame rate and setting the speed ratio when the animation is running and I must say I agree that it is a very usable, understandable and flexible system. So we must agree to disagree on this.

2 hours ago, Nodragem said:

Now, I started to play with the Spline Interpolation, and there, we can see that an animation of 6 frames at 6fps give different results than an animation of 60 frames at 60fps:

That means that the tangents' size are dependent on the animation duration (i.e. total number of frames).

Yes, for either 6 frames at 6fps or 60 frames at 60fps the full animation is run in one second, so the difference in the positions of the box in these must be down to the interpolation which must depend on the number of frames (I find it very unsettling to use duration for number of frames as it has a time based meaning, it is fine in your Vue example as that parameter in Vue-Babylon does mean ' Length of the animation in seconds ' as shown on the Vue-Babylon docs page.)

Wish you well in achieving the animation you want.

[Nodragem]

Yep, thank you for your answers. I think I can change the status to solved