Liu*_*Gui 13 javascript google-chrome canvas webgl hardware-acceleration
这些天,我需要在画布上绘制许多图像.画布大小为800x600px,我有很多256x256px(有些更小)的图像可以在它上面绘制,这些小图像将在画布上组成一个完整的图像.我有两种方法来实现它.
首先,如果我使用画布2D上下文,context = canvas.getContext('2d')那么我就可以使用context.drawimage()方法将每个图像放在画布的正确位置.
另一种方法,我使用WebGL在画布上绘制这些图像.这样,对于每个小图像,我都需要绘制一个矩形.矩形的大小与此小图像相同.此外,矩形位于画布的正确位置.然后我使用图像作为纹理来填充它.
然后,我比较了这两种方法的性能.他们的fps都会达到60,而动画(当我点击或用鼠标移动时,画布会重绘多次)看起来非常流畅.所以我比较他们的CPU使用率.我希望当我使用WebGL时,CPU会少用,因为GPU可以保证很多绘图工作.但结果是,CPU使用率看起来几乎相同.我尝试优化我的WebGL代码,我认为这已经足够了.通过谷歌,我发现Chrome,Firefox等浏览器默认启用硬件加速.所以我尝试关闭硬件加速.然后第一种方法的CPU使用率变得更高.所以,我的问题是,由于画布2D使用GPU加速,我是否有必要将WebGL用于2D渲染？canvas 2D GPU加速和WebGL有什么不同？他们都使用GPU.也许还有其他方法可以降低第二种方法的CPU使用率？任何答案都将不胜感激!
gma*_*man 15
Canvas 2D仍然支持比WebGL更多的地方,所以如果您不需要任何其他功能,那么使用Canvas 2D将意味着您的页面将适用于那些具有画布而不是WebGL的浏览器(如旧的Android设备).当然,在这些设备上它会很慢,如果你有很多图像,可能会因为内存不足等原因而失败.
从理论上讲,WebGL可以更快,因为canvas 2d的默认值是保留了drawingbuffer,而对于WebGL则没有.这意味着如果你在WebGL上关闭反锯齿,浏览器可以选择双缓冲.canvas2d无法做到的事情.另一个优化是在WebGL中你可以关闭alpha,这意味着浏览器可以选择在将WebGL与页面合成时关闭混合,这也是它没有选择使用canvas 2d的选项.(有计划能够关闭画布2d的alpha但是从2017/6开始它没有被广泛支持)
但是,通过选项我的意思是这样.由浏览器决定是否进行这些优化.
否则,如果你不选择那些优化,那么2可能是相同的速度.我个人没有发现这种情况.我试图drawImage用canvas 2d 做一些事情并没有得到像WebGL那样平滑的帧率.这没有任何意义,但我认为浏览器内部发生了一些我不知道的事情.
我猜这会带来最后的差异.WebGL是低级别的并且是众所周知的.浏览器无法搞清楚它.换句话说,你可以100%控制自己.
另一方面,Canvas2D取决于浏览器要做什么以及要进行哪些优化.它们可能在每个版本上都有所变 我知道Chrome在某一点上256x256下的任何画布都不是硬件加速的.另一个例子是画布在绘制图像时的作用.在WebGL中,您可以制作纹理.您可以决定着色器的复杂程度.在Canvas中你不知道它在做什么.也许它使用了一个复杂的着色器,支持所有各种画布globalCompositeOperation,蒙版和其他功能.也许对于内存管理,它会将图像分成夹头并将它们分成几部分.对于每个浏览器以及同一浏览器的每个版本,它决定要做的就是该团队,与WebGL一样,它几乎100%由您自己决定.他们在中间做的事情并不多,搞乱了WebGL.
仅供参考:这是一篇文章,详细介绍了如何编写canvas2d drawImage函数的WebGL版本,然后是一篇关于如何实现canvas2d矩阵堆栈的文章.
| 归档时间： |
|
| 查看次数： |
10361 次 |
| 最近记录： |