时间戳

首页 > 解决方案 > 如何让 webglcontextrestored 被解雇

javascript - 如何让 webglcontextrestored 被解雇

问题描述

我想要使​​用 WebGL 绘制大量的 HTML canvas。但是，如果我绘制超过 8 个或 16 个或类似的、依赖于客户的数字，早期的数字就会消失。

基于WebGL wiki，我认为对此做出反应webglcontextlost并webglcontextrestored会解决这个问题……但似乎并非如此。

我基本上尝试了这段代码：

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

提供完整的小提琴。

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

标签： javascripthtml5-canvaswebgl

解决方案

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

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

如果您可以避免使用多个 WebGL 画布，那么您可能实际上并不想要多个 WebGL 画布，因为它们无法共享资源。

还有其他解决方案：

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

一个 three.js 示例。一个 WebGL 示例。还有一个关于这个和其他解决方案的SO问题

另一个可能是虚拟化 WebGL 上下文，所以实际上只有一个上下文。这速度较慢，但​​画布的各个用户不必合作

推荐阅读