html5-canvas - 用于 2D 游戏的 Canvas 2d 上下文或 WebGL

Question

我打算编写一个游戏，它将使用大量的 Sprite 和图像。起初我尝试过 EaselJS，但在玩其他一些基于 Canvas 的游戏时我意识到它并没有那么快。当我看到 Mozilla 的 BananaBread 时，我想“如果 WebGL 可以如此快地完成 3D，那么它就可以更快地完成 2D”。所以我转向了three.js(使用平面和透明纹理， Sprite 的纹理偏移)。

问题是:它更好吗？快点？大多数 WebGL 游戏都是 3D 的，所以我应该对 2D 使用 Canvas 2D 上下文，对 3D 使用 WebGL 吗？我还注意到在 2D 中没有用于 WebGL 的库(WebGL-2d 除外，但它的级别非常低)。

请注意兼容性不是我最关心的问题，因为我不打算很快发布任何内容:)。

Answer 1

简短的回答是肯定的。如果您使用得当，WebGL 会更加高效。一个简单的实现要么没有任何好处，要么性能更差，所以如果你还不熟悉 OpenGL API，你可能想暂时坚持使用 Canvas 。

一些更详细的说明:WebGL 可以非常快地绘制纹理四边形( Sprite )，但是如果您需要更高级的 2D 绘图功能，例如路径跟踪，您将需要坚持使用 2D Canvas ，因为在 WebGL 中实现这些类型的算法是不平凡。你的游戏性质也会影响你的选择。如果您一次在屏幕上只有几个移动的项目，Canvas 将相当快且相当简单。但是，如果您每帧重绘整个场景，WebGL 更适合这种类型的渲染循环。

我的推荐？如果您只是同时学习两者，请从 Canvas2D 开始，让您的游戏使用它。以简单的方式抽象您的绘图，例如使用 DrawPlayer函数而不是 ctx.drawImage(playerSprite, ....) ，并且当您达到游戏正常运行并且您希望它运行得更快或游戏设计要求您必须使用更快的绘图方法时，请使用 WebGL 为所有这些抽象函数创建一个替代渲染后端。这为您提供了早期不沉迷于渲染技术(这总是一个错误!)探险家。无论如何，您可能暂时不需要提高速度。