WebGL为什么快

WebGL为什么快

当我们在Canvas展示图形的过程中遇到了性能瓶颈时，总会第一个想到WebGL。我们都知道WebGL快，但是它为什么快呢。

GPU加速

可能有人会说Canvas2d也可以开启GPU加速，那么还有什么区别。区别还是有的，首先不论Canvas2d还是WebGL，最终到浏览器层时都是调用OpenGL ES的Api来进行画图，所以区别主要就在前半段了。而Canvas2d的和WebGL的主要区别在于建立模型的过程。
WebGL的绘制顶点到三角形再到着色器渲染照明的处理全都是在管道中完成的，那么意味着这个模型建立的过程全都是在GPU和显存中建立的，这个过程将硬件的优势发挥到了最大。
而Canvas呢，所有建立模型的过程都是JS代码在CPU以及内存内建立的，况且JS还有一层解释执行的引擎存在性能自然打折。

模型的管理

其实多数在Canvas2d中实现动画、图形绘制的引擎，都是自己来管理模型，根据交互或其他事件来触发重绘操作将图形绘制到Canvas中，而这个过程中，canvas被不断的绘制清空，一直持续。倘若当前模型中有成千上万个几何图形，那么每一帧都需要将这些节点进行一次重绘。
而WebGL中由于使用了管道来维护模型，那么需要渲染时，无非就是将这些图形光栅化一次而已，那么自然提高了渲染的效率。

总结

简单来说WebGl快的原因有以下两点：

• 硬件加持
• 模型的维护

 https://www.dazhuanlan.com/2020/01/20/5e25395fdf523/