WebGL与Canvas 2D硬件加速相比，有何不同？

Question

WebGL与Canvas 2D硬件加速相比，有何不同？

javascriptgoogle-chromecanvaswebglhardware-acceleration

25

这些天，我需要在一个大小为800x600px的画布上绘制许多图像。我有许多256x256像素（有些更小）的图像要绘制在画布上，这些小图像将组成画布上的完整图像。我有两种实现方法。

第一种方法是，如果我使用Canvas 2D上下文，也就是context = canvas.getContext('2d')，那么我可以使用context.drawimage()方法将每个图像放置在画布的正确位置。

另一种方法是使用WebGL将这些图像绘制到画布上。对于每个小图像，我需要绘制一个矩形。矩形的大小与这个小图像相同，并且位于画布的正确位置。然后我使用图像作为纹理来填充它。

然后我比较了这两种方法的性能。它们的fps都达到了60，动画看起来非常流畅。所以我比较了它们的CPU使用率。我希望当我使用WebGL时，CPU的使用会更少，因为GPU会承担许多绘图工作。但结果是，CPU使用率看起来几乎相同。我试图优化我的WebGL代码，我认为它已经足够好了。通过谷歌，我发现Chrome、Firefox等浏览器默认启用硬件加速。所以我试着关闭硬件加速。然后第一种方法的CPU使用率变得更高了。所以，我的问题是，既然Canvas 2D使用GPU加速，是否有必要仅为2D渲染使用WebGL？Canvas 2D GPU加速和WebGL之间有什么区别？也许还有其他降低第二种方法CPU使用率的方法吗？感谢您的回答！

- LiuGui

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gman · Accepted Answer

Canvas 2D在更多的地方得到支持，因此如果您不需要其他功能，那么选择Canvas 2D意味着您的页面将在那些有canvas但没有WebGL（如旧版Android设备）的浏览器上运行。当然，在这些设备上它会很慢，并且如果您有很多图片，可能会因为内存不足而失败。

从理论上讲，WebGL可以更快，因为canvas 2d的默认设置是保留绘图缓冲区，而对于WebGL则不是。这意味着如果在WebGL上关闭抗锯齿，浏览器就有双缓冲选项。这是canvas2d所不能做的。另一种优化是在WebGL中可以关闭alpha通道，这意味着浏览器在将您的WebGL与页面合成时有关闭混合的选项，这也是canvas 2d无法选择的。（有计划为canvas 2d关闭alpha通道，但截至2017/6，它并未得到广泛支持）

但是，通过 "option" 我的意思只是这样。这取决于浏览器是否决定进行这些优化。

否则，如果您不选择这些优化，那么两者的速度可能相同。我个人没有发现这种情况。我尝试使用canvas 2d进行一些 drawImage 操作，但没有获得平滑的帧率，而使用WebGL则做到了。这对我来说毫无意义，但我认为浏览器内部发生了我不知道的事情。

我想这就引出了最后一个区别。 WebGL是低级且众所周知的。浏览器无法搞砸它太多，或者换句话说，您可以完全掌控。

而对于Canvas2D来说，由浏览器决定如何处理以及进行哪些优化。这些可能会在每个版本的发布时发生变化。我知道在某个时候，Chrome浏览器中，任何小于256x256的画布都不支持硬件加速。另一个例子是当绘制图像时，Canvas所做的事情。在WebGL中，您可以创建纹理并决定着色器的复杂程度。而在Canvas中，您无法得知它正在做什么。也许它正在使用一个复杂的着色器，支持各种Canvas的globalCompositeOperation、掩蔽和其他功能。为了内存管理，它可能会将图像分成块，并逐段渲染。对于每个浏览器以及同一浏览器的每个版本，它决定要做什么取决于该团队，而在WebGL中，你几乎可以100%自己决定做什么。他们不能做太多干扰WebGL的中间过程。

顺便说一句：这里有一篇文章详细介绍了如何编写一个WebGL版本的canvas2d drawImage 函数，后面是一个关于如何实现canvas2d矩阵堆栈的文章。