Jump to content

Fastest way to display fps


Pryme8
 Share

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?

Link to comment
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

 

Link to comment
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.

Link to comment
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

Link to comment
Share on other sites

  • 1 year later...
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..?

Link to comment
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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...