Dynamically Created Three.js Canvas Disappears

Questions
1

I have a page that allows the user to dynamically add/remove graphs, which are created via three.js and <canvas> element. Found information online that confirmed that browser support this and there are no hard limits how many <canvas> elements can be created.
However, after a while when so many <canvas> elements have been created/removed, Chrome issues a warning:

three.module.js:29084 WARNING: Too many active WebGL contexts. Oldest context will be lost.

Then, after a while, some <canvas> elements will disappear.

How can I prevent this?

Before removing a <canvas> element, I dispose/delete all materials and scene objects and then call:

renderer.dispose();
scene.clear();

three.js: 0.170.0

Thanks!

2
  1. There are no limits to <canvas> elements, but there are limits to the number of CanvasRenderingContext2Ds (and these are shared between 2d and webgl contexts.)
  2. Even if you mitigate the limitation on # of contexts in some way, launching the app on iOS / MacOS will keep crashing & reseting the page as it will likely hit the memory limits.

Your best bet would be to assume there’s only one canvas and use something like drei View (docs) to create an impression that there’s more than a single canvas on the screen.

1 Like
3

@mjurczyk
thanks! trying to understand this.
what good are unlimited <canvas> elements if I’m limited in CanvasRenderingContext2D?
next, I can limit the number of graphs the user can create to five (5). But that means, user can delete existing graphs and create new ones, would that help finding a solution?
if the number of CanvasRenderingContext2D is limited, how can I decrease the current count when user deletes a graph? and would that help?

Thanks!