Capping FPS at 60

How can I cap the FPS at 60? I always thought the browser capped canvas fps at 60 by default but I noticed that I was getting 144 fps on Chrome on my other gaming computer.

I don’t know if this had anything to do with new Chrome updates or if I did anything with my browser or computer.

1 Like

Gaming monitor? I get 120fps on mine because it supports 120Hz output.

1 Like

It’s not a visual effect since my game loop is dependent on the fps rate. It was coded for a 60 fps loop and goes completely crazy on my 144 fps computer.

Coding for specific FPS can be dangerous, but you could use this to achieve that:

https://doc.babylonjs.com/babylon101/animations#deterministic-lockstep

(depends actually on your usecase)

I tested this already but unless I used it incorrectly, it doesn’t solve my problem.

While its true that using the lockstep systems allows the same results to be reached given the same initial inputs, my 144fps computer reaches the results faster than my 60 fps computer. This becomes a problem, not only with everything happening faster on the 144fps computer, but also because my server can’t keep up and process all the input packages generated per tick at 144fps.

When you move an entity locally, make sure to use the delta time since the last frame, so:
player.position.x += speed;
Becomes:
player.position.x += speed*deltaTime;
This way your movement code will be frame-independent. Do this for any code that might yield different results based on framerate.

As far as your server goes, is is really necessary to collect inputs every frame? Not a lot changes in a 144hz environment. You could do something as simple as:
var accumulator = 0;
loop(){
....accumulator += deltatime;
....if(accumulator >= 0.016){//1000/60 - a normal 16ms 60hz frame
........collectInputs();
........accumulator = 0;
....}
}

Depending on your game, you could go as low as 30ms, 20 ms or even 10 ms. Even in a fast-paced action game, the difference between 60hz and 144hz inputs would hardly be noticeable. Especially if you don’t give players the chance to experience the latter.

2 Likes

So the question really is: how to get a consistent framerate across browsers?
A lot of game logic goes inside of runRenderLoop, and it needs to run at a consistent rate across browsers. The issue is that Chrome calls requestAnimationFrame’s callback at 120Hz, while Safari calls it at 60Hz. It would be nice if BJS could iron out this inconsistency and call runRenderLoop at the same rate on both browsers…

Maybe we can add a method to Engine, e.g. setRenderRate, which would accept an enum, like FPS_30, FPS_60, FPS_120.

That’s what deltaTime is there for.

Maximum frame rate is pegged to the display refresh rate, so for instance, depending on the display I have plugged in, my max frame rate could be 60, 120 or 240 fps using the same computer, OS and browser.