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

时间：2014-02-06 12:43:18

标签： html5 html5-canvas webgl

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

换句话说，WebGL提供的2D功能是不可能用2D-Canvas轻松实现的？

9 个答案:

答案 0 :(得分：59)

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

  • 在已构建的系统中更好地集成
  • 更易于使用
  • 更快
  • 有更多能力或更好地满足他们的需求
  • 成本
  • more platfrom-independant

因此，我将讨论canvas和webGL API之间关于这些特性的差异。

canvas和webGL都是JavaScript API。因此，它们在集成（绑定）方面几乎相同。它们都有许多可以加速编码的库/引擎。不同的库为您提供了组织代码的不同方法，因此它与绘制API的代码结构有所不同，但它仍然是完全相同的（其余代码如何与它结合在一起）。

如果使用库，编写代码的难易程度取决于库本身 但是如果你从零编写代码，那么canvas'API更容易学习和理解，它需要最少的数学知识。发展快速而直接。 WebGL需要具有强大数学技能的开发人员，他们完全理解渲染管道并知道他在做什么。那些人很难找到，生产速度较慢（因为代码的大小和将其集成到其余部分的复杂性）因此 - 它的成本更高。

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

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

所以，总结一下：

  • 合并绘图API代码和其余（集成）：类似
  • 易用性：
    • （带库）canvas = webGL
    • （从头开始）webGL＆lt;＆lt;画布
  • 速度：webGL＆gt;画布
  • 功能：webGL＆gt;画布
  • 成本：webGL要贵得多
  • 平台：非常相似

希望这有帮助。

P上。 S.公开讨论。

答案 1 :(得分：29)

最大的优势是管道的可编程性和性能。例如，假设您正在绘制一个在另一个之上的两个框，一个是隐藏的，一些GL实现具有丢弃隐藏框的范围。

至于比较，由于没有快速创建表格的方法，我刚刚上传了下面比较表的图片。仅为完整性添加了Three.js。

Table

答案 2 :(得分：15)

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

http://glslsandbox.com/e#207.3

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

答案 3 :(得分：12)

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

答案 4 :(得分：10)

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

答案 5 :(得分：6)

你无法使用Canvas做任何事情你无法用webGL做：画布允许使用get / putImageData来粉碎字节，你可以用webGL以编程方式绘制线条，圆圈...... 但是如果你想要做一些绘图，以及60 fps的一些效果，性能差距是如此之高，以至于当它在webGL中运行正常时，它是不可能的。性能是一项根本功能。

然而，webGL的编程非常复杂：看看帆布是否适合您，或者寻找一个可以减轻痛苦的库...... 其他缺点：它不适用于IE（但有什么用？），以及某些手机上 请参阅此处了解兼容性：http://caniuse.com/webgl

答案 6 :(得分：5)

因为你特别想要一些不适合画布的经典2D事物：

  • 颜色变换（如闪烁精灵）
  • 重复位图填充
  • 在旋转下平铺地图（在画布下，一些实现将创建接缝）
  • 深层次（非常依赖于实现）
  • 乘法或加法混合

...但当然你有像素访问权限，所以你可以手动完成任何事情，包括上面的事情。但那可能真的非常慢。您可以在理论上使用Mesa openGl来渲染到画布。

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

使用画布的原因是它仍然得到更好的支持，如果你逐像素地学习，这也是一个非常宝贵的教训。

答案 7 :(得分：3)

如果没有GPU，WebGL将无法使用。
由于大多数系统都具有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]

答案 8 :(得分：2)

由于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()
    }

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

相关问题
最新问题