Performance issues going from v2 to v3

[narklord]

I'm working on a web app that renders a lot of images anywhere from 400 to 100k. Transition to v3 has resulted in some strange performance issues even on the small image collections. Overall the fps is much smoother in v2 and v3 has a lot more spikes.

 

We use multiple sprite batches for sprites that share the same image. Is there any major differences between the v2 spritebatch and v3 ParticleContainer?

 

There may be 10 - 50 ParticleContainers being used at different times. We use sprite.visible = false to cull sprites and often move the same sprites between ParticleContainers and Containers depending on which texture they are using. (The texture changes as you zoom in and out, moving from spritesheets to individual images)

 

Performance seems to improve when the options object isn't passed into the ParticleContainer.

new ParticleContainer(100000); instead of new ParticleContainer(100000, {scale: true});

[xerver]

>  Is there any major differences between the v2 spritebatch and v3 ParticleContainer?

 

Yes, they are actually completely different (which is why we renamed it). Sprites in a particle container have some of their properties uploaded to the GPU statically. Then all calculations related to the sprites happen on the GPU, with almost no CPU interactions. That is where the huge speed boost comes from. That means though, that the statically uploaded things cannot change on the sprite (or if they do it is ignored). The options parameter tells the container which properties you want to have dynamically uploaded (instead of statically uploaded) which means they can change, but each dynamic upload is a small performance cost.

 

Adding/removing sprites from a ParticleContainer causes a reupload of all the properties, even the static ones, which is pretty expensive. If you are adding/removing sprites to/from particle containers all the time then you are likely getting worse performance than a normal container, since it has to recalculate and reupload everything every time you do a child change like that. (obviously multiple changes in a single frame only result in a single upload).

 

 

Best case for using a particle container is to fill it with sprites, then just modify the properties you had set to dynamic and leave them alone otherwise.

 

> We use sprite.visible = false to cull sprites and often move the same sprites between ParticleContainers and Containers depending on which texture they are using.

 

`visible` property isn't honored in sprites within a particle container (bug: https://github.com/GoodBoyDigital/pixi.js/issues/1910). So your culling doesn't actually do anything on webgl because of that, another reason your performance is probably taking a hit, though I suspect the biggest problem is the moving around of sprites from under particle containers.