iOS - Cordova slow RAF performance [Solved]

[ZYandu]

Hello, I'm having issues running PIXI with an autoDetectRenderer in Cordova iOS. It is very slow compared to just loading the page from Safari within iOS.  The goal is 60fps but Cordova is getting ~25fps while Safari has performance that is good enough to be acceptable.

Is there some kind of optimization I have to turn on? The cordova docs claim that the hardware acceleration config option is only available on OSX, not iOS.

I ensured that my game loop function usually takes about 1-5 milliseconds to run in Cordova.

Could it be some kind of overhead that Cordova has set up with plugins or something? The only cordova plugin I'm using is one that I created myself, which takes event input from an external musical bluetooth MIDI controller.

My app is essentially a rhythm game with a big highway of arrows moving as one container with animated sprites that flash at different times and hide/show accordingly to how you played.

How do I get comparable performance to iOS Safari on iOS Cordova with PIXI? (Btw using React to bundle and build all this).

Thanks! ?

 

Cordova docs: https://cordova.apache.org/docs/en/latest/config_ref/

[Jorasso]

Are you sure you didn't turn on Battery Safe Mode when trying Cordova?

[ivan.popelyshev]

antialias: false ,  just in case if you set it to true...

[ZYandu]

After fixing the performance issues, now I am facing a new set of problems where certain sprites are not showing on the screen anymore. I'm guessing it has something to do with the order that they are drawn in PIXI? It is working just fine on Google Chrome and Safari on my Ipad. Then in Cordova it looks like the blue arrow (Animated Sprite) and black background (Png Sprite) have both disappeared. 

Cordova:

Safari:

Both turning off battery safe mode and antialias: false helped with performance so thank you @@jorasso_com and @ivanpopelyshev! ?

For reference on how to fix the requestAnimationFrame speed / performance issue:

I ended up using a WkWebView instead of a UIWebView and that dramatically sped the whole app up, not just the canvas. These were the resources I used to accomplish this:

WkWebView Cordova plugin: https://github.com/apache/cordova-plugin-wkwebview-engine
Explanation of speed increase: https://medium.com/@photokandy/what-a-difference-a-web-view-makes-4d95a34dd338

Because of its speed, my opinion is that this should be more public to Cordova users and even be packaged with Cordova rather than a plugin to integrate. ?

[ivan.popelyshev]

Sorry, my telepathy doesn't work anymore on your case Need more hints to detect whats wrong there. Maybe I'll remember something.

How big are those textures?

[ZYandu]

Each texture for the blue arrow animated sprite is a PNG ~127 KB (there are 20 of them), and the black background sprite is a PNG at 49KB size. It's weird because the green arrow is made out of 6 different sprites made from PNGs ~4KB each and they are showing up just fine.

[ivan.popelyshev]

I mean size in pixels. Width, height

[ZYandu]

@ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView. 

[ivan.popelyshev]

First time I'm hearing that. I thought about 4096 pixels limit on mobile devices webgl. Your case goes to my collection!

[ivan.popelyshev]

Wait, are there any filters on that thing?

[ZYandu]

No, I wasn't using any filters on it. All the colors and design were done in Adobe Illustrator before putting it in the project ?

[ivan.popelyshev]

I've sent you invite to pixijs slack, in case you are interested and you use slack.