nmiguelmoura Posted December 20, 2015 Share Posted December 20, 2015 Hi all, I'm experiencing some performance issues with PIXI in my macbook pro retina. When on webGL, i'm getting small FPS when compared with Canvas Renderer, even on very simple animations. This is specially true when using safari (9.0.2). I'm using this setup for pixi: var resolution=window.devicePixelRatio;var renderer=PIXI.autoDetectRenderer(824,768,{resolution:resolution,autoResize:true,antialias:true});PIXI.RESOLUTION=2; Is this a normal problem? Thanks for the help,Nuno Quote Link to comment Share on other sites More sharing options...
xerver Posted December 20, 2015 Share Posted December 20, 2015 Have you profiled to see where the slowdown is coming from? The code you posted can't have any performance impact, because it does nothing Quote Link to comment Share on other sites More sharing options...
chg Posted December 20, 2015 Share Posted December 20, 2015 It enables AA, that might account for a small effect on performance (And, if only using sprites I don't think it'll have much of an effect on the look of the output) Quote Link to comment Share on other sites More sharing options...
nmiguelmoura Posted December 20, 2015 Author Share Posted December 20, 2015 Thank you both for your answers. The problem is not the AA, but the resolution set to devicePixelRatio and the image sizes. If i set it to 1, it's ok. Here's a snap of code that gets strange results (the image used is big. If i use the bunny from pixel examples, the performance is way better): <!DOCTYPE HTML><html><head></head><body><script src='pixi.min.js'></script><script> var renderer=null, stage=null, Main=(function(){ 'use strict'; var self; function Main(args){ self=this; this.setupPixi(); } Main.prototype.update=function(){ renderer.render(stage); window.requestAnimationFrame(this.update.bind(this)); }; Main.prototype.setupPixi=function(){ var resolution=window.devicePixelRatio; renderer=PIXI.autoDetectRenderer(824,768,{resolution:resolution,autoResize:true,antialias:true}); document.body.appendChild(renderer.view); stage=new PIXI.Container(); // create a texture from an image path var texture = PIXI.Texture.fromImage('https://pixabay.com/static/uploads/photo/2015/12/18/02/46/cats-eye-nebula-1098160_960_720.jpg'); for(var i=0;i<10;i++){ // create a new Sprite using the texture var bunny = new PIXI.Sprite(texture); stage.addChild(bunny); } window.requestAnimationFrame(this.update.bind(this)); }; return Main; })(); new Main(); </script></body></html> Thanks again,Nuno Quote Link to comment Share on other sites More sharing options...
nmiguelmoura Posted December 20, 2015 Author Share Posted December 20, 2015 Hi, forgot to say that while the above code doesn't do nothing instead of displaying the same image 10 times (just for testing), the whole safari gets very slow and unresponsive with this. If i add interaction or animations from this point on, everything gets very slow and unresponsive. Thanks Quote Link to comment Share on other sites More sharing options...
chg Posted December 20, 2015 Share Posted December 20, 2015 The problem is not the AA, but the resolution set to devicePixelRatio and the image sizes. If i set it to 1, it's ok.^ I read that as the problem definitely isn't a bottleneck on fillrate, but it might be a bottleneck on fillrate because when I drop the resolution of the screen buffer it's ok (ok, there'd be a difference in terms of shader execution...)Any chance this article: http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html is right about devicePixelRatio being quirky on the Macbook Pro? Hi, forgot to say that while the above code doesn't do nothing instead of displaying the same image 10 times (just for testing), the whole safari gets very slow and unresponsive with this. If i add interaction or animations from this point on, everything gets very slow and unresponsive. ThanksCan you try the browser's profiler to see where it's spending it's time? EDIT: Also just curious does using a power of two sized texture make any difference eg. resize your nebula to 512x512 or 1024x1024? (I'm assuming this will have very little effect... but it should be a quick thing to try) nope, still leaning towards fillrate, we've a large-ish buffer and 10x overdraw afterall, so it seems conceivable Quote Link to comment Share on other sites More sharing options...
nmiguelmoura Posted December 21, 2015 Author Share Posted December 21, 2015 I'm worried about performance in MBP because i thought that it could have similar performance in other retina devices, but that article showed me that MBP is way different than iOS devices in what concerns to devicePixelRatio. Thanks a lot. The funny thing is i'm using stats.js and FPS is always higher than 30, but screen updates in animations seem far worse than that, and interactions too. I'm guessing its an MBP safari problem. In chrome and firefox, everything seems way better (but Canvas is still better than webGL too). Quote Link to comment Share on other sites More sharing options...
chg Posted December 21, 2015 Share Posted December 21, 2015 I'm worried about performance in MBP because i thought that it could have similar performance in other retina devices, but that article showed me that MBP is way different than iOS devices in what concerns to devicePixelRatio. Thanks a lot. The funny thing is i'm using stats.js and FPS is always higher than 30, but screen updates in animations seem far worse than that, and interactions too. I'm guessing its an MBP safari problem. In chrome and firefox, everything seems way better (but Canvas is still better than webGL too).Low perceived frame rate versus average frame rate might suggest that your frame rate is really uneven / you have stuttering. It could just be my aging laptop but I find stats.js seems to really hurt framerate for me. Quote Link to comment Share on other sites More sharing options...
nmiguelmoura Posted December 21, 2015 Author Share Posted December 21, 2015 Thanks, with or without stats, it's slow anyway and the profile seems to be normal, only the _tick and update function running after a while, and the whole browser continues a bit unresponsive. I'm starting to believe this is an issue in safari for macbook pro, because the whole browser gets slower. That's not the case in other browsers. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted December 22, 2015 Share Posted December 22, 2015 It's not an issue for me, runs at a solid 60fps. I actually had some pretty heavy GPU stuff going on in a different tab and still solid 60 fps. I'm on a mid-2014 rMBP, so its running a GT750M. Tested with stats running, no deviation from 60 and I ran it for a couple of minutes (not that it would make any difference). Quote Link to comment Share on other sites More sharing options...
nmiguelmoura Posted December 24, 2015 Author Share Posted December 24, 2015 Thanks, My MBP has an Intel Iris, its the entry model. Perhaps that's the problem. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted December 28, 2015 Share Posted December 28, 2015 The mid-2014 ones have both, the Iris and the Nvidia, the Nvidia will only kick-in when necessary but for my test I'm pretty sure it was used because I was doing some other heavy GPU stuff. (although that would have been paused in the other tab). I have had severe slow-down problems in Safari vs Chrome (but also FF vs Chrome) but I think in my case it was to do with lots of heavy JS calculations, not with the webGL rendering portion. Without profiling I cant be sure. I was also only using small textures so havent got any other tests ready with large textures. 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.