为什么 WebGL 比 Canvas 慢？

Question

我刚刚开始使用 canvas 和 webgl，阅读一些文章等。据我所知，WebGL 应该比 canvas 快得多，但在以下这些测试中它明显慢：

• http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays
• http://jsperf.com/three-js-canvas-vs-webgl/2

我在 Chrome 和 Firefox 中运行它们，在这两种浏览器中的差异约为 80%。

为什么画布渲染得更快？ jsperf 不准确吗？画布在浏览器中是否变得更加优化？

（PS：我不是测试的作者，我只是找到它们。）

Answer 1

简短的回答是 webgl/opengl 并不意味着一次绘制一个四边形。 GPU 被设计为大规模并行，因此您必须批量绘制才能充分利用 webgl。

您应该比较使用适当的 webgl 实现在画布中绘制 10k 图像与在 webgl 中绘制 10k 图像。但是，您发现的大多数 webgl 库都是为方便客户端而编写的，但不一定是为了获得最大性能。

我的 2d webgl 渲染器实现比画布快得多（100 倍以上），尤其是在您需要旋转/缩放图像时。当然，如果您需要自己的混合操作，那么 webgl 是唯一的选择。