Too many active WebGL contexts

Help & Support
1

I am using playcanvas in a react application and I am having different components create their own PC Applications when mounted. I want each of these components to destroy their WebGL context on unmounting. I have used app.destroy() but after I create up to about 15 components… It gives me a warning Too many active WebGL contexts. then the next component crushes the app… How do I lose all the context and registry assets?

2

The maximum limit of WebGL contexts on a single page I think is 16.

So I seem that is your issue, you can’t create more than that in a single page. Though I think getting at those numbers is already too high and will have a performance hit on the GPU.

3

thanks @Leonidas so how do I lose the context manually… or how do I disable it… because I want to cleanup everything to do with the application when I am done…

4

So normally this will be done by the garbage collector when calling app.destroy(). The playcanvas app instance will lose all references to the gl/canvas objects and the garbage collector will clean up.

Are you sure your aren’t holding any reference in a var or property in your code of the pc.Application instances, after calling destroy?

5

nope… I don’t have any other references… it’s the last thing that happens when I am unmouting a component.

6

There is a WebGL extension that you may be able to call (if it’s available) to lose the context before calling app.destroy.

Though I’ve never tried that, not sure how it will behave. What you are already doing, should be working, so if you can provide a sample project that reproduces the issue trying submitting an issue about it in the engine repo (in case there is a bug or something).

this.app.graphicsDevice.gl.getExtension('WEBGL_lose_context').loseContext();
7

let me try it thanks @Leonidas

1 Like
8

@Leonidas looks like the error message changed it’s now crushing with…

ammo.wasm.js:292 Uncaught abort("OOM"). Build with -s ASSERTIONS=1 for more info.
9

Yeah I’d say that was a long shot.

Try then submitting an issue about it in the engine repo.

10

Finally found a way around it… It isn’t the most prettiest but it works… I just have to initialise ammo.js when component loads and get it to null everytime I am destroying application. window.Ammo = null. Then let javascript do the garbage collection for me. Sadly this only works for firefox… chrome now throws a different error on the 3rd component … Memory Access Out of Bounds

11

Memory Access Out of Bounds seems like an Ammo error indeed.

Seems like Ammo isn’t properly released when you call app.destroy(). If that’s the case, this should be a Playcanvas engine issue.