Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How do I handle extra large sprite sheet correctly


ravinesstream
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...