How do I handle extra large sprite sheet correctly

[ravinesstream]

I use sprite sheets to take care all the animations in a web game. I have some really big sprite sheet with a size of 14450x5406 and the game will be so laggy when I'm trying to render this into the stage. Since it is a response time vary application which require a no-lag performance, I decided to split those sprite sheets into multiple sprite sheet such that each of them with a size of 2048x2048 after I've read some post as below:

The performance is better than before in the first play of the animation. Let say if the application will 100% chance become laggy in the previous, it's just 50% now. However even the animation is smooth in the first play, It'd become laggy if I gonna render it again after 2-3 minutes(It's still smooth if I'm rendering it again immediately) . 

So splitting the large sprite sheet into multiple sprite sheets may helps a little bit on laggy issue but still the problem exists and I couldn't know the reason.

I play all these huge size animations right after another animations(small size):

Quote

animation0.onComplete = function() { // animation0 and animation1 are two animatedSprite while animation0.loop = false and animation1.loop = true

    animation0.renderable = false;

    animation1.gotoAndPlay(0);

    animation1.x = 100;

    animation1.y = 100;

    animation1.renderable = true; 

}

By laggy I am meaning that the Chrome is like totally freezing.

I read some posts and some of them said that it's because GPU can't rendering anything while uploading texture into GPU. So I've posted another question in the past:

So I prepared all the animation sprite in a loading screen and turned off the GC with the following code:

Quote

PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL;

gameApp.app.renderer.plugins.prepare.upload(stageContainer, ()=>{

    gameApp.app.start();

    renderStageOne();

});

But the same thing is happens. The Chrome is freezes every time when playing the animation with sprite sheet of large size(freezes happens on entering onComplete), not on the small one.

I would like to know any possible reasons and suggestions about this issue. If this cannot be solved in programming level, could I resolve this in hardware way? like buying a better graphic card with more video memory?

[ivan.popelyshev]

You described the problem correctly and your last solution should work. You say it doesn't work, so something is wrong, please prepare the case for us: either a fiddle or a zip-file.

My telepathy doesn't work on this particular case.

11k x 5k  x 4 bytes per pixel = 264MB , and that's both for instance in operative memory (canvas/image) and in videomemory. If your memory is not enough , there'll be extra uploads (swaps) between operative memory and video memory.

[ravinesstream]

Thanks for your reply. How do I check the usage of operative memory? I check the videomemory with nvidia-smi and its usage raises up to 95% when uploading the texture in loading screen and after the loading screen it drops to 70%-80%. 

By the way, my application need to run on two display(in total having a resolution of 3840x1080) with Nvidia 1050 graphic card so it'll become even laggy if I run it on the laptop without the 1050 graphic card.

[ivan.popelyshev]

Browser can store textures in operative memory instead of videomemory, and we cant control that. 

Operative memory = RAM. Shift+escape in chrome shows mem for every tab, and GPU mem for everything. There's no way to determine where exactly is your texture now, but if size of your textures doesn't fit in GPU, there can be 50% lag, like you said.

3840 < 4096 so no texture size limits should affect your case.

[ravinesstream]

I've tried to use Shift+Escape in Chrome to check the GPU memory. The GPU memory drops significantly after 2-3 minutes and that's the time causing laggy. Does GC in PIXI.setting referring to GPU memory? or does it related to Nvidia graphic card?

[ivan.popelyshev]

Its related to graphics backend inside browser. You switched off pixi GC, right?

[ravinesstream]

Yes, with the following code:

PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL;

I use a global array to store the animation sprite for object pool. Is that a common practice?

[ivan.popelyshev]

I don't know whether pools are making it faster or not. Its not guaranteed.

[ravinesstream]

Okay, turns out I didn't turn off the GC. I thought it's an class attribute so

This is what I did:

app = new new PIXI.Application(
            this.boardWidth,
            this.boardHeight
      );
PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL;

But it should be:

PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL;
app = new new PIXI.Application(
            this.boardWidth,
            this.boardHeight
      );

Thanks for all the help.

[ivan.popelyshev]

https://github.com/pixijs/pixi.js/blob/v4.x/src/core/renderers/webgl/TextureGarbageCollector.js#L24

https://github.com/pixijs/pixi.js/blob/v4.x/src/core/renderers/webgl/WebGLRenderer.js#L247

Here's another way to do that:

app.renderer.textureGC.mode = PIXI.GC_MODES.MANUAL

Same applies to any global settings that are assigned to a field somewhere in constructor.