Jump to content

Worst Performances with Pixi 1.5.1 than 1.4.2 with WebGL on Android

Mathieu Anthoine

Recommended Posts

Here is the two demos :


With Pixi 1.4.2: http://yamago.com/site/html5/streaker/


With Pixi 1.5.1: http://yamago.com/site/html5/streaker15/



On Android Nexus 7 2013 in Chrome browser, the animations and the background are smooth with 1.4.2 (60fps) but hiccup in 1.5.1 (22fps)

No problem with canvas rendering or on Desktop.


Mat ? Have you some ideas about this weird behavoir ? 


Thanks for your help

Link to comment
Share on other sites

Thanks very much for the offer! Keen to get to the bottom of this one for sure, and two heads are always better than one :)


Its a bit of an odd one really - I have been profiling the game on a htc1 and there is definitely somthing going on..

Whats weirder is that the 1.5 has a 94% idol time whilst 1.4.1 has 70% idle time. Very quirky behaviour.


A couple of things to try I guess that could shed some light.


How does this version fair with the game? https://github.com/GoodBoyDigital/pixi.js/releases/tag/v1.5.0

Also if you try changing request anim frame to setTimeout/setInterval just to test to see what happens that would be cool!



Link to comment
Share on other sites

Here are 2 new demos:


With Pixi 1.5.0: http://yamago.com/site/html5/streaker150/


With Pixi 1.5.0 + setTimeout instead of requestAnimationFrame : http://yamago.com/site/html5/streaker150_timeout/


The version with setTimeout freeze totally on my Nexus and works as the other well on Desktop


Hope it could help.

Link to comment
Share on other sites

FYI, I have the exact same issue.


I only realized that it was a recent Pixi issue after reading this thread (and doing some testing), as I hadn't tried 1.4 on mobile. I've had WebGL turned off on android because the performance was so bad (but I'm getting ~60fps with canvas, so I was ignoring it for the time being)


I've tried it on the Nexus 4, 5 and 7 with the same results - WebGL gets a frame-rate in the low 20s, Canvas right at 60 (once the JITter has settled, anyway)

Link to comment
Share on other sites

I get straight up browser crashes when I do transparency on graphics objects with current WebGL on Samsung Galaxy Note 3. Happens in both firefox and chrome, and can be replicated on samsung galaxy s3.


Hi there! Not sure what you mean by "do transparency with graphics" ? If you could provide an example I will definitely take a look for you and make sure it gets resolved. thanks!

Link to comment
Share on other sites

Updated on this version : http://yamago.com/si...l5/streaker150/


It seems better even if I have the feeling that it's not as smooth as the 1.4 but it's really difficult to appreciate, the background is as smooth as the 1.4 version (it wasn't before your fix) but the main character seems to hiccup a little bit.
Hard to say, maybe someone can complete the test.
Good job anyway ;)
Link to comment
Share on other sites



Works on desktop, crashes on Mobile. There's a small chance it's due to using Scala JS, but had no issues prior to changing alpha values. 


I forced the renderer in the newly uploaded version to be canvas. This fixes the issue. Thus, the only difference between the version that hard crashes the mobile android browsers and the one that works fine is the choice of autodetect versus canvas. 


I'm going to take the demo down for a bit and will put up a simplified a/b later. Thanks.

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...