WebGL context lost when adding / removing children

[Chromical]

Hi,

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.

[ivan.popelyshev]

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.

[Chromical]

Hi,

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
PIXI.Ticker.shared.remove(update);

// 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];
	stage.removeChild(child);
	child.destroy();
}
stage.removeChild(container);
container.destroy();

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

 

[ivan.popelyshev]

It should work. please post the whole reproducible demo.

 

 

Edited February 10, 2021 by ivan.popelyshev

[ivan.popelyshev]

Its much simpler than you think, you made stupid mistake somewhere.
You can also look for used memory through SpectorJS, just take several separate snapshots

[ivan.popelyshev]

Also, all your code is the same as adding container to stage, call it "Scene" and put everything inside. "scene.destroy(true)" should do everything

[Chromical]

Hi again,

I now tried putting everything in a scene object, but that didn't help as well.

I extracted a minimalized version that still can reproduce the bug. Runs perfectly fine in Firefox, but loses the context in Chrome after changing the data several times.

DiagramContainer.tsx StageDebug.tsx useStageDebug.ts