javascript - 如何在网页中同时传播数百个具有动画和交互式 webgl 上下文的小 Canvas ?

标签 javascript html canvas webgl

我有一个网页,文档中有大量 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/createImageDataputImageData 之外,Canvas 的大部分方法(如果可用)都使用 GPU。

除了位图之外,每个 Canvas 都有开销,因此使用单个 Canvas 可以减少这种开销,还可以让浏览器更轻松地解析和更新 DOM。

您应该能够在该 Canvas 上的区域中绘制,就好像它们在单独的 Canvas /图像中一样。

关于javascript - 如何在网页中同时传播数百个具有动画和交互式 webgl 上下文的小 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22176035/

相关文章:

javascript - jQuery:如何选择所有具有 :before 或 :after 的伪元素元素?

javascript - 选定组的 Fabric.js 复制粘贴

image - 将图像从数据 URL 绘制到 Canvas

javascript - 使用 ng-repeat 和 limit-to 以及来自 tether.js 的工具提示时,在 jQuery 中出现上下文错误

Javascript函数来确定一个点是否在一个矩形之间

javascript - 使用内容安全策略阻止 Internet Explorer 11 上的内联 JavaScript

javascript - 如何在 JavaScript 中使用两个数组创建对象文字数组

javascript - 在 JavaScript 中显示文本文件

html - CSS 选择 :placeholder within an Id

javascript - 与物体(墙壁)碰撞