How to delete Graphics objects, and free from GPU memory

[GBagley]

Hi,

 

 

I have a pixi.js application that creates and deletes geometry frequently. I basically do some form of this (very simplified example):

var stage = new PIXI.Stage();var my_container = new PIXI.DisplayObjectContainer();stage.addChild(my_container);function foo() {    if (my_container.children.length != 0) {         my_container.removeChildren();     }    obj = new PIXI.Graphics();    obj.drawRect();    my_container.add_child(obj);}

Where foo() is called a lot. Everything renders correctly, but I can see Chrome's GPU memory usage skyrocketing over time. Does the removeChildren() call on a DisplayObjectContainer not doing a complete cleanup on the GPU side? I also thought this might be related to garbage collection not happening (on a global my_container object) so tried refactoring so that the containers were within a function closure instead, but still have the same issue. 

 

Any help on what I might be missing would be much appreciated. Thanks!

[xerver]

> Does the removeChildren() call on a DisplayObjectContainer not doing a complete cleanup on the GPU side?

 

removeChild does nothing but remove that child from the tree. It doesn't cleanup any memory. If you are done with an object, then call ".destroy()" on the object you are done with.

[GBagley]

> Does the removeChildren() call on a DisplayObjectContainer not doing a complete cleanup on the GPU side?

 

removeChild does nothing but remove that child from the tree. It doesn't cleanup any memory. If you are done with an object, then call ".destroy()" on the object you are done with.

 

Thanks. Makes sense. I use .destroy() with Text objects, which works great, but I don't see a destroy() method for Graphics objects. Am I missing something?

[xerver]

Well it does have one because it inherits from Container. There should be one on the object itself to cleanup Graphics specific data though.

 

Honestly what you should be doing is pooling these objects and reusing them. When one is no longer needed you put it into the pool and hide it. Then when you need to "create" a new one you just pull out of that pool, clear it and use it. That way you save the destroy/initialize overhead.

[GBagley]

Well it does have one because it inherits from Container. There should be one on the object itself to cleanup Graphics specific data though.

 

Honestly what you should be doing is pooling these objects and reusing them. When one is no longer needed you put it into the pool and hide it. Then when you need to "create" a new one you just pull out of that pool, clear it and use it. That way you save the destroy/initialize overhead.

 

Yeah, pooling like that would definitely be the better solution. I'm working towards that, but will take some time to go through all my code and refactor it that way. Until then I'm trying to cleanup the biggest offenders in my existing code. 

 

Graphics inherits from DisplayObjectContainer, but I'm not seeing a destroy() there either:

http://www.goodboydigital.com/pixijs/docs/classes/Graphics.html

http://www.goodboydigital.com/pixijs/docs/classes/DisplayObjectContainer.html

 

(or in DisplayObject, which is the base class)

[xerver]

Oh you are using v2, yeah there is not a good way of cleaning those objects up in v2. We added a lot of those methods in v3, the developer preview of which is out now.

[GBagley]

Got it. Thanks!

[Asterius]

On 30/03/2015 at 5:23 PM, xerver said:

Honestly what you should be doing is pooling these objects and reusing them. When one is no longer needed you put it into the pool and hide it. Then when you need to "create" a new one you just pull out of that pool, clear it and use it. That way you save the destroy/initialize overhead.

Hello!

I am just wondering what "clear it" means? removeChildren() is enough?

Do you have any implementation of an object pool I could use?

Thanks!

 

[ivan.popelyshev]

Graphics has special "clear()" method. The shapes that graphics has are not its children.