2

I want to have a fairly large number of HTML canvas that I draw on using WebGL. But if I draw more than 8 or 16 or a similar, client-dependent number, earlier ones disappear.

Based on the WebGL wiki I thought that reacting on webglcontextlost and webglcontextrestored would fix this… but it does not seem to be the case.

I essentially tried this code:

  canvas.addEventListener('webglcontextlost', e => {
    e.preventDefault();
  });
  canvas.addEventListener('webglcontextrestored', e => {
    render();
  });

with full fiddle available.

Do I have a coding error, or a conceptual error?

Joachim Breitner
  • 25,395
  • 6
  • 78
  • 139
  • 1
    Is there anything that will make the still active ones lose their own context at some point? Otherwise I guess the UA will not restore your context. Using [this fiddle](https://jsfiddle.net/4hzo1L9y/), the automatically lost contexts are *sporadically* restored on my Chrome. – Kaiido Aug 09 '18 at 04:07

1 Answers1

2

You can:t have more than 8 or 16 WebGL canvas. That's just a limit browsers put because WebGL uses lots of resources.

The best your code would do is make one fail and another re-start but I suspect most browsers don't handle that case well.

You probably don't actually want multiple WebGL canvases if you can avoid it since they can't share resources.

There are other solutions:

One is using a single canvas that doesn't scroll with the screen. Putting placeholder elements in your document and then looking where those elements are. If they are on the screen then draw a scene in the appropriate place in the canvas.

A three.js example. A WebGL example. Also a S.O question that kind of talks about this and other solutions

Another might be virtualizing the WebGL contexts so there's really only one context. That's slower but the the various users of th canvas don't have to co-operate

gman
  • 100,619
  • 31
  • 269
  • 393