ImageBitmap & Texture.from memory leak :(

[JErvin]

I can't figure out what I am doing wrong. I noticed in my resize function (called by mouseWheel event) it's consuming memory radiply, and eventually GPU memory full and webgl canvas crash, visuals disappear (and I see in the task managger the GPU memory freed after the crash).

What I am doing: I create an offscreenCanvas with the canvas's actual width and height. I draw a radial gradient to this offscreen canvas. I create an ImageBitmap (createImageBitmap func). In the createImageBitmap promise I set a class variable to this ImageBitmap. If this class variable  exists (not null) I change a sprite's texture to this imageBitmap (with Texture.from). I tried calling sprite.destory, texture.destroy and many other things, but it's just not working, as long as I am using Texture.from(someImageBitmap), it seems the memory stuck in the video ram for some reason.

 

  resize(){ //called by mouseWheel event
               const w=this.canvas.width, h=this.canvas.height; 

                this.off=new OffscreenCanvas(w, h);
                const ctx=this.off.getContext("2d");
                if(ctx){

                    const sz1 = 3.5, sz2=2;
                    const rad1 = w/sz1>h/sz1 ? w/sz1 : h/sz1;
                    const rad2 = w/sz2>h/sz2 ? w/sz2 : h/sz2;

                    var grd = ctx.createRadialGradient(w/2, h/2, rad1, w/2, h/2, rad2);                
                    grd.addColorStop(0, "rgba(0,0,0,0)");
                    grd.addColorStop(0.3, "rgba(0,0,0,0.03)");                
                    grd.addColorStop(1, "rgba(0,0,0,0.09)");

                    ctx.fillStyle=grd;
                    ctx.fillRect(0, 0, w, h);

                    if(this.radialGrad){ //Set by createImageBitmap promise see below
                        //this.gradientG.destroy(); //Tried this to destroy the sprite, recreate, add to stage again
                        //this.gradientG = new  Sprite();  
                        //this.app.stage.addChild(this.gradientG);               
                
                        this.gradientG.texture.destroy(); //Doing "nothing"

                        //If this called the memory stuck in the GPU ram, if I remove this line no memory leak                   
                        this.gradientG.texture = Texture.from(this.radialGrad); 

                        //Texture.from(this.radialGrad); //even with this, no variable assignment, no reference to the result, memory leak created

                        this.gradientG.x=0;
                        this.gradientG.y=0;
                        this.gradientG.width=w;
                        this.gradientG.height=h;  
                    }

                    createImageBitmap(this.off).then( (value) => {
                        this.radialGrad=value;                  
                    });        
                }
}

 

How can I free from the GPU memory this Texture.from(someImageBitmap) ?

[ivan.popelyshev]

Texture.from() stores texture in internal pixi cache, that's why I personally dont use it. If you care about memory , you have to look all the sources about caching, texture free mechanism, e.t.c. 

There are no docs about it, no articles, only a few explanations on forums. 

1. Pixi GC : free videomem if not used for some time. TextureGCSystem

2. Texture Cache: easy system to store link to JS textures in maps

Specifically for gradients there's example how to hook into pixi textures mechanism: https://pixijs.io/examples/#/textures/gradient-resource.js

It allows to store and upload whatever you need. Again, you have to know how TextureSystem works to do it.

You can try pester someone at pixijs discord

 

Edited May 27, 2022 by ivan.popelyshev

[JErvin]

3 hours ago, ivan.popelyshev said:

Again, you have to know how TextureSystem works to do it.

It seems I don't need to know how TextureSystem works, I just used the gradient example and this way works, no memory leak anymore. Thank you!

[ivan.popelyshev]

On 5/28/2022 at 12:11 AM, JErvin said:

It seems I don't need to know how TextureSystem works, I just used the gradient example and this way works, no memory leak anymore. Thank you!

yeah, nice

[Exca]

You are also creating a new offscreen canvas on each event. That will consume lots of memory fast. Can you reuse a single canvas?