pixi.loader: How to clear resources up?

[shlajin]

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.

[ivan.popelyshev]

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.

[ivan.popelyshev]

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.

[shlajin]

These are interesting points!

Quote

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  I'm mostly concerned that I'm not cleaning things up from VRAM, since I can't easily analyse it. However, you've mentioned...

Quote

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 => {
      cutTextures.textures![key].destroy(false)
    })

    const baseBigResource = PIXI.loader.resources[descriptor + '_image']
    baseBigResource.texture.destroy(true)

    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...

[ivan.popelyshev]

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

[shlajin]

I do believe you though 

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

[ivan.popelyshev]

It doesnt work like that. Textures are uploaded in GPU only when they are rendered on screen. If textures have same url, TextureCache will spawn only one texture. I dont have other ideas.

[shlajin]

That's starting to get crazier. I tried to make an illustration of how memory consumption increases, but ended with a demo how it doesn't get consumed at all:

Here's the playground: VRAM stays at 12 MB constantly on my machine https://www.pixiplayground.com/#/edit/qT4ZDt3fV02z51_gdHC7X

[jonforum]

you have multiple way to debug memory consumption 

 

or you can also comput the process memory befor after with your frameWork

 

or with stats

 

or with the window task manage if you are on window