Theoretical question here.
I’m looking into implementing a time-based animation in BabylonJS.
I’ll create a custom use case for this question:
Use Case
I want to show an animation of a driving car based on historical data.
This historical data states:
At 0 seconds the car is standing still on the road.
At 1 second, the car is at 10 meters.
At 2 seconds, the car is at 50 meters
At 5 seconds, the car is at 200 meters.
I prefer to display this with a “time-based animation” if possible. If it’s not, please let me know.
Here is the required behavior (and what should be avoided):
There are two users: someone with a fast computer, another with a slow computer
Fast user runs the Babylon app at 60 fps.
Slow user runs the Babylon app at 20 fps.
After 5 seconds in real time, both the fast and slow user must see the car at 200 meters.
The slow user might have experienced a more jerky-movement, but that doesn’t matter.
Priority here is that both users see the car at the exact same spot on the road after 5 seconds.
It must be avoided that the users see the car on 2 different locations after 5 seconds due to them running different FPS speeds.
Questions this raises in BablyonJS:
In BabylonJS, I was originally thinking of building the driving animation as a new Animation(),
and then use “keys” to state:
- on frame: 0 the car is at position 0 meters.
- on frame: 60 the car is at position 10 meters
- on frame: 300 the car is at position 200 meters.
The thought I run into here, is that, since the slow user only has a 20 fps system, it will take him 15 seconds to reach frame 300, and thus 15 seconds to see the car at position 200 meters.
This would be very problematic and not the behavior I’m looking for.
My second thought is:
Maybe BabylonJS already taking that into account? And the framerate in new Animation() is meant to define a relative framerate of the animation, relative to my keys. And BabylonJS knows that when I say that the car should be at 200 meters after 300 frames, it will know that the programmer expects the car to be at 200 meters after 5 seconds instead of after a literal 300 frames?
In this case, I shouldn’t break my head over this because BabylonJS already implements it time-based by default.
Those are my questions.
Or shouldn’t I be using animations at all for this and is there something else I should be doing to reach the requested behavior?