Change speed ratio of loop animation

[Hersir]

Hi,

I have object thats need to rotate around y forever, but sometimes I need to play that animation slower (from current point). I created Playground, to change speed ratio by click on canvas. Is that correct approach or is there better solutions for that?

And after I regenerate animation on click, it jumps on frame where full circle ends (360 to 0). Looks like it moves around full circle quickly and than continue as usual. That happens if start angle of mesh is not 0.

Thanx.

[aWeirdo]

@Hersir 

Hi,
when working with such a simple thing,
it would be 100 times easier to just use registerBeforeRender and box.rotation.y

http://www.babylonjs-playground.com/#WCY578#16

[Hersir]

@aWeirdo Hi.

Yes I tried that but I need frame rate independent animation as this rotation animation needs to be in sync with other more complex animations (can I somehow sync registerBeforeRender with frame rate?  ).  So idea is to slow down both animations so that their positions matches in both slow down and normal mode. Just they are played slower or in normal rate.

[Nesh108]

@Hersir your way is what I would have done, it gives you control over the animation and you can extend it as needed.

As @aWeirdo said, the alternative would be to work on the registerBeforeRender but I personally prefer to have stuff placed into their own section (e.g. animation stuff within the animation callback). But that works as well  

[aWeirdo]

Hi,

I'm not sure i understand, Everything is dependant on the frame rate, both registerBeforeRender and animations update once per frame.

 

anyway, as @Nesh108 mentioned, animations does give some nice built-in control :-) 

the "jump" is no doubt fixable if that is the main issue, i've got to run now, but will check up on it later if nobody else beats me to it.

[Hersir]

If animation should finish in 2 sec, than it will finish in 2 sec on both 60fps or 10fps. RegisterBeforeRender will be triggered differently on different fps so manual delta time should be added. I am just thinking about performance will creating and recreating the animation kill performance. 

 

Now I will try to fix the jump, as it works ok if start angle is 0, but jumps if start angle is different.

[Nesh108]

@HersirIt's still about the frame ratio you have set when starting the animation.

Because registerBeforeRender will work "at each frame of the animation (each tick)", which is different from the overall framerate. More info: http://doc.babylonjs.com/tutorials/animations#complex-animation

[JohnK]

3 hours ago, aWeirdo said:

I'm not sure i understand, Everything is dependant on the frame rate, both registerBeforeRender and animations update once per frame.

There is a difference between animation frame rate and rendering frame rate because they are talking about different frames.

The rendering frame rate is the speed that a sequence of scenes is drawn. Consider an animation as a series of images (albeit in this case the images are drawn by the BJS engine). The animation frame rate is the speed that a sequences of images are drawn.

Suppose we set an animation speed to be 20 animation frames per second and the rendering speed is 60 rendered frames per second.

In the first 1/20 of a second the first animation frame is displayed but the scene has been rendered 3 times even though the scene image does not change ( expect by camera movement)

So taking your example and thinking about using registerBeforeRender, you want your object to rotate at R radians/second and the rendering speed at any time is F frames/second.

During the rendering loop you can get the rendering speed using F = engine.getFps();

So the time taken for one rendering loop is 1/F seconds and thus the angle rotated by the object during that time will be R/F radians

This way if the animation should finish in 2 sec, than it will finish in 2 sec on both 60fps or 10fps.

http://www.babylonjs-playground.com/#WCY578#17

[Hersir]

Thanx @JohnK