Fastest way to display fps

[Pryme8]

So I lue of this thread 

I thought maybe to increase performance on test runs how would one go about displaying real time fps updates with the least impact in performance. Obviousely use the getFps method I think it is go (might be wrong on its name) .  But the main question is what way is going to be the best way to display it to me with the littlest impact?  A separate time out or interval loop that trottles its calculation rate and outputs to to console?

[NasimiAsl]

witch browser?

chrome have one in developers tools  

[adam]

If you don't see the Rendering tab, you have to press the 3 dots button to the upper right of the console > more tools > rendering

[Pryme8]

wow, you learn something new everyday!

[dbawel]

@Pryme8 -

Actually, I prefer to use my own code - which as I know your skillset is most likely known to you - but for others, here's a simple method to set this up in your script. add this to your CSS file

#fpsLabel {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #999;
    cursor: default;
}

And set the display position wherever you like. Then in your script body, use this:

      engine.runRenderLoop(function () {
         scene.render();
    var fpsLabel = document.getElementById("fpsLabel");
    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
      });

I added in the runRenderLoop function just to show where to call this using the DOM. This is how the FPS is displayed on the playground, and it will not impact performance in any way. Also, you don't need to use any browser tools, and always register your FPS at will without modification to your browser.

DB

 

[Pryme8]

Thats kinda the solution I was thinking, especially because it will work on every browser.
I wanted to include a last calculation output as well, that is a  lastTime - (new Date()).getTime(); so I can get a rough idea of the tick as well besides the fps.

[Pryme8]

http://www.babylonjs-playground.com/#1SVYYM#0

it needs a little bit more done to it... but yeah.

scene.showFps();

[dbawel]

@Pryme8 -

Wow - you might be over-comlpicating your code, as it takes only a few additional lines of code to add in your additional info - although your solution is quite interesting. However, I suppose you're limited to the Playgound environment, so it is a good example for the PG. But for newbies, I highly recommend setting up you DOM element in your CSS file and calling it in the render loop. Having said this, I'm still trying to parse through @Pryme8's solution - and am quite impressed.

DB

[DylanD]

On 10/29/2016 at 3:40 PM, dbawel said:

@Pryme8 -

Actually, I prefer to use my own code - which as I know your skillset is most likely known to you - but for others, here's a simple method to set this up in your script. add this to your CSS file

#fpsLabel {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #999;
    cursor: default;
}

And set the display position wherever you like. Then in your script body, use this:

      engine.runRenderLoop(function () {
         scene.render();
    var fpsLabel = document.getElementById("fpsLabel");
    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
      });

I added in the runRenderLoop function just to show where to call this using the DOM. This is how the FPS is displayed on the playground, and it will not impact performance in any way. Also, you don't need to use any browser tools, and always register your FPS at will without modification to your browser.

DB

 

Hey db I was trying to use this bit of code in my scene, I keep getting a cannot set property innerHTML of null, I'm not sure why, I added all of the code here and it just doesn't work.  Any ideas why I am getting this?  Maybe its outdated..?

[Raggar]

You have to create an HTML element and assign it an ID of "fpsLabel".

<div id="fpsLabel"></>

[DylanD]

8 minutes ago, Raggar said:

You have to create an HTML element and assign it an ID of "fpsLabel".

<div id="fpsLabel"></>

hmmmm yea... I should have thought of that... 

Thanks Raggar!

[dbawel]

@DylanD

I literally pulled this from the babylon.js demo site. This is always a great resource when looking for code examples not found on the Playground.?

DB

[jerome]

I would suggest not to update the DOM element each frame : it's expensive. You could update it only, say, every 60 or 120 frames.

[davrous]

Interesting discussion. As Jerome said, try to avoid updating too often the DOM as the simple fact to display the FPS will... lower the FPS itself! 

Probably the best option would be to display the FPS counter directly in the 3D canvas using a DynamicTexture or the BABYLON.Gui.