对于 2D 游戏/应用程序是否有任何理由使用 WebGL 而不是 2D Canvas？

从另一个角度来看这个问题：开发人员如何选择一种技术而不是另一种技术？

更好地集成到他们已经构建的系统中

更容易使用

是比较快的

有更多的能力或更适合他们的需求

成本

更独立于平台

因此，我将讨论 canvas 和 webGL API 在这些品质方面的区别。

canvas 和 webGL 都是 JavaScript API。它们在集成（绑定）方面几乎相同。许多库都支持它们，这些库可以加快您的编码速度。不同的库为您提供了不同的代码组织方式，因此库的选择决定了您的绘图 API 的结构，但它仍然几乎相同（其余代码如何与它绑定在一起）。如果使用库，编写代码的难易程度取决于库本身。

如果你从零开始编写代码，canvas API 更容易学习和理解。它需要最少的数学知识，并且开发快速而直接。

使用 WebGL API 需要强大的数学技能和对渲染管道的全面理解。具有这些技能的人更难找到，生产速度较慢（由于这种代码库的大小和复杂性），因此成本更高。

WebGL 速度更快，功能也更多。毫无疑问。它是一个原生 3D API，让您可以完全访问渲染管道，代码和效果执行得更快，并且更“可调整”。使用 webGL 确实没有限制。

canvas 和 webGL 都是 html5 的好东西。通常支持一个的设备将支持另一个。

所以，总结一下：

合并绘图API代码和其余部分（集成）：类似

使用方便：

（带库）canvas = webGL

（从头开始）webGL << canvas

速度：webGL > 画布

能力：webGL > 画布

成本：webGL 要贵得多

平台：非常相似

希望这可以帮助。

PS 公开讨论。

---

最大的优势是流水线的可编程性和性能。例如，假设您正在绘制 2 个盒子，一个在另一个上方，一个是隐藏的，一些 GL 实现可以丢弃隐藏的盒子。

至于对比，由于这里没有快速建表的方法，所以我只上传了下面的对比表图片。添加 Three.js 仅出于完整性考虑。

https://i.stack.imgur.com/y0MQ2.png

---

根据我在 own applications 上的经验，图形着色器是我需要 WebGL 支持的唯一原因。易用性对我来说意义不大，因为这两个框架都可以用 three.js 抽象出来。假设我不需要着色器，我允许使用任一框架来最大化浏览器/机器支持。

---

WebGL 提供了哪些 2D 画布没有的 2D 功能？恕我直言，最大的一个是图形硬件上的可编程片段着色器。例如，在 WebGL 中，可以在 3D 硬件上的着色器中实现 Conway 的生命游戏：

http://glslsandbox.com/e#207.3

这种 2D 显示器只能在带有 2D 画布的 CPU 而不是 GPU 上运行。所有的计算都将在 JavaScript 中实现，即使有网络工作者的帮助，也不会像 GPU 那样并行。当然这只是一个例子，各种有趣的 2D 效果都可以用着色器来实现。

---

嗯，性能将是最大的原因之一，因为当你编写游戏时，它必须很快。但是还有其他几个原因，您可能希望选择 WebGL 而不是画布。它提供了对着色器、照明和缩放进行编码的可能性，如果您正在开发商业游戏应用程序，这很重要。在 50 个左右的精灵之后，画布也会变得迟钝。

---

Canvas 没有任何事情可以用 webGL 做：canvas 允许使用 get/putImageData 粉碎字节，并且您可以使用 webGL 以编程方式绘制线条、圆圈等。但是，如果您要绘制一些绘图，以及一些 60 fps 的效果，那么性能差距是如此之大，以至于使用 canvas 是不可能的，而当它在 webGL 中运行正常时。性能是一个根本特征。

然而，webGL 的编程相当复杂：看看 canvas 是否对您来说足够好，或者寻找一个可以减轻痛苦的库...
其他缺点：它在 IE 上不起作用（但是什么？），以及一些手机。
请参阅此处了解兼容性：http://caniuse.com/webgl

---

因为您特别想要一些不适用于画布的经典 2d 东西：

颜色变换（如闪烁精灵）

重复位图填充

在旋转下平铺地图（在画布下，一些实现会创建接缝）

深层（非常依赖于实现）

乘法或加法混合

...但是您当然可以访问像素，因此您可以手动执行任何操作，包括上述操作。但这可能非常非常缓慢。理论上，您可以使用 Mesa openGl 来渲染到画布。

使用 webGL 的另一个重要原因是结果很容易移植到其他任何地方。这也使技能更有价值。

使用画布的原因是它仍然得到更好的支持，如果您逐个像素地学习做事，这也是非常有价值的一课。

---

WebGL 没有 GPU 就无法使用。这种硬件依赖性不是一个大问题，因为大多数系统都有 GPU，但如果 GPU 或 CPU 架构不断发展，通过仿真来保存 webgl 内容可能具有挑战性。在旧（虚拟化）计算机上运行它是有问题的。

但“Canvas vs WebGL”不一定是二元选择。我实际上更喜欢使用 webgl 来制作效果，而其余的则在画布中完成。当我在 VM 中运行它时，它仍然运行良好且快速，只是没有效果。

更新：不幸的是，一些浏览器（Chrome on Windows、Everything on Linux、其他？）实现了良好的模拟层 that make detection of poor/no GPUs hard。在这些情况下，游戏或用户必须手动禁用 WebGL 才能获得实际的性能优势... ...或降级，当 2D 实现不佳时。据称，这也可能发生。 [谢谢gman]

---

由于 WebGL 是特别新的技术，而 HTML5 画布更加成熟，您想使用什么取决于您的用户。如果您认为您的用户将使用移动设备，那么我会建议使用 HTML5 画布，但如果您想要更好的 2D 渲染，我会使用 WebGL。所以你可以做的是，如果使用的是 HTML5 的移动渲染，否则如果它们是在支持 WebGL 的平台上。

例如：

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

来源：
Proper way to detect WebGL support?
What is the best way to detect a mobile device in jQuery?

---