PIXI: How to destroy / cleanup?

[digitallyblue]

Hey all, I'm building a mobile site, where the homepage utilizes pixi.

When I navigate away from the homepage via js (but still within the same HTML page - no page reload) I want to basically clean up PIXI and all objects I've created within it and flag those items for garbage collection.  

Is there a global PIXI.destroy() method that anyone knows of that would help out for this scenario?  Or is this more of a manual process, where I've got to crawl through all of my created textures and call their destroy method?

Any tips are greatly appreciated.

[benny!]

First thing which come into my mind is to use the delete command on all instances you create (also the PIXI ones).

 

Also have a look at. Memory Management in Javascript 

[xerver]

The `delete` command is only used to remove a reference from an object, it doesn't actually delete anything in the sense that the operator of the same name in C/++ does.

 

To clean up WebGL memory you will have to loop through each of your textures and call the `destroy` method on each of them. Make sure to pass `true` as the param to ensure the actual underlying data is cleared from memory. As for any objects you created the best thing to do is remove them all from their respective parents (so they lose their references to eachother) and then lose any references to objects you can access.

 

After you lose all your references, the garbage collector can do it's job and clean up for you.

 

Hope this helps.

[martende]

It is abit old question but ,how to make  cleanup is always very impotant if you dont want later debug leaks . 

For Example I have a stage 

var parentStage = .....

....

    var stage = new PIXI.Container();

parentStage.addChild();

and this stage had sprites , textures  and graphics objects

 

    var tBg = PIXI.Texture.fromImage('images/bg.jpg');

    var sBg = new PIXI.Sprite(tBg);

    var graphics = new PIXI.Graphics();

    stage.addChild ( ... ) 

 

if I want to completely remove stage from parentStage (and from memory ) 

should i do 

 

tBg.destroy();

parentStage.removeChild(stage) 

 

 

or something more ?

 

 

[xerver]

Just make sure to call destroy on anything that you want to destroy.

[martende]

Child Sprites are automatically destroyed ?

[d13]

To clean up WebGL memory you will have to loop through each of your textures and call the `destroy` method on each of them. Make sure to pass `true` as the param to ensure the actual underlying data is cleared from memory. As for any objects you created the best thing to do is remove them all from their respective parents (so they lose their references to eachother) and then lose any references to objects you can access.

Is this actually necessary to do manually or should we just let browsers handle memory management automatically?

[xerver]

You should call destroy. The reason we have the methods there is because things will not just be cleaned up by themselves. References to objects will linger around if you do not call destroy, and more importantly WebGL memory will not be cleaned up unless you call destroy (regardless of if the pixi object is GC'd, we still have to clean gpu memory manually).

[d13]

we still have to clean gpu memory manually).

Do you know if this because of the WebGL spec or browser implementations? 

[xerver]

Spec, remember that WebGL is just OpenGL ES 2.0. Removing an object from gpu memory if you don't store the handle to the texture in js would be very weird indeed.

 

You can upload things to the GPU without keeping a copy in JS.

[d13]

To clean up WebGL memory you will have to loop through each of your textures and call the `destroy` method on each of them. Make sure to pass `true` as the param to ensure the actual underlying data is cleared from memory. 

 

Is this how to do it?

Object.keys(PIXI.utils.TextureCache).forEach(function(texture) {  PIXI.utils.TextureCache[texture].destroy(true);});

[xerver]

That is one way of doing it, sure.

[d13]

That is one way of doing it, sure.

Thank you, Xerver!

I really appreciate the time and care you're taking to answer my and everyone else questions!!!

You're single-handedly bringing us all up to speed with V3 

 

But I do have one more question!

Usually, I would just let the garbage collector and runtime take care of memory management (this is how it works in Flash).

Doing it manually scares me. 

I suppose I shouldn't destroy any textures or Pixi object, or that are still in use?

I don't have a background in OpenGL or any low-level graphics programming, so this is the first time I've used a library with this requirement.

 

Can you suggest what the best practise use of calling `destroy` on Pixi object or textures is?

[xerver]

Thank you, Xerver!

I really appreciate the time and care you're taking to answer my and everyone else questions!!!

You're single-handedly bringing us all up to speed with V3 

 

But I do have one more question!

Usually, I would just let the garbage collector and runtime take care of memory management (this is how it works in Flash).

Doing it manually scares me. 

I suppose I shouldn't destroy any textures or Pixi object, or that are still in use?

I don't have a background in OpenGL or any low-level graphics programming, so this is the first time I've used a library with this requirement.

 

Can you suggest what the best practise use of calling `destroy` on Pixi object or textures is?

 

Good to hear I'm glad I can be of help!

 

To be clear, the GC is still the one doing the memory management. The destroy methods do two things: 1) help ensure the GC can do its job by cleaning up any potentially dangling references, and 2) cleanup gpu memory (for textures) that is *not* garbage collected.

 

You shouldn't destroy anything that you are using, and many apps may not ever call destroy methods (unless you have a long-running app or are creating a destroying things a lot).

[d13]

 

You shouldn't destroy anything that you are using, and many apps may not ever call destroy methods (unless you have a long-running app or are creating a destroying things a lot).

Thanks, that's what I was wondering.

In what typical use case (say for a game) would you want to call `destroy`?

[xerver]

When you no longer want that resource to take up memory, or are finished using it. You should call destroy.

[dominate]

On 5/2/2015 at 0:11 AM, martende said:

Child Sprites are automatically destroyed ?

Need an answer to this. If called container.destroy with true (mycontainerobject.destroy(true)), then its children also will be deleted.

[mohammad-ahmadi]

On 5/3/2015 at 2:41 AM, martende said:

Child Sprites are automatically destroyed ?

On 1/24/2016 at 2:25 PM, dominate said:

Need an answer to this. If called container.destroy with true (mycontainerobject.destroy(true)), then its children also will be deleted.

Guys? what's the answer to this?

If I have a gazillion sprites inside my container,

then does calling :

myContainer.destroy(true);

handles everything for me, or do I have to manually iterate over each sprite and call its .destroy?

[bubamara]

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L518-L542

[xerver]

Docs: http://pixijs.download/release/docs/PIXI.Container.html#destroy

Source: https://github.com/pixijs/pixi.js/blob/6c617a5330a5fbee43d354ba5d7150db5ea1830f/src/core/display/Container.js#L527

[Casio]

` container.destroy({

      children: true,

      texture: true,

      baseTexture: true}

); `

this will not only destroy container but also its all Sprites

i think the API usage description in doc is already clear 

 

for more details:  https://tinyurl.com/r562z2z