NickJames Posted March 5, 2014 Share Posted March 5, 2014 Hi, 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? Thanks, Nick<!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> Quote Link to comment Share on other sites More sharing options...
kuuuurija Posted March 5, 2014 Share Posted March 5, 2014 code looks fines, you should easily get 60 FPScan you try with "canvas renderer"? instead of auto detect? In some old hardware webGL performs pretty bad. I faced this problem on Firefox in Ubuntu OS (pretty old laptop). Quote Link to comment Share on other sites More sharing options...
NickJames Posted March 6, 2014 Author Share Posted March 6, 2014 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? Quote Link to comment Share on other sites More sharing options...
kuuuurija Posted March 6, 2014 Share Posted March 6, 2014 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. Quote Link to comment Share on other sites More sharing options...
NickJames Posted March 7, 2014 Author Share Posted March 7, 2014 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 FPSlaptops 2-3 years old : 30 FPSlaptops > 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. Quote Link to comment Share on other sites More sharing options...
mattdesl Posted March 7, 2014 Share Posted March 7, 2014 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: http://blog.tojicode.com/2013/12/failifmajorperformancecaveat-with-great.html?m=1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.