javascript - 允许更多 WebGL 上下文

问题描述

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

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

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

标签： javascriptgoogle-chromewebglpixi.js

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

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

同一页面上的多个 WebGL 模型

在这篇文章中详细介绍了 WebGL 和这篇文章中的three.js

这里有3个解决方案。

（最快）使用覆盖页面的单个 WebGL 画布。使用占位符元素来标记您想在哪里画东西。循环调用这些元素element.getBoundingClientRect并使用视口和剪刀设置在这些地方绘制，只绘制可见的（有些可能在屏幕外，不需要绘制）。这是上面链接中显示的解决方案。
使用单个屏幕外 WebGL 画布。在您的页面中放置 2D 画布。将每个项目绘制到屏幕外画布并使用 drawImage 将其绘制到正确的 2D 画布上。这个解决方案稍微灵活一些，因为 2D 画布元素可以更自由地设置样式，但它比以前的解决方案慢并且使用更多内存。

注意：最好将 WebGL 画布设置为最大 2D 画布的大小，然后对于每个 2D 画布，将 gl.viewport 设置为该 2D 画布的大小，然后使用完整形式drawImage选择 WebGL 的一部分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)
```
使用可以自己实现或使用库的虚拟 webgl 上下文。不推荐（最慢），但它是一个快速的解决方案。

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

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

javascript - 允许更多 WebGL 上下文

问题描述

解决方案

推荐阅读