我有一个网页,文档中有大量 Canvas 。
<canvas type="myCanvas" width="256" height="256" config="something different for each" ></canvas>
他们必须渲染一些足够简单的东西,以便在性能和内存方面可以接受,但同时 webgl 上下文的数量被浏览器限制为十几个。
另一种方法是保持单个上下文并按顺序更新 Canvas ,类似于具有单个 d3d11device 和多个 dxgiswapchain。
问题:是否有一种有效的方法(没有 gpu 到 cpu 内存传输)将帧缓冲区从由代码创建的独特的启用 webgl 的 Canvas 多次复制到页面中的可见 Canvas ,如果可能,请进行事先测试不刷新窗口外的?
最佳答案
我的建议:
- 使用单一 Canvas
- 改为更新该 Canvas 中的区域
- 除了
getImageData
/createImageData
和putImageData
之外,Canvas 的大部分方法(如果可用)都使用 GPU。
除了位图之外,每个 Canvas 都有开销,因此使用单个 Canvas 可以减少这种开销,还可以让浏览器更轻松地解析和更新 DOM。
您应该能够在该 Canvas 上的区域中绘制,就好像它们在单独的 Canvas /图像中一样。
关于javascript - 如何在网页中同时传播数百个具有动画和交互式 webgl 上下文的小 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22176035/