Jump to content

WebGL context lost when adding / removing children


Recommended Posts


We're fairly new to pixi.js and so far everything worked great, but we've now run into our first problem we couldn't figure out browsing the forum and the web.

We are currently creating a diagram consisting of lots of elements (about 12.000 elements, could get even more later on). That's going fine so far, but we now added an option for the user to filter the elements on display. So, every time the user changes the filter options, we remove all elements and add the new amount of filtered elements. That still works fine for a couple of times, but after about 9 changes Chrome loses the WebGL context, which leads to nothing being displayed.


A short summary of what we're doing:

1. Initializing the stage

a) Create a new Viewport using pixi-viewport

b) Create all the objects

c) Add our function doing visibility checks to shared ticker


2. When the data changes:

a) Remove function from ticker

b) Remove all children (iterating backwards, so we don't miss any)

c) Destroy every child after removing it

d) Start over at 1. b) keeping the current stage/viewport


From my understanding, there should only be one WebGL context the way we are handling this. Can it be that pixi-viewport does something under the hood we are not aware of? Currently the objects are all sprites, except one container, that we empty as well before removing it from the stage. Before that, some of the objects were Pixi-Graphics, so I thought that maybe these are using up contexts as well, but changing them to sprites did not help.

And the problem only occurs in Chrome & Edge (in Edge even sooner), Firefox seems to do fine. At least I did not get to the point, where the problem occurs. We did not test other browsers since Windows is out target platform, but here the three major browsers should work.

Thanks for any hints what to check.

Link to comment
Share on other sites

Basically, you are doing many things that dont matter

the only wrong thing that can happen to you:

you add 12.000 graphics every tick , you remove them, you create new graphics and add it , right?

in that case you have to destroy old ones.

If its not the case - you have to check your textures, you made too many of them.

Link to comment
Share on other sites


thanks for the reply.

The adding only takes place, when the data changes, not on every tick. And we remove & destroy all the old objects before adding new ones. Textures are not yet used, except the default PIXI.Texture.WHITE using tint() for different colors.

Here's a code snippet of what we do before adding new objects:

// remove ticker function

// remove children from container (not sure if necessary at all
// or already covered by removing children from stage)
for (let i = container.children.length - 1; i >= 0; i--) {
	const child = container.children[i];

// remove all children from stage
for (let i = stage.children.length - 1; i >= 0; i--) {
	const child = stage.children[i];


Link to comment
Share on other sites

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