Javascript 如何在一个网页中同时传播上百张带有动画和交互式webgl上下文的小画布？

我有一个网页，有大量的画布散布在一个文档中

<canvas type="myCanvas" width="256" height="256" config="something different for each" ></canvas>

他们必须提供足够简单的内容，以便在性能和内存方面可以接受，但同时出现的webgl上下文的数量受浏览器限制为十几个

另一种方法是保留单个上下文并按顺序更新画布，类似于使用单个D3D11设备和多个dxgiswapchain

问题：是否有一种有效的方法（无gpu到cpu内存传输）将帧缓冲区从由代码创建的唯一的屏幕外启用webgl的画布多次复制到页面中的可见画布上，如果可能，请事先进行测试以不刷新窗口外的画布？

我的建议：

• 使用单个画布
• 改为更新该画布中的区域
• Canvas的大多数方法（如果可用）都使用GPU，除了

  getImageData

  /

  createImageData

  和

  putImageData

  之外

每个画布除了其位图之外还有一个开销，因此使用单个画布可以减少此开销，并使浏览器更容易解析和更新DOM

---

您应该能够在画布上绘制区域，就像它们位于单独画布/图像的位置一样。

不确定您想做什么，也许这就是您的建议，但是

您可以渲染到一个基于WebGL的画布，然后使用drawImage复制到多个基于2D的画布。实际上类似于

<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<canvas id="c3"></canvas>

AFAIK这将是一个基于GPU的渲染（将WebGL的画布作为纹理绘制到另一个画布的帧缓冲区纹理中，至少是Chrome），尽管我不是100%确定。这很容易测试。下面是一个片段

//制作相对较大的画布以显示可能的回读
风险值宽度=2048；
var高度=2048；
变种numCanvases=3；
var webgloffscreencavas=makeCanvas（）；
var gl=webglOffScreenCanvas=webglOffScreenCanvas.getContext（“实验性webgl”）；
var上下文=[]；
对于（变量ii=0；ii

---

canvas{边框：1px纯黑色；边距：0.5em；}

My Sever penny:重构以保持在12个同步曲面限制内。是的，我已经实施了类似的解决方法，强制在页面顶部设置一个透明的全屏画布，并在跟踪画布的位置上进行渲染，因为我问了这个问题。它仍然存在问题，chrome vs firefox，边界上的像素对齐不足一些矩形和滚动时的一帧延迟。我可能能够解决这一问题，毕竟这是我使用javascript+webgl的第一天。我只是觉得这是一个系统上的许多手动覆盖，用于首先为您处理页面布局。

var webGLOffScreenCanvas = document.createElement("canvas");
var gl = webglOffScreenCanvas = webGLOffScreenCanvas.getContext("experimental-webgl");

var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");

var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
var ctx3 = c3.getContext("2d");

drawSomeWebGLSceneForC1(gl);
ctx1.drawImage(webGLOffScreenCanvas, 0, 0);
drawSomeWebGLSceneForC2(gl);
ctx2.drawImage(webGLOffScreenCanvas, 0, 0);
drawSomeWebGLSceneForC3(gl);
ctx3.drawImage(webGLOffScreenCanvas, 0, 0);