javascript - 如何让 webglcontextrestored 被解雇

Question

我想要使用 WebGL 在其上绘制的大量 HTML canvas。但是，如果我绘制超过 8 或 16 或类似的、取决于客户的数字，较早的数字就会消失。

基于WebGL wiki我认为对 webglcontextlost 和 webglcontextrestored 使用react会解决这个问题……但似乎并非如此。

我基本上试过这段代码:

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

与full fiddle可用。

我有编码错误还是概念错误？

Answer 1

您不能拥有超过 8 或 16 个 WebGL Canvas 。这只是浏览器设置的限制，因为 WebGL 使用大量资源。

您的代码最好的办法是让一个失败，另一个重新启动，但我怀疑大多数浏览器都不能很好地处理这种情况。

如果可以避免的话，您可能实际上并不需要多个 WebGL Canvas ，因为它们无法共享资源。

还有其他解决方案:

一个是使用不随屏幕滚动的单个 Canvas 。将占位符元素放入文档中，然后查看这些元素的位置。如果它们在屏幕上，则在 Canvas 中的适当位置绘制场景。

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

另一个可能是 virtualizing the WebGL contexts所以实际上只有一个上下文。这比较慢，但是 Canvas 的各个用户不必合作