Multiple PIXI.Application elements on a webpage?

[Agile]

I have a webpage which needs multiple Pixi elements stacked in different places of the page DOM.

Pixi elements are continuously created and destroyed as the webpage is used. At the most there will be 5 Pixi elements used/shown at once. The Pixi elements have their own scope and functionality, and does not need to "know" about each other.

I have to avoid memory leaks as the page can be used for quite some time. Pixi elements can be created and destroyed for hundreds of times while the webpage are in use

Is it good practice just to keep creating and destroying multiple PIXI.Applications (and show multiple at once)?

this.app = new PIXI.Application();

// Use component
...

// Finished
this.app.destroy(true, true);

 

Or should I try to clean and re-use the Pixi.Application instances? Or should I do this in a different way?

 

 

Edited September 23, 2020 by Agile

[ivan.popelyshev]

Yes.

each app has renderer, each renderer has webgl context. There is a limit to active webgl contexts.

If you want to understand more, you have to look at https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop