游戏循环中 getImageData() 的画布绘制时间问题

Question

我正在开发一个包含绘图循环的小型视频游戏，我在使用 MS Edge 时遇到了一种奇怪的行为（但它在 Chrome 上也以另一种方式发生）。

在某个特定时间，我想获取有关像素的数据并使用，只需一次，ctx.getImageData() 它会在这个非常精确的时刻触发 CPU 内存增加（我知道这个函数很昂贵）......但是在循环的所有下一次迭代中，绘制时间急剧增加。

这里是链接：http://millgraphik.alwaysdata.net/cpu-test/

还有代码：http://millgraphik.alwaysdata.net/cpu-test/js/canvas.js

您可以使用 MS Edge 进行测试，在页面加载后立即启动性能记录。 getImageData 在页面加载后大约 3 秒触发。以下是性能测试结果：

绿色，绘画时长

那么绘画时间增加的原因是什么？

Answer 1

Chrome 和 Edge 现在都基于 Chromium，它使用 GPU 来加速 2D 画布操作。如果您导航到edge://flags 或chrome://flags（在Chrome 上）并禁用Accelerated 2D canvas，您会注意到缓慢的行为会立即开始，而不是在getImageData() 调用之后。这是因为画布现在默认由 CPU 渲染。

但是为什么在getImageData() 之后它开始很快然后变慢？使用 GPU 加速时，Chrome 在使用getImageData() 后似乎至少切换到基于 CPU 的渲染器。

这是来自相关Chromium bug ticket comment的引用：

...

Chrome 的问题是每次调用 getImageData 从 GPU 生成回读，这是一个缓慢的操作。我们 具有将画布切换到软件的性能启发式 大量使用 getImageData 时的渲染模式（无 GPU）。问题是 启发式查找在三个中使用 getImageData 的情况 连续的动画帧。我们需要改变这条规则 会遇到这样的情况。

因此，您的代码正在触发 Chromium 当前用于检测频繁的 getImageData() 调用的任何启发式方法。

Another related comment:

几年前，我们开始使用 gpu 来完成所有与画布相关的操作。 我们遇到的一个问题是 GPU 的运行速度明显慢于 CPU getImageData，但对于所有其他画布，GPU 比 CPU 快 操作。所以我们做了一个决定，第一个 getImageData 调用运行在 GPU 以及对 getImageData 的所有后续调用都在 CPU 上运行。这是 因为我们相信用户可能会做更多的 getImageData 调用，而我们 想要快速处理这些问题。

软件渲染（CPU）结果与 GPU 略有不同 渲染结果，也就是你在两者中观察到的差异 getImageData 调用。

您找到的标志，它允许您指定 getImageData 是否将 经常使用。如果是，请使用 CPU；否则，使用 GPU（意思是 调用 getImageData 不会导致渲染器的变化）。所以 显然，这将解决问题！

我们尚未准备好发布此功能 - 仍在测试中 阶段。我们计划在 M94-95 中推出它。这个问题就会过去 时间。

感谢您的反馈！

Answer 2

我用 CSS display: none; 创建了一个离屏画布，并在这个离屏画布中使用getImageData() 获取我的像素数据。 它似乎用 GPU 来维持绘画。

这是新的测试：http://millgraphik.alwaysdata.net/cpu-test2/

和代码http://millgraphik.alwaysdata.net/cpu-test2/js/canvas.js

编辑：使用片段画布的更好解决方案：http://millgraphik.alwaysdata.net/cpu-test3/js/canvas.js

以及 Edge 上的性能测试（类似于 chrome）：

您如何看待这种新方式？