允许更多的WebGL上下文

问题描述：

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

I'm currently working on a website with a list of items. Each item has a thumbnail, and I'm adding a shader effect on all of them using PixiJS. The problem is that there's more than 16 items on the list, so I'm getting the following error :

警告:活动的WebGL上下文太多.最早的上下文将丢失.

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

是否有增加此限制的方法?我无法在WebGL上制作整个页面，而且使用范围非常有限(没有交互作用，没有特效)，以至于我认为更多的WebGL上下文不会使页面变得迟钝或类似.

Is there a way to increase this limit ? I can't make the whole page on WebGL, and the usage is so limited (no interaction, lite effect) that I think more WebGL contexts will not make the page laggy or something.

答

不是无法增加限制. (那么您可以编写自己的浏览器).

Not it is not possible to increase the limit. (well you could write your own browser).

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

To make a list of items you can use solutions like in this Q&A

同一页面上有多个WebGL模型

在这篇关于WebGL的文章和针对Three.js的这篇文章

这是3个解决方案.

(最快)使用覆盖整个页面的单个WebGL画布.使用占位符元素标记要绘制对象的位置.循环调用element.getBoundingClientRect的那些元素，并使用视口和剪刀设置在这些位置绘制，仅绘制可见的位置(某些可能在屏幕外，无需绘制).这是上面链接中显示的状态.

(fastest) Use a single WebGL canvas that covers the page. Use place holder elements to mark where you want to draw things. Loop through those elements calling element.getBoundingClientRect and use the viewport and scissor settings to draw in those places, only drawing the ones that are visible (some may be offscreen and don't need to be drawn). This is the soution shown in the links above.

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

Use a single offscreen WebGL canvas. Put 2D canvases in your page. Draw each item to the offscreen canvas and use drawImage to draw it to the correct 2D canvas. this solution is slightly more flexible since the 2D canvas elements can be more freely styled but it's slower than the previous solution and uses more memory.

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

Note: it's probably best to make the WebGL canvas the size of the largest 2D canvas, then for each 2D canvas, set gl.viewport to the size of that 2D canvas and then use the full form of drawImage to select a portion of the WebGL the correct size portion of the WebGL canvas to draw the current 2D canvas. Resizing a canvas is a heavy operation I believe. In other words something like:

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 virtual webgl context which you can implement on your own or use a library. Not recommended (slowest) but it is a quick solution.

注意:建议不要使用多个上下文. WebGL上下文之间不能不共享纹理，顶点和着色器.这意味着，如果您在2个或更多上下文中使用同一图像，则必须为每个上下文将其加载到内存中一次.类似地，对于每个上下文，必须针对每个上下文编译和链接着色器.换句话说，使用多个上下文会占用更多内存，并显着增加启动时间.

Note: having multiple contexts is not a recommended solution. Textures, vertices, and shaders can not be shared between WebGL contexts. That means if you use the same image in 2 or more contexts it has to be loaded into memory once for each context. Similarly for each context a shader is used it has to be compliled and linked for each context. In other words using multiple contexts uses more memory and increases startup time significantly.

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

Unfortunately since you tagged your questions both WebGL and pixi.js this answer is probably irrelevant to you. I have no idea if this is possible in pixi.js. I see no documentation to suggest how to do it efficiently.

允许更多的WebGL上下文

相关推荐