Sign in to follow this  
Pryme8

Fastest way to display fps

Recommended Posts

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?

Share this post


Link to post
Share on other sites

@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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites
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..?

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.