javascript - 允许更多 WebGL 上下文

Question

我目前正在一个包含项目列表的网站上工作。每个项目都有一个缩略图，我正在使用 为所有项目添加着色器效果PixiJS .问题是列表中有超过 16 个项目，所以我收到以下错误:

WARNING: Too many active WebGL contexts. Oldest context will be lost.

有没有办法增加这个限制？我不能在 WebGL 上制作整个页面，而且使用非常有限(没有交互，精简效果)，我认为更多的 WebGL 上下文不会使页面滞后或其他什么。

Answer 1

不是不可能增加限制。 (你可以编写自己的浏览器)。

要列出项目，您可以使用此问答中的解决方案

Multiple WebGL models on the same page

this article for WebGL 中有详细说明和 this article for three.js

这里有3个解决方案。

(最快)使用覆盖页面的单个 WebGL Canvas 。使用占位符元素来标记您想在哪里画东西。遍历那些调用 element.getBoundingClientRect 的元素并使用视口(viewport)和剪刀设置在那些地方绘制，只绘制可见的(有些可能在屏幕外，不需要绘制)。这是上面链接中显示的解决方案。

使用单个屏幕外 WebGL Canvas 。在您的页面中放置 2D Canvas 。将每个项目绘制到屏幕外 Canvas 并使用 drawImage 将其绘制到正确的 2D Canvas 上。这个解决方案稍微灵活一些，因为 2D Canvas 元素可以更自由地设置样式，但它比以前的解决方案慢并且使用更多内存。

注意:最好将 WebGL Canvas 设置为最大 2D Canvas 的大小，然后对于每个 2D Canvas ，将 gl.viewport 设置为该 2D Canvas 的大小，然后使用 drawImage 的完整形式选择 WebGL 的一部分 WebGL Canvas 的正确大小部分以绘制当前的 2D Canvas 。我相信调整 Canvas 大小是一项繁重的操作。换句话说，类似:

for each 2D canvas
   webgl canvas size = max(webgl canvas size, 2D canvas size) // for each dimension
   gl.viewport(0, 0, 2D canvas size);
   draw scene for canvas
   ctx.drawImage(
       0, 0, 2D canvas size, 
       0, webgl canvas height - 2d canvas height, 2D canvas size)

使用您可以自己实现的虚拟 webgl 上下文或 use a library .不推荐(最慢)，但它是一个快速的解决方案。

注意:拥有多个上下文不是推荐的解决方案。纹理、顶点和着色器可以 不是 在 WebGL 上下文之间共享。这意味着如果您在 2 个或更多上下文中使用相同的图像，则必须为每个上下文将其加载到内存中一次。类似地，对于每个上下文，都使用一个着色器，必须为每个上下文编译和链接它。换句话说，使用多个上下文会使用更多内存并显着增加启动时间。

不幸的是，由于您在 WebGL 和 pixi.js 中都标记了您的问题，因此这个答案可能与您无关。我不知道这在 pixi.js 中是否可行。我没有看到任何文件建议如何有效地做到这一点。