对于2D 游戏/应用程序，使用 WebGL 而不是2D 画布有什么理由吗？

除了性能以外，对于 2D游戏/应用程序，是否有任何理由使用 WebGL 而不是2D-Canvas？

换句话说，WebGL 提供了哪些2D 功能，而这些功能不能通过2D-Canvas 轻松实现？

106191 次浏览
小开

性能是最大的原因之一，因为在编写游戏时，它必须快速。但是还有其他一些原因，您可能希望选择 WebGL 而不是画布。它提供了编码着色器，灯光和缩放的可能性，这是很重要的，如果你正在做一个商业游戏应用程序。帆布也变得滞后后，50精灵左右。

小开

对于 Canvas，没有什么是 webGL 做不到的: Canvas 允许使用 get/putImageData 压缩字节，而且可以使用 webGL 以编程方式绘制直线、圆圈。
但是如果你正在寻求做一些绘图，也有一些效果在60fps，性能差距是如此之高，它只是不可能与画布，当它将运行在 webGL。性能是一个根本特征。

然而，webGL 的编程相当复杂: 看看画布是否足够好，或者寻找一个库，将减轻痛苦..。
其他缺点: 它不能在 IE 上工作(但是什么可以呢?) ，在一些手机上也是如此。
请参阅这里的兼容性: http://caniuse.com/webgl

小开

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

  • 更好地集成在他们已经建立的系统中
  • 更容易使用
  • 更快
  • 有更多的能力或更适合他们的需要
  • 成本
  • 更加独立于平台

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

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

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

使用 WebGLAPI 需要强大的数学技能和对呈现管道的全面理解。拥有这些技能的人更难找到，生产速度更慢(由于这种代码库的规模和复杂性) ，因此成本更高。

WebGL 速度更快，而且具有更多的功能。毫无疑问。它是一个原生的3D API，可以让您完全访问呈现管道，代码和效果执行速度更快，更“可调整”。使用 webGL 真的没有限制。

画布和 webGL 都是 html5的好东西。通常支持一个的设备会支持另一个。

所以，总结一下:

  • 合并绘图 API 代码和其余部分(集成) : 类似
  • 易用性:
  • (带库)画布 = webGL
  • (从头开始) webGL < < 画布
  • 速度: webGL > 画布
  • 能力: webGL > 画布
  • 成本: webGL 要贵得多
  • 非常相似

希望这个能帮上忙。

公开讨论。

小开

最大的优点是管道的可编程性和性能。例如，假设您在上面绘制两个框，其中一个是隐藏的，一些 GL 实现有放弃隐藏框的空间。

至于比较，由于这里没有快速创建表的方法，我只是上传了下面比较表的图片。仅为了完整性而增加了 Three. js。

Table

小开

从我的 自行申请经验来看，图形着色器是我需要 WebGL 支持的唯一原因。易用性对我来说影响不大，因为这两个框架都可以用 three. js 来抽象。假设我不需要着色器，我允许使用任何一种框架来最大限度地提高浏览器/机器的支持。

小开

WebGL 提供了哪些2D 画布没有的2D 功能？其中最大的一个是图形硬件上的可编程片段着色器。例如，在 WebGL 中，可以在3D 硬件的着色器中实现 Conway 的 Game of Life:

Http://glslsandbox.com/e#207.3

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

小开

因为你特别想要一些经典的二维的东西，不适合画布:

  • 颜色变换(像闪烁的精灵)
  • 重复位图填充
  • 在旋转下平铺映射(在画布下一些实现将创建接缝)
  • 深层(非常依赖于实现)
  • 乘法或加法混合

但是当然你有像素访问，所以你可以做任何事情，包括上面的，手动。但这可能会非常非常慢。理论上，您可以编写 Mesa openGl 来渲染到画布。

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

使用画布的原因是，它仍然是更好的支持，如果你学习做事情像素点，这也是一个非常有价值的教训。

小开

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

例如:

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

资料来源:
检测 WebGL 支持的正确方法？
在 jQuery 中检测移动设备的最佳方法是什么？

小开

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

但是“画布 VS WebGL”并不一定是二选一的选择。 我实际上更喜欢使用 webgl 进行效果处理，但是其余的部分都是在画布中完成的。 当我在 VM 中运行它时，它仍然工作得很好很快，只是没有效果。

更新: 不幸的是，一些浏览器(Windows 上的 Chrome 浏览器，Linux 上的一切，其他?)实现良好的仿真层 这使得检测差的/没有 GPU 变得困难。在这些情况下，要么游戏或用户必须手动禁用 WebGL，以获得实际的性能好处..。 ... 或者退化，当2D 实现得不好的时候。据说这也可能发生。[谢谢 gman ]


提交答案