What causes higher than 60fps?

[amorgan]

So I know if you accidentally create two engines you can get double the fps, but what about if you have 1 engine created and switching between scenes? On faster computers I can get up to like 100fps or higher, but before it would usually capped at 60fps. I am still using v1.14. I would like to better understand how babylon JS manages this? Can someone elaborate or point me to the section of code that deals with this?

 

It would be hard to duplicate this in the playground, so I was looking for something like, "Oh you need call engine.stopRenderLoop and then functionX before calling engine.runRenderLoop" or something like that.

 

In addition is there something I can do enforce a certain fps? I know I can use a the SceneOptimization, but that seems to only degrade if it can't meet it. What if it is running faster? For example, matching someone's fps who has a slower computer, say at 40fps, even though you are able to run at 60fps?

 

Thank you.

[Red Spark]

I've researched this topic rigorously and came to conclusion that even though you can get as much as 250-999 fps in a browser with some smart hack, it still reads keyboard and mouse input at 60 Hz no matter what. So technically that means players will still experience 16 ms input lag, and you will be just rendering lots of duplicated frames.

[RaananW]

I always thought the browser limits a single canvas to 60 fps... 

What does it bring, when you have 100+ FPS? your monitor doesn't support it anyhow.

[julien-moreau]

It can support, depending on the monitor. It is also called vertical synchronization http://en.wikipedia.org/wiki/Screen_tearing

[amorgan]

So I have the main player character which is being moved by WASD and then some enemy AI that is being moved, which is all done in the renderLoop. When I use BABYLON.Tools.GetFps().toFixed() to output the fps to a div, I can get > 60 fps (which wasn't always the case, > 1 scene now, stopping/starting renderloop,etc). So the experience I am getting is that my logic for moving meshes, directly correlates to the framerate.Thinking about this now, it seems as if that logic should not be in the renderLoop? But if it should not, why does Babylon not have a logicLoop running at a different (controlled) rate? Obviously I can make one, but just thinking out loud.

 

Edit: Just to be clear, I'm not so much worried about that refresh rate, but the control logic rate, which in this case is the same and will and does get updated at the rate reflected in the fps, whether or not the screen can physically do it.

[RaananW]

Javascript is a single-threaded event based language. mouse/keyboard input are async events that are being triggered when the browser allows it. There is no "control" loop, as it is handled by the browser itself. When a user presses anything, an event is triggered and fetched by the framework (check the Scene class for example).

The events are directly influenced by the refresh rate when the refresh rate is lower than 60 fps, as that means that the browser is busy running javascript code (probably something to do with the rendering). At 60 FPS it is possible that the browser is waiting for events and they will therefore run faster. Having said that - if you update (for example) an object's position, the refresh rate is your prime concern, as the object's position might be updated faster, but it will not be shown...

[amorgan]

raananw, thanks for the input, but I believe we are not on the same page. Really my question just stems from the fact that I am getting faster than 60fps and therefore my render loop is getting processed (at least this is what is seems) at the same, higher, rate. So I was seeing if anyone could shed light on how babylon could allow this.

 

And in the context of Babylon there is a control/logic loop, right now it is the renderLoop. I understand that events are asynchronous, but then I have to decide what do with that information, and this is decided in the renderLoop.

[GameMonetize]

How bjs supports rendering:

- Using requestAnimationFrame, we ask the browser to call a callback (the render loop function) each time a frame is rendered. So aiming at 60fps

- On old devices we are using setTImeout(.., 0) for compatibility

 

The browser itself uses DirectX (directly for IE and through Angle for Chrome and firefox). DirectX presents frame on demand but can be synchronized on vertical blank line refresh rate (monitor frequency)

 

I measure FPS using frequency counter from JS but the precision is around 1ms so you could see 60~63 fps just because of precision lack

[amorgan]

Deltakosh, thanks for the reply. I must be doing something incorrectly then. I saw this behavior when I accidentally created two engines, so I must be doing something similar. When running, I am getting above 100fps, which I'm assuming, if I was on a more powerful computer it would actually be running at 120fps. I will look into why this is happening.

[GameMonetize]

oh interesting:)

Creating two engines is clearly the root cause. This is a bug I will fix immediately:)

[Red Spark]

I always thought the browser limits a single canvas to 60 fps... 

What does it bring, when you have 100+ FPS? your monitor doesn't support it anyhow.

 

It's easy to illustrate. Create a 2D circle following mouse cursor and then start moving your mouse around screen really fast, looking at your cursor. I'll notice how circle is lagging behind - this is caused not by monitor's limited refresh rate (otherwise it would affect mouse cursor too), but by the fact that the circle is rendered at position where your mouse pointer was 16 ms ago (actually more because the mouse itself is polled with 8 ms interval by default unless overclocked). This is classic input lag that FPS players are trying to eliminate so much because it introduces noticable negative acceleration / smoothing which can not be tolerated when precision is crucial. When you play 60 Hz Doom 3 or Rage after 1000 fps Quake 3 or Warsow you can instantly feel how your screen movement is lagging behind your actual mouse movement.

 

I had success unlocking fps in browser with window.postMessage() hack (http://www.chandlerprall.com/2011/06/beating-60fps-in-javascript/) and it was showing native 250-999 fps depending on browser, but then I've started tracking mouse events and they were still updating only 60 times per second (values were just duplicated until another 16 ms passes). So that made this hack pointless and the whole prospect of having 200+ fps gaming in browser too.

[amorgan]

Deltakosh, I was able to duplicate the issue in the playground

 

http://www.babylonjs-playground.com/#1NJO7U

 

As you can see I am not creating any additional engines. If you click on the canvas div, it will switch between scenes using stopRenderLoop and runRenderLoop functions (check out the onlick function), which causes the fps to increase, by what seems to be a factor of 2x. You can also click on the fpsLabel to just run it without changing scenes. Can you help explain this?

 

Thanks

[GameMonetize]

This is because they are many renderloop running together.

 

Due to Javascript monothreaded nature when you run this code, youdo not stop the current render loop: (I'm working on a fix)

engine.stopRenderLoop();engine.runRenderLoop(function () { Game.scene[Game.activeScene].renderLoop();});

Actually, you should do this:

engine.stopRenderLoop();setImmediate(function(){	engine.runRenderLoop(function () {		Game.scene[Game.activeScene].renderLoop();	});});

[GameMonetize]

A fix will be available with my next push

[amorgan]

Thanks! I will look forward to that.

 

I tried to use v2.0 before, but was having blender issues. I assume that I will need to export my models using the latest Blender exporter because it has been updated since v1.14?

[GameMonetize]

Yes:)