Too many active WebGL contexts on Safari

[arvin-leeuwis]

Hi,

I'm currently building a page which has an overlay panel. I placed a inside that overlay. So every time a user is visiting this specific page, the canvas needs to be injected. I was testing it on Safari and saw the following error: There are too many active WebGL contexts on this page, the oldest context will be lost. The weird thing is that it also logs THREE.WebGLRenderer: Context Lost.

Normally, with React Three Fiber, it should destroy the context instead of storing it? Anyone have a fix for this?

No bugs found on Chrome

[drcmda]

this is normal, the message comes from a function that threejs offers to release a canvas called "forceContextLoss". when you unmount canvas fiber must call that function or else the browser would hang on to the memory and you'd have a leak.

there is only a fixed amount of canvases you can create, and browsers decide arbitrarily. it is not a good idea to mount and unmount them between route changes and so on. instead you should keep one instance and unmount canvas contents. see: https://github.com/pmndrs/react-three-next this would also be the same with any router you use, just keep canvas going.

[arvin-leeuwis]

But technically it should not keep those contexts when you navigate from the page, right?

I can't keep one instance, so I have to add a canvas while navigation to a project page. Is there any way to optimise this?

[ayeshah66]

How many canvases (with 3D context) are there on a page connected to this? It's a browser restriction. Making an image and reusing your canvas (or removing them) for 3D within your website are the only solutions to that problem.