允许更多 WebGL 上下文

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

警告：活动的 WebGL 上下文过多。最旧的上下文将丢失。

有没有办法提高这个限制？我无法在 WebGL 上制作整个页面，并且使用非常有限（没有交互，精简效果），我认为更多的 WebGL 上下文不会使页面滞后或发生其他情况。

并非不可能增加限制。 （你可以编写自己的浏览器）。

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

同一页面上的多个 WebGL 模型

详细说明在本文针对 WebGL and 本文针对 Three.js

这里有3个解决方案。

1. （最快）使用覆盖页面的单个 WebGL 画布。使用占位符元素来标记要绘制内容的位置。循环遍历那些调用的元素element.getBoundingClientRect并使用视口和剪刀设置在这些地方进行绘制，仅绘制可见的部分（有些可能在屏幕外，不需要绘制）。这是上面链接中显示的解决方案。

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

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

   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)
   

3. 使用虚拟 webgl 上下文，您可以自己实现或使用图书馆。不推荐（最慢），但这是一个快速的解决方案。

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

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