WebGL VS Canvas 2D硬件加速

Question

现在，我需要在画布上绘制许多图像。画布大小为800x600px，我有很多256x256px（有些小）的图像来绘制，这些小图像将在画布上组成一个完整的图像。我有两种方法来实现这一点。首先，如果我使用canvas 2D上下文，即context = canvas.getContext('2d')，那么我可以使用context.drawimage()方法将每个图像放在画布的正确位置。

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

然后，我比较这两种方法的性能。他们的fps都将达到60，而动画（当我点击或移动鼠标时，画布会重绘多次）看起来非常平滑。所以我比较他们的CPU使用率。我期望当我使用WebGL时，CPU将使用较少，因为GPU将确保很多绘图工作。但结果是，CPU使用率看起来几乎相同。我试着优化我的WebGL代码，我认为它够好。通过谷歌，我发现默认情况下，Chrome，Firefox等浏览器将启用硬件加速。所以我试图关闭硬件加速。然后第一种方法的CPU使用率变得更高。所以，我的问题是，因为canvas 2D使用GPU加速，所以我需要使用WebGL来进行2D渲染吗？画布2D GPU加速和WebGL有什么不同？他们都使用GPU。也许有其他方法可以降低第二种方法的CPU使用率？任何答案将不胜感激！

Answer 1

Canvas 2D仍然支持比WebGL更多的地方，所以如果你不需要任何其他功能，那么使用Canvas 2D就意味着你的页面可以在那些具有画布但不具有WebGL的浏览器（如旧的Android设备）上工作。当然，在这些设备上它会很慢，并且可能由于其他原因而失败，例如，如果有很多图像，则会耗尽内存。

从理论上讲，WebGL可以更快，因为canvas 2d的默认值是保存了drawingbuffer，而WebGL则不是。这意味着如果您在WebGL上关闭消除锯齿功能，浏览器可以选择双缓冲区。它不能用canvas2d做的事情。 WebGL中的另一个优化是关闭alpha，这意味着浏览器可以在将WebGL合成到页面时关闭混合选项，这也是它无法使用canvas 2d的选项。 （有计划能够关闭阿尔法帆布2D但截至2017年6月它不是广泛支持）

但是，通过选项我的意思就是这样。浏览器决定是否进行优化。

否则，如果你不选择这些优化，那么2将会是相同的速度。我没有亲自发现这种情况。我试图用canvas 2d做一些drawImage的事情，并没有像我使用WebGL那样获得平滑的帧率。这是没有意义的，但我认为在浏览器内部发生了一些我不知道的事情。

我想这会带来最后的区别。 WebGL是低级并且众所周知的。浏览器没有太多东西可以搞砸了。或者换句话说，你是100％控制的。

另一方面，Canvas2D取决于浏览器做什么以及做出哪些优化。他们可能会在每个版本中进行更改我知道Chrome在256x256下的任何画布都不是硬件加速的。另一个例子是画布在绘制图像时的功能。在WebGL中制作纹理。你决定你的着色器有多复杂。在画布中，你不知道它在做什么。也许它使用了复杂的着色器，支持所有各种画布globalCompositeOperation，蒙版和其他功能。也许对于内存管理来说，它会将图像分割成卡盘并将其渲染为片段。对于每个浏览器以及同一个浏览器的每个版本，它决定做的事情都取决于该团队，与WebGL一样，它几乎是100％。中间没有太多的东西可以搞乱WebGL。

供参考：这里是an article detailing how to write a WebGL version of the canvas2d drawImage function，其次是an article on how to implement the canvas2d matrix stack。