Hello,
I am wondering if we should cap our fps at 60. we don’t need our fps to be any higher for our game to look smooth this is especially true for websites. Also, there are many games that cap their fps at 30 or 60 fps. I have also noticed that there is no easy way of capping the fps in bablon js, is this because it is not recomended to cap the fps? is the engine optimized for varying fps?
The fps are already with a cap of 60 frames per second in Babylon. It seems to me that it depends on the requestAnimationFrame function of Javascript.
1 Like
As @Dad72 mentionned, fps is based of requestAnimationFrame so frequency max will be your screen refresh rate. We do not have a way to limit it per se but you could skip scene.render in your renderLopp if the time since last render has not been long enough.
I have a refresh rate of 144hz and I have implemented a system to skip rendering frames to make it run at 60fps. I am mostly wondering if that is something that is common practice or if using the default refresh rate is recomended.
it most of the time is okay to cap at 60 I guess.
So, Chrome calls requestAnimationFrame at whatever rate your hardware supports, while Safari always calls it at 60Hz (Haven’t tested on Firefox). So to get a constant rate, we need to accumulate the delta time, and only render when it reaches 1/60 second.
IMHO, this should be supported by BJS, e.g. via an option in the Engine constructor. On the other hand, it’s useful to compare the fixed frame rate to engine.getFps() to see how much safety margin we have. We could enable/disable extra features based on performance.
2 Likes
Didn’t know about that. That’s certainly something to consider if that’s what it really is. Anyway, it is like in this meme 
:
1 Like
This is what MDN says:
The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rate is 60hz, (60 cycles/frames per second), though 75hz, 120hz, and 144hz are also widely used.
I was about to say that, as usual, Safari does its own thing… But then I checked the Display settings:
WTF? My M1 Pro MBP can definitely render at 120Hz - Chrome does it! - but Apple’s own Safari thinks it’s capped at 60. Apparently, I’m not alone: MacbookPro 14' (M1 Pro) ProMotion display… - Apple Community.
I am rendering scenes with high rendering loads and am trying to limit the FPS to 30, especially on mobile devices.
To do this, I am skipping the call to scene.render within runRenderLoop, among other things.
However, when I limit the FPS using this method, for some unknown reason, Babylon’s rendering sometimes stops completely even though scene.render is being called (No errors are displayed. This tends to occur when using Snapshot rendering), making it unstable.
If I want to limit the FPS, is this method recommended by Babylon?
Calling beginFrame and endFrame before and after render does not fix the issue.
It would be great if Babylon.js provided a built-in feature to limit the FPS.
It might just be a coincidence, but when I switched to an implementation that uses a custom requestAnimationFrame loop instead of runRenderLoop, the rendering instability issue was resolved.
For your reference, here is the code:
const fps = 30;
let then = 0;
const interval = 1000 / fps;
const renderLoop = (timeStamp: number) => {
requestAnimationFrame(renderLoop);
if (fps != null) {
const delta = timeStamp - then;
if (delta <= interval) return;
then = timeStamp - (delta % interval);
}
engine.beginFrame();
scene.render();
engine.endFrame();
};
requestAnimationFrame(renderLoop);