Jump to content

Frame rate and renderer size


Recommended Posts



I've noticed that when I increase the size of the PIXI renderer the frame rate decreases. To check this I removed everything else from my code, so all my code does is create a renderer and a stage and then render the stage in an animation loop. I've pasted the code below. With viewWidth and viewHeight set to ( 120 x 80 ) I get ~60 FPS. However, when I make this 10x larger, ie ( 1200 x 800 ), as in the example code below, then the FPS drops right down to  4 FPS. Seeing as I'm not actually doing anything like drawing different shapes I can't understand why the FPS should drop so dramatically ( or change at all). Can anyone explain why this is happening?





<!DOCTYPE HTML><html><head>  <title>pixi.js test</title>  <style>    body {        margin: 0;        padding: 0;        background-color: #000000;    }</style>    <script src="pixi.js/bin/pixi.js"></script>    <script src="fpsmeter.min.js"></script></head>    <body>    <script>var viewWidth = 1200;var viewHeight = 800;var meter = new FPSMeter();var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";// add render view to DOM                                                                                                                                                                                           document.body.appendChild(renderer.view);// create an new instance of a pixi stage                                                                                                                                                                           var stage = new PIXI.Stage(0xFFFFFF);requestAnimFrame(animate);function animate() {    renderer.render(stage);    meter.tick();    requestAnimFrame(animate);}</script>  </body></html>
Link to comment
Share on other sites

Hi goldenratio,


Thanks for your comments. Yes you are right... as you suggested I tried with a canvas renderer like so:

var renderer = new PIXI.CanvasRenderer(viewWidth, viewHeight);

And now I get 60 FPS with the render size at 1200 x 800 as well as 120 x 80.


I am also using Firefox ( 27.0.1 ) on Ubuntu OS ( 13 ) on a 3 year old laptop. So it seems there is probably some WebGL issues due my setup...


To check this another way, I've tried the same original WebGL renderer code on a new Mac book pro and both 120 x 80 and 1200 x 800 run at 60 FPS.... so the newer hardware has no issue at all.


So this makes a lot more sense now, but I still have a couple more questions:

- I've run lots of really impressive webGL demos on the same old laptop successfully, and with much more than 3 FPS.  So I'm still not sure why I should see such low FPS when I just render a blank screen.  It sounds like this just some buggy webGL for older platforms which just happens to affect the PIXI code more than the other demos?

- I also see the same problem with the canvas renderer  - when I increase the size of the renderer the FPS decrease. Eg. I tried 12000 x 8000 and got just 11 FPS.  I'm not suggesting I ever want a renderer this large! :) But just curious to know why it gets slower when I'm not drawing anything?

Link to comment
Share on other sites

1. Probably they have fallback to canvas if FPS is low? On my Firefox/Ubuntu most of the webGL demos were laggy.


2. I have less knowledge in Pixi's inner workings. Can you try to comment out the rendering part and see if FPS is still low. General rule is that bigger the canvas size, more time it takes to render.

Link to comment
Share on other sites

Hi goldenratio,


1. Yes maybe... they do certainly seem laggy, some work better than others - it must be time I got a new laptop :).


The reason that I have been asking these questions is I'm looking into how possible it would be to do a graphical data display for a customer with something like PIXI JS. This has made me think some more about exactly how new does a laptop have to be for webgl ( specifically PIX JS )  to work well? So I did a quick survey around the office using a simple PIXJS demo I wrote which basically draws ~ 100k polygons and zooms in / out ( not suggesting this is a good design, but just wanted to try out a test to see what was possible) . The result was:

laptops < 2 years old : 60 FPS

laptops 2-3 years old : 30 FPS

laptops > 3 years old ( mine!) : 4 FPS


So basically my demo shows I can do what I need with PIXI JS, but potentially if the customers laptop is > 3 years old performance can really tail off. Its probably still possible on older machines, but there will be a big difference in exactly how much is possible.


2. I commented out the renderering part and I got 60 FPS.  So yes, its the rendering that's taking the time. I appreciate the bigger the canvas the longer it takes to render, but it still seems slow for a blank screen.


Thanks for the feedback.

Link to comment
Share on other sites

The degradation on large canvases only happens on the very old laptop, correct?

It's possible that it's falling back to software rendering. What browser are you testing with?

See the following article. Pixi should probably add support for the flag in Detector, to use canvas when SwiftShader is detected:


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.

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.


  • Recently Browsing   0 members

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