WebGL VS Canvas 2D硬件加速 [英] WebGL VS Canvas 2D hardware acceleration

问题描述

这些天，我需要在画布上绘制许多图像。画布尺寸为800x600px，我可以在其上绘制许多256x256px（有些较小）的图像，这些小图像将在画布上组成一个完整的图像。我有两种方法可以实现此目的。

These days, I need to draw many images on a canvas. The canvas size is 800x600px, and I have many images of 256x256px(some is smaller) to draw on it, these small images will compose a complete image on the canvas. I have two ways to implement this.

首先，如果我使用canvas 2D上下文，即 context = canvas.getContext（'2d'），那么我可以使用 context.drawimage（）方法将每个图像放置在画布的正确位置。

First, if I use canvas 2D context, that is context = canvas.getContext('2d'), then I can just use context.drawimage() method to put every image on the proper location of the canvas.

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

Another way, I use WebGL to draw these images on the canvas. On this way, for every small image, I need to draw a rectangle. The size of the rectangle is the same as this small image. Besides, the rectangle is on the proper location of the canvas. Then I use the image as texture to fill it.

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

Then, I compare the performance of these two methods. Both of their fps will reach 60, and the animation(When I click or move by the mouse, canvas will redraw many times) looks very smooth. So I compare their CPU usage. I expect that when I use WebGL, the CPU will use less because GPU will assure many work of drawing. But the result is, the CPU usage looks almost the same. I try to optimize my WebGL code, and I think it's good enough. By google, I found that browser such as Chrome, Firefox will enable Hardware acceleration by default. So I try to close the hardware acceleration. Then the CPU usage of the first method becomes much higher. So, my question is, since canvas 2D use GPU to accelerate, is it necessary for me to use WebGL just for 2D rendering? What is different between canvas 2D GPU acceleration and WebGL? They both use GPU. Maybe there is any other method to lower the CPU usage of the second method? Any answer will be appreciate!

推荐答案

与WebGL相比，仍支持Canvas 2D的地方更多，因此，如果您不需要任何其他功能那么使用Canvas 2D意味着您的页面将在具有画布但没有WebGL的浏览器上运行（例如旧的android设备）。当然，这些设备上的速度会很慢，并且可能会因其他原因而失败，例如如果您有很多图像，则内存不足。

Canvas 2D is still supported more places than WebGL so if you don't need any other functionality then going with Canvas 2D would mean your page will work on those browsers that have canvas but not WebGL (like old android devices). Of course it will be slow on those devices and might fail for other reasons like running out of memory if you have a lot of images.

理论上讲，WebGL可以更快，因为canvas 2d的默认设置是保留绘图缓冲区，而WebGL则不保留。这意味着，如果您在WebGL上关闭了抗锯齿功能，则浏览器可以选择加倍缓冲。它与canvas2d无关。 WebGL的另一个优化功能是您可以关闭Alpha，这意味着浏览器可以选择在将WebGL与页面进行合成时关闭混合功能，这同样与画布2d无关。 （有计划能够关闭canvas 2d的Alpha，但截至2017/6，它尚未得到广泛支持）

Theoretically WebGL can be faster because the default for canvas 2d is that the drawingbuffer is preserved whereas for WebGL it's not. That means if you turn anti-aliasing off on WebGL the browser has the option to double buffer. Something it can't do with canvas2d. Another optimization is in WebGL you can turn off alpha which means the browser has the option to turn off blending when compositing your WebGL with the page, again something it doesn't have the option to do with canvas 2d. (there are plans to be able to turn off alpha for canvas 2d but as of 2017/6 it's not widely supported)

但是，通过 option >我就是那个意思。由浏览器决定是否进行这些优化。

But, by option I mean just that. It's up to the browser to decide whether or not to make those optimizations.

否则，如果您未选择这些优化，则2的速度可能相同。我个人并没有发现这种情况。我尝试只使用canvas 2d做一些 drawImage 的事情，而没有像我使用WebGL那样获得平滑的帧率。没什么道理，但我认为浏览器内部发生了一些我不了解的事情。

Otherwise if you don't pick those optimizations it's possible the 2 will be the same speed. I haven't personally found that to be the case. I've tried to do some drawImage only things with canvas 2d and didn't get a smooth framerate were as I did with WebGL. It made no sense to be but I assumed there was something going on inside the browser I was un-aware off.

我想这带来了最后的不同。 WebGL是底层的，众所周知的。浏览器无法做很多事情来弄乱它。或者换句话说，您可以100％掌控一切。

I guess that brings up the final difference. WebGL is low-level and well known. There's not much the browser can do to mess it up. Or to put it another way you're 100% in control.

另一方面，使用Canvas2D取决于浏览器该做什么以及进行哪些优化。他们可能会在每个版本上更改。我知道Chrome对于256x256以下的任何画布都没有硬件加速。另一个例子是画布在绘制图像时的作用。在WebGL中，您可以制作纹理。您可以确定着色器的复杂程度。在Canvas中，您不知道它在做什么。也许它使用的复杂着色器支持所有各种画布 globalCompositeOperation ，遮罩和其他功能。也许是为了进行内存管理，它会将图像分割成多个块，然后将它们分段呈现。对于每种浏览器以及同一浏览器的每个版本，它决定要做的都是由该团队决定，而对于WebGL，这几乎取决于您100％。

With Canvas2D on the other hand it's up to the browser what to do and which optimizations to make. They might changes on each release. I know for Chrome at one point any canvas under 256x256 was NOT hardware accelerated. Another example would be what the canvas does when drawing an image. In WebGL you make the texture. You decide how complicated your shader is. In Canvas you have no idea what it's doing. Maybe it's using a complicated shader that supports all the various canvas globalCompositeOperation, masking, and other features. Maybe for memory management it splits images into chucks and renders them in pieces. For each browser as well as each version of the same browser what it decides to do is up to that team, where as with WebGL it's pretty much 100% up to you. There's not much they can do in the middle to mess up WebGL.

仅供参考：这是详细介绍如何编写canvas2d drawImage 函数的WebGL版本的文章，其后是有关如何实现canvas2d矩阵堆栈的文章。

FYI: Here's an article detailing how to write a WebGL version of the canvas2d drawImage function and it's followed by an article on how to implement the canvas2d matrix stack.

这篇关于WebGL VS Canvas 2D硬件加速的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！