Consuming So Much Memory

[flowww]

Hello,

Im developing a web interactive app using pixi v 3.0.10 . According to requirement of the application I have to render 300+ images and it can grow in future. Everything works fine with less images but with 300+ images memory grows very swiftly when the application start generating sprites. The memory goes to 800 - 900 MB .

Im not using loader . Im using Texture.fromImage method like this:

 texture = PIXI.Texture.fromImage(imageUrl);

I have tried to remove the texture cache after generating all sprites and adding them to stage :

        for (var textureUrl in PIXI.utils.BaseTextureCache) {
            PIXI.utils.BaseTextureCache[textureUrl].destroy();
        }
        for (var textureUrl in PIXI.utils.TextureCache) {
            PIXI.utils.TextureCache[textureUrl].destroy();
        }

but it throws errors and images goes black:

WebGL: INVALID_VALUE: texImage2D: no image data

TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7
:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7
:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7
:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7
:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7
:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7
:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
:1 WebGL: too many errors, no more errors will be reported to the console for this context.
 Uncaught TypeError: Cannot read property 'naturalWidth' of null

I have also tried the following which doesn't throw any error but doesn't seem to have any effect on the memory :

        for (var textureUrl in PIXI.utils.BaseTextureCache) {
           delete PIXI.utils.BaseTextureCache[textureUrl];
        }
        for (var textureUrl in PIXI.utils.TextureCache) {
           delete PIXI.utils.TextureCache[textureUrl];
        }

with this memory the application doesn't work smoothly and while interacting with the application, memory grows further up to 1.2 - 1.6 GB and application crashes. I have checked and remove some memory leaks earlier which reduced some memory but its still very high. Can you guys suggest me that how can I optimize it ?

[ivan.popelyshev]

You have to empty videomemory too. PIXI.Text , PIXI.Mesh, PIXI.Texture should be destroyed after use. texture.destroy(true) frees videomemory associated with texture and also removes it from TextureCache/BaseTextureCache.

In Pixi version 4 there is garbage collector that can free videomemory automagically.

[flowww]

Thanks for the reply. 

Quote

PIXI.Texture should be destroyed after use.

I am destroying all the textures after adding sprites to the stage but they are not destroying cleanly. I have read a lot that textures should be removed after using but I think textures are linked to the sprites and sprites need to be removed first. right? if that's the case then I cant flush the texture cache if i need all those 300 images on the stage? I will not mind if it has to request for fresh image if it doesn't find the texture in the cache.

Is Pixi 4 stable version is available now?

[ivan.popelyshev]

Are you sure you destroying all PIXI.Text's ? Thats most common cause for memory leak.

Latest dev pixiv4, stable enough: https://github.com/pixijs/pixi.js/blob/dev/bin/pixi.js

GC is on by default, you dont have to do anything.

[flowww]

1 hour ago, ivan.popelyshev said:

Latest dev pixiv4, stable enough: https://github.com/pixijs/pixi.js/blob/dev/bin/pixi.js

I have used Pixi 4 and seems to be reallocating memory consistently but when I click on the images randomly and swiftly to open the HTML popup, even at 500 MB the Chrome tab crashes. Can it be a WebGl memory issue? In normal situation if Im not interacting with the app, it works fine even at 1.3 GB.

When I click on some image to open the HTML popup, the image is removed from the stage using removeChild method and on closing the popup it regenerates the Sprite like it did first time. Then sprite is added back to the stage.

1 hour ago, ivan.popelyshev said:

Are you sure you destroying all PIXI.Text's ? Thats most common cause for memory leak.

Im not using any kind of text. I have only videos and images.

[ivan.popelyshev]

@flowww In that case I have to look at your code. That's not normal behaviour of PIXI. Did you try to profile memory with chrome dev tools?

[flowww]

Thanks @ivan.popelyshev for the responses. This is first time I'm working with Pixi and WebGl application, I didn't realize that GPU acceleration is not enabled in the chrome. That is why it was crashing.

[mattstyles]

Chrome enables GPU acceleration by default, if it can, and has done for a couple of years.

[flowww]

May be but in my case it was disabled.