Performance Tips

[kazoo]

What are some general performance tips that you would have for newcomers to Pixi? Also what should we really take care of if we want to avoid memory leaks, performance issues, etc. I currently destroy all graphics objects, sprites and textures that I use. I also take care of the stage and the renderer. Also I store references to dynamically created objects in arrays and then clear them afterwards when I need to. However I still see small memory leaks here and there. I use chrome dev tools to identify the leaks..

Also, consider this scenario. I have two pages, and on both of them I have a Pixi canvas with some stuff being drawn. When switching from page 1 to page 2, the whole page 2 throttles, until the Pixi canvas is loaded, although this is just a guess for now. However when I remove the Pixi canvas the page loads, fast, normal.. I am just asking this vaguely, since I haven't looked at what might be causing the issue yet, but I want to have some more input before I start. I do draw around 100+ different graphics elements on the second page.. Are there any ways to improve this loading, rendering time of the second canvas? Also I am running this on a 3rd party device, and that's why I need to be very conservative with memory and performance. When running on PC, I do not see performance issues, however the device is also really powerful, so I would not say this is a hardware limitation.

[ivan.popelyshev]

First of all, I'm talking about pixi-v4 (https://github.com/pixijs/pixi.js/tree/dev)

The most optimized part of PIXI is Sprite. Also its not required to destroy sprite, because its not holding any resources on it, its very light object. Also, all graphics that have only one rectangle are treated as sprites, and that way they are rendered faster. I recomment to use "renderer.generateTexture(graphics)" if you have only a number of different graphics objects. That way you convert them to sprites and they are much faster.

There's a good strategy if you are switching between a number of scenes: create loader for every scene, so when it ends you can just iterate through its textures and destroy them all. Dont forget to destroy dynamic textures you did create. If you want to see if you forgot to remove something, look in PIXI.utils.TextureCache, it contains all static that was not destroyed.

I recommend to turn on PIXI GC: do renderer.textureGC.run() periodically or set it to auto mode. Please look at the sources to see how it works and which parameters it has.

[kazoo]

OK, it seems that it is time to move to Pixi-v4. Thanks for the help Ivan, I will try and do all the things you mentioned.

[ivan.popelyshev]

@kazoo tell me if you'll have problems with it.

Btw, latest V4 build is here: https://dl.dropboxusercontent.com/u/46636530/pixijs/pixi.js . I cant upload it to repo, you have to either build it from repository either use this dropbox link

[kazoo]

@ivan.popelyshev I will thanks, I'll use the latest of course. 

[kazoo]

Ivan, any way you can help me with this, it's kinda specific, but I need to understand how to make it more performance efficient. Here is a jsfiddle, https://jsfiddle.net/h3gswp76/. It has no visible output, just the js code for the sake of easier formatting there, than here on the forum. What that function does is that it creates an initial element, makes a sprite out of it, then repeats it x amount of times and creates another sprite out of the whole bunch of those elements, essentially creating a list, which is actually a single sprite. I then use a 3rd party library to slide that long list of elements, etc. 

The issue is that on mobile, that function executes in about 2-3 seconds, which is way too slow, since when I navigate to the page which executes this function the whole page hangs until it creates this sprite. Is there anything I can do to improve this process that I have here, to make it faster? 

I also omitted the part where I also add text elements within this function, just to make it more concise, but I guess that text creation also adds to the performance issue, so I would need a solution to that too.

 

[ivan.popelyshev]

Can you tell me how much of it its in cycle, and how much for rendering 550x4000 thing? 

Its possible that on mobile you dont have that much memory initially, and browser does some garbage collection or mallocs for it. Are you using browser or a wrapper like cordova?

[ivan.popelyshev]

please look at renderer.render method signature, it has an option to NOT clean when you need it. That way you can just render each individual graphics into resulting texture, without using new RenderTexture(400, 50);

[kazoo]

If you mean by an animation cycle, then no, it just goes through the function once, and that's it. It takes 2 seconds for just the function to finish, which is too slow. So it goes, like this, I press a button on a page which is supposed to navigate me to another page. When I press that button, I wait 2-3 seconds and only then does the second page with the canvas display. It hangs, 2-3 seconds just waiting for this function to execute.

[ivan.popelyshev]

1 minute ago, kazoo said:

If you mean by an animation cycle, then no, it just goes through the function once, and that's it. It takes 2 seconds for just the function to finish, which is too slow. So it goes, like this, I press a button on a page which is supposed to navigate me to another page. When I press that button, I wait 2-3 seconds and only then does the second page with the canvas display. It hangs, 2-3 seconds just waiting for this function to execute.

You dont even know exact time that functions takes. Please look how much time it spends in your cycle (for i=0;i<96) and how much time it spends after it

[kazoo]

I do know, I use performance.now() to measure the time it takes to execute, and I use the chrome profiler. On PC, it's pretty fast, performance.now() measures it at 51.12ms, while the profiler measures it at 14.3 ms. However when I run this on a 3rd party device, which is my final target, the measurement at performance.now() is at 2132.29ms. I can't get the profiler info on the device tho.

[ivan.popelyshev]

Yes, and that's why you can measure those two times separately  Tell me how it goes.

Also try that thing with "renderer.render(testBox, renderTexture, false);" . You can just call render 96 times instead of using 96 sprites there. Please tell me how it goes too.

[Zenext]

4 hours ago, ivan.popelyshev said:

There's a good strategy if you are switching between a number of scenes: create loader for every scene, so when it ends you can just iterate through its textures and destroy them all. Dont forget to destroy dynamic textures you did create. If you want to see if you forgot to remove something, look in PIXI.utils.TextureCache, it contains all static that was not destroyed.

Hi Ivan,

Little offtopic here but wanted to ask for some help with optimization techniques when switching scenes. So in my project I have 4 scenes, main game and 3 bonus games. Right now it works this way that on startup game loads all the images for all the scenes, so TextureCache is constantly filled with textures for all scenes. Moreover I initialize all the scenes on startup, so later I just show/hide the Containers when I need to switch to another scene. Is it a normal way of doing things? The problem here is also that switching between scenes happens quite often, and loading time between those is not something I can afford. Any advice on improving the situation, as right now I feel like I am doing smth completely wrong?

Btw appreciate all your work on Pixi, really great job, thanks

[ivan.popelyshev]

@Zenext thank you!

You have to calculate how much memory all your scenes cost. Just assume that each pixel in texture costs 4 bytes. If that number is small, well, you dont have to GC static stuff. Just destroy() dynamic textures and Text objects.

And even then you dont have to worry about it if you just do "renderer.textureGC.run()" periodically. @GoodBoyDigital said they do exactly that in new games on pixi-v4.

If all your scenes consume ~500MB memory, well, then I recommend to unload some scenes. Just remove all texture and create loader for the scene again.