Understanding best practices for big asset management / performance

[Minimog]

I tried to find answers to these questions online, but was only partially success-full and most of the info I found was for pixi v3 version. Given that we are now on v5 and few things changed, I decided to ask this here to better understand pixi and webgl in general for optimising big amounts of assets.

A small intro to my project
I am working on a mobile / web game that relies on images for it's ui / characters / items / backgrounds etc. In some places we are talking high detail, fullscreen graphics for characters, something similar to this: https://www.artstation.com/artwork/n616E that have more graphics on top of them (equipment slot ui / equipment item graphics).
As you can imagine to have these appear nice and crisp on retina devices some images can be rather big i.e (1125x2436 for a full screen iphoneX screen). And my game has a lot of these.

My current experience with pixi and what I am doing now
Right now I am not doing anything crazy. I have a loader that generates sprites for all my textures. I did however ran into an issue where some of the bigger character graphics caused lag when their scene was displayed because they were being uploaded to GPU (I think?). I was able to solve this issue by using renderTextures, what I did was map through all loader resources, created sprites, rendered them on render textures and stored those references for future sprites. I actually had separate question about this here

My questions / concerns
In general my approach so far has been working good, I see smooth animations and memory usage (at least what I see in XCode when I run app on my phone) looks good. I did start noticing few small hick-ups here and there though further into my development and am concerned that I am loading too many assets now. Furthermore I saw few posts saying that webgl can't handle many textures / big textures and this concerns me. What I want to do now is create separate loaders, so I don't load everything at once and ensure I destroy and recreate my renderTextures as they are needed. I also want to start creating spritesheets to group my assets logically. I have following questions:

1. How big can these sprite-sheets be and how many of them can I have? (My lowest supported target is webgl 1 on safari) 
2. Do I actually need to use renderTextures to ensure my graphics are ready to go at a moments notice, or is there a better approach?
3. When I use loader with my sprite sheets and create sprites from those sources, what do I need to destroy to cleanup? Just loader, or also sprites and texture sources?
4. And in general what approaches / practices would you recommend for handling 100's of assets like examples below in a game designed for high density displays?
5. Is pixi even suitable for this kind of project?

examples (not from my game, but I guess you can picture how big in terms of pixels these can get and there are many of them)
https://www.artstation.com/artwork/n616E
https://www.deviantart.com/maumonts/art/ITEM-ART-World-of-Reos-795990267
https://www.deviantart.com/francescabaerald/art/Map-of-Middle-Earth-Lord-of-the-Rings-642266670
https://www.deviantart.com/evil-s/art/Burnblade-UI-516602551

 

[jonforum]

The maximum texture size for mobile devices should not exceed 2048.
Bigger textures might not be displayed on some devices or might cause jittering sprites.
For pc, i never seen issue on my side,  my most big texture is 3800*3000 ! and work fine.
It should be same for mac ?! 


To answer your questions, thank you for taking the time to make it readable. ?

Quote

1. How big can these sprite-sheets be and how many of them can I have? (My lowest supported target is webgl 1 on safari) 

dont exceed 2048*2048 for safe, it maybe related to minimal hardware support, or perform a splitting  textures in multiple pack , see this soft https://www.codeandweb.com/texturepacker

Quote

2. Do I actually need to use renderTextures to ensure my graphics are ready to go at a moments notice, or is there a better approach?

yes, load texture will not upload to gpu if i dont say shit.
take a look on https://pixijs.download/dev/docs/PIXI.Prepare_.html
The first rendering will load texture to webgl and gpu. look for uploadBaseTextures

Quote

3. When I use loader with my sprite sheets and create sprites from those sources, what do I need to destroy to cleanup? Just loader, or also sprites and texture sources?

loader will add reference in cache, try look in console.log(PIXI.utils.TextureCache) and PIXI.utils.clearTextureCache();
This will just erase root reference of texture for GC, all texture used in sprite will also keep working, until you perform a destroy on sprite to remove all refs or remove sprite ref hitself.
 

Quote

4. And in general what approaches / practices would you recommend for handling 100's of assets like examples below in a game designed for high density displays?

avoid use no rendered mask, and many strange childs hierarchy [sprite=>container=>grafic=>container=>text....]  , ... other many tips provide here by @ivan.popelyshev, i dont know if is obsolete, but btw is good to know.
example : https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips
Also am not remember where, but i seen a wiki on what not to do to avoid broke batching... v5

Quote

5. Is pixi even suitable for this kind of project?

yes ! you just need time.

Edited October 4, 2020 by jonforum

[4Be]

Hi, I have also questions regarding this topic. I'm building a website with pixi.js. Everything is accessed via one index.html, and each section in pixi may load assets.

If I don't do anything about it, browsing through all the sections in the site will accumulate more and more content in memory, and I'm concerned it will be too much for

lower end computers. Currently I load or generate the assets for each section on demand when entering the section, but they stay loaded forever. Section visibility is toggled on and off

when needed.

I tried calling destroy on some assets, but then it would no longer work, even if I tried loading the assets again (no images shown). I probably did something wrong.

Can you suggest an approach for this cases like this, in which assets may be needed again when returning to the same section? I'm not sure if to destroy textures, sprites, the loader, load again or not...

Thank you!