Jump to content

pixi.loader: How to clear resources up?


Recommended Posts

Hey there!

I have a huge spritesheet which I load with `PIXI.loader.add('descriptor.json')`. It works great, however, I want to release memory after I used it and I can't find the right method for it. I can access it (and it's base texture) via `PIXI.loader.resources` dictionary and run `.destroy(true)` on every texture, and then delete values from the hash. However, I'm not sure that this is intended approach and I have OCD that I'm doing things wrong. So, what's the right way?

Any advice would be highly appreciated!


PS: If I understand how things work, this spritesheet will be collected automatically by PIXI GC after some time; however, I use PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL, so... yeah.

Link to comment
Share on other sites

1. call `loader.reset();` when you are dont need all resources used by the renderer. you can also delete individual resources from `loader.resources` map - that will remove resources from loader.

2. calling your atlas baseTexture.destroy() (please investigate what baseTexture is), or calling through texture.destroy(true) - you'll empty all renderer resources (webgl texture) and remove basetexture from cache. Unfortunately, `Texture` instances will still be stored in `PIXI.utils.TextureCache`, but its just simple js objects that hold rectangle coords and no actual data, so they can stay. You can also destroy all `Texture`, that will remove them from that cache too.

I have OCD that I'm doing things wrong. 

Congratulations! You wont be released out of it before you read pixi cache code and pixi texture manager code. I know the code and I'm still checking out cache contents in my games, if I emptied all the stuff. `PIXI.utils.TextureCache/BaseTextureCache` and GPU memory volume of chrome (shift-escape) are my primary tools.

Link to comment
Share on other sites

The best way to be is to make your own system based on SCENES. When you load the scene, load its resources. When you change the scene, move all resources that are used in new one to another loader and destroy all the stuff in old loader. If you make your own scene system, you'll be able to move it between games later, that way you wont need to fix the same bug twice.

If your game is MMO with dynamic loading, well, I'm sure you can deal with pixi internals just fine because renderer is not the biggest problem of MMO games.

Link to comment
Share on other sites

These are interesting points!


You wont be released out of it before you read pixi cache code and pixi texture manager code.

That's what I do on a daily basis :D I'm mostly concerned that I'm not cleaning things up from VRAM, since I can't easily analyse it. However, you've mentioned...


and GPU memory volume of chrome (shift-escape) are my primary tools.

nothing happens when I hit shift+escape (I assume that it may be because you're on windows and I'm on mac). Are you referring to this http://take.ms/ur0Nn ? The problem with it is that I don't think it lists memory consumption correctly. Or, most likely, I get things wrong...

If I create `HTMLImageElement` on my own, load image there, then create `PIXI.BaseTexture` and load texture there via `baseTexture.loadSource(image)`, then my memory usage stays under 15Mbs all the time. Even if I load 1.5K images, it changes just by a couple of MBs... My OS Activity Monitor reports that RAM usage is increasing though. I don't display all images at the same time, rather than playing them one by one (essentially I have 1 sprite and I'm changing `.texture=` property there).

If I load things with `PIXI.loader.add`, then Chrome's FPS/GPU memory meter instantly shows memory usage spike. And memory drops to the initial usage again, when I perform my cleanup routine.

export const cleanupUsedResources = () => {
  let descriptor:string | undefined // descriptor is the JSON file with spritesheet info
  while (descriptor = descriptors.pop()) {
    const cutTextures = PIXI.loader.resources[descriptor]
    Object.keys(cutTextures.textures!).forEach(key => {

    const baseBigResource = PIXI.loader.resources[descriptor + '_image']

    delete PIXI.loader.resources[descriptor]
    delete PIXI.loader.resources[descriptor + '_image']

    console.log("Resources now", PIXI.loader.resources) // empty! PIXI.utils.TextureCache gets cleaned too, btw

My best guess is that PIXI is smart enough to unload the "old" texture from the memory and load the new one synchronously, while keeping things in memory when I use internal loader...

Link to comment
Share on other sites

Yeah, your cleanup for atlas is good enough.

PIXI is stupid, dont believe it, look in source code and debug it.

`BaseTexture.loadSource` doesnt put things in pixi TextureCache. TextureCache and GPU memory are independent, sorry, I dont want to tell more because you can just read sources instead of believing me :)

Link to comment
Share on other sites

I do believe you though :D

Debugging is easy with some understanding which metrics I should observe... At this point I just don't understand how is it possible: why things loaded via PIXI.loader increase my GPU usage, while creating & using textures via new BaseTexture don't :(

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.

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.


  • Recently Browsing   0 members

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