performance low fps on iphone 6plus

[Baker Xiao]

pixi.js is doing amazingly well for us on all our android and ios devices except iphone 6 plus. First discovered in our own game, later on we found that it can be successfully reproduced using http://www.goodboydigital.com/pixijs/bunnymark/.

On most devices, it can keep 60 fps at even 50k bunnies, which is impressive. However, iphone 6 plus seems to be an exception. FPS drops to around 30 with just 3k bunnies, and close to zero with 10k.

Anyone has any clue on what's special with iphone 6 plus?

[ivan.popelyshev]

No, but there's small idea: something wrong with browser layer composition. I want to remove all dom elements above canvas, and render FPS on canvas, when i have free time.

 

[Taz]

Also you can experiment with smaller PIXI.settings.SPRITE_BATCH_SIZE. Changing that can have big impact on FPS. Maybe that iPhone model can't handle as big a batch for some reason. Also maybe try PIXI.CAN_UPLOAD_SAME_BUFFER = true; By default it's false for iOS but maybe that iPhone model works better w/ same buffer for some reason...

EDIT: Actually for ParticleContainer the batchSize is passed to constructor, but for normal Container the SpriteRenderer uses PIXI.settings.SPRITE_BATCH_SIZE and PIXI.CAN_UPLOAD_SAME_BUFFER.

[Baker Xiao]

@ivan.popelyshev I tried with our own game and removed all DOM elements above canvas. Not making any visible difference. 

I found that not all iphone 6 plus behave the same. Some ip6p are doing much better than others. Will try digging further and see if we can find anything useful. 

@magig thanks for these tips! Can you explain a bit about what exactly these settings do? I couldn't find a clear understanding from the documentation. 

[Taz]

For sprites in normal container (not ParticleContainer), if the sprites use 'sprite' plugin (the default), then these two settings are used to control the batching.

PIXI.settings.SPRITE_BATCH_SIZE controls how many sprites can be queued for batching before the batch is flushed. The batch also flushes at the end of the frame. Flushing means "draw all of the queued sprites".

If PIXI.CAN_UPLOAD_SAME_BUFFER is false then multiple flushes in the same frame must each use a different buffer for uploading the vertex data. Otherwise the same buffer is used for all flushes. By default this is false for iOS devices and true for all other devices.

Sometimes there's a sweet spot for particular device and sprites and counts, etc. being rendered, too big or too small of a batch size and FPS suffers. For the buffer setting I've always needed default setting for good FPS but maybe there's fringe/freak iOS devices that would benefit from always using same buffer.

Source: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/webgl/SpriteRenderer.js

 

For ParticleContainer OTOH the batch size is instead controlled by the batchSize parameter. I haven't studied/experimented with it much but I would try lowering batchSize and maybe maxSize too (if oversized) and see if FPS is improved for the problem iPhones (for bunnymark or other apps using ParticleContainer).

[Baker Xiao]

Thanks again for everyone helping. So here's what our prototype game is seeing:

unstable_fps.mp4

This happens on iphone6 and 6 plus. FPS can spike up to 120 or drop to 10 pretty randomly. When low fps happens, we can see frame drops visually. This does not happen on iphone6s or google pixel. 

What we have in the scene:

* map tiles are rendered from 2 unique textures, then the whole PIXI.Container has cacheAsBitMap = true.

* each character is a spritesheet divided into 8x20 frames then grouped into several PIXI.extras.AnimatedSprite. At any given moment, only one of the AnimatedSprite is visible, the others are hidden. 

* the HP bars are Graphics. 

* floating damage numbers are PIXI.Text

I consider this as a pretty simple scene, but surprised that it can still run into performance issues. Anyone see what we are doing wrong here? 

[ivan.popelyshev]

try "renderer.textureGC.mode = PIXI.GC_MODES.MANUAL". If it somehow works, then we have a serious problem with GC.

As for tilemap, I recommend https://github.com/pixijs/pixi-tilemap , its faster than just cacheAsBitmap if you use WebGL.

[Baker Xiao]

@ivan.popelyshev thanks! We figured out that it's antialiasing that's causing the biggest hit. Simply turning off antialiasing improves hugely on iphone 6 and 6 plus. Interesting thing is the forceFXAA setting doesn't seem to work at all...