Making gravity and camera speed independent from framerate

Questions
1

Quick question about gravity and camera speed. After reading FPS affects game speed, I found that the solution there uses scene.registerBeforeRender. So I went to playground and tried to use it. The result was alright, however not perfect. At 144fps gravity was ever so stronger than on 60fps and I can’t really figure out why. That aside, is there any better way of doing this? Updating camera speed and gravity every frame seems like something I shouldn’t be doing.

2

@GedasFX, for your reference: FPS affects game speed (Framerate independence)?

You may want to introduce a delta time variable (that stores the time difference between two frames) and then multiplying that delta time with anything that shouldn’t be framerate-dependent (e.g. gravity)

3

I have visited that post already (see first hyperlink :smile:), the problem is, is there a better way of doing it, i.e. not doing it every frame? Check my playground example (second hyperlink 31-33)

4

If you used your own code to apply gravity then you would not change gravity but rather displace the camera for each frame depending on the deltaTime for the frame.

When you use Babylon.js for gravity then the displacement is determined by the BJS code, so either you need to either customize the BJS gravity code for your own use, change gravity per frame or update the BJS code and do a PR that allows an option to apply gravity in a deltaTime dependant manner.

5

After furter scrutiny, I realized that camera speed is in fact framerate independant, however gravity is not. Ended up just updating gravity every frame instead. If I find the time, I might check out the BJS source and add a framerate independant option for gravity.

6

I’m running into the same issue. So you ended up changing the scene.gravity for every frame based on the deltaTime?

7

Pretty much,
Created a _tick subject which triggers 20 times per second

    this.babylonEngine.runRenderLoop(() => {
      const animationRatio = (scene.getAnimationRatio() / 60) * tickRate;
      this._dueTicks += animationRatio;
      while (this._dueTicks >= 1) {
        this._dueTicks--;
        this.tick$.next(animationRatio);
      }

      scene.render();
    });

And then, every time that ticks, update gravity

    this.engine.tick$.subscribe((r) => {
      scene.gravity.y = -0.75 * r;
    });