Bug: WARNING: Too many active WebGL contexts. Oldest context will be lost.

[LukeWood]

Current Behavior

WARNING: Too many active WebGL contexts. Oldest context will be lost.

Hello! I'm working on a react-pixi project, https://wizardwars.online. Unfortunately as you play longer performance gets worse and worse, and I believe this is the culprit. Once these errors show up FPS drastically drops, from 60FPS to 30~. I'm not sure why this is happening

Do we need to update react-pixi to call texture.destroy() when components destroy themselves? Could there be another culprit

Expected Behavior

No WebGL context

Steps to Reproduce

Render tons of components, AnimatedSprites, sprites, etc. I've tried with both images and textures. Over time you'll see this bug.

Environment

• @pixi/react version: 7.1.0
• pixi.js version: "7.2.4",
• React version: 18.2.0
• ReactDOM version: 18.2.0
• Browser & Version: Chrome 114
• OS & Version: macos
• Running Example: https://wizardwars.online (must play 5~ minutes of games unfortunately)

Possible Solution

No idea

Additional Information

No response

[LukeWood]

Some additional information: I create my scene as follows:

    this.app = new PIXI.Application({
      resizeTo: window,
      antialias: false,
      autoDensity: true,
    });
    // TODO(lukewood): revisit in case this broke anything
    this.gameCanvas!.appendChild(this.app.view as any);
    this.viewport = new Viewport({events: this.app.renderer.events});
    this.viewport.scale = new PIXI.Point(scale, scale);
    this.app.stage.addChild(this.viewport);
    this.app.start();
    this.cull = new Cull({recursive: true});
    this.cull.add(this.viewport);
    this.app.renderer.on('prerender', () => {
      this.cull.cull(this.app.renderer.screen);
    })
    this.root = createRoot(this.viewport)
    this.raf = requestAnimationFrame(this.tick);

and cleanup like this:

    this.app.stop();
    if (this.raf) {
      cancelAnimationFrame(this.raf);
      this.raf = undefined;
    }
    this.leaveSub?.unsubscribe();
    this.joinSub?.unsubscribe();
    this.root.unmount()
    this.viewport.children.forEach(v => v.destroy())
    this.viewport.destroy()
    this.app.destroy(true);

[LukeWood]

This is probably core pixi related the more I look - closing for now.