Jump to content

ImageBitmap & Texture.from memory leak :(


Recommended Posts

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");

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


                    createImageBitmap(this.off).then( (value) => {


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

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...