25

我正计划编写一个游戏,它将使用很多精灵和图像。起初我尝试了 EaselJS,但在玩其他一些基于画布的游戏时,我意识到它并没有那么快。当我看到 Mozilla 的 BananaBread 时,我想“如果 WebGL 可以如此快速地完成 3D,那么它可以更快地完成 2D”。所以我搬到了three.js(使用平面和透明纹理,精灵的纹理偏移)。

问题是:它更好吗?快点?大多数 WebGL 游戏都是 3D 的,所以我应该为 2D 使用画布 2D 上下文,为 3D 使用 WebGL 吗?我还注意到 2D 中没有用于 WebGL 的库(WebGL-2d 除外,但它的级别很低)。

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

4

2 回答 2

42

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

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

我的推荐?如果您只是同时学习这两种方法,请从 Canvas2D 开始,然后让您的游戏与它一起工作。以简单的方式抽象您的绘图,例如使用DrawPlayer函数而不是ctx.drawImage(playerSprite, ....),并且当您达到游戏正常运行并且您希望它运行得更快或游戏设计要求您必须使用更快的绘图方法时,创建使用 WebGL 为所有这些抽象函数提供替代渲染后端。这为您提供了不必在早期就挂在渲染技术上的优势(这总是一个错误!),让您专注于游戏玩法,如果您最终实现了这两种方法,那么您对于非 WebGL 浏览器(如 Internet)有很好的回退探险家。无论如何,您可能暂时不需要提高速度。

于 2012-10-06T23:53:58.340 回答
4

WebGL 可以比 canvas 2D 快得多。参见http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html作为一个例子。

也就是说,我认为你现在主要是靠自己。我不知道任何用于 WebGL 的 2d 库,除了可能是 PlayN http://code.google.com/p/playn/虽然它是在 Java 中并使用 Google Web Toolkit 转换为 JavaScript。我也很确定它没有使用上面那篇博文中提到的技术,尽管如果您的游戏不使用瓷砖,那么该技术可能对您没有用处。

如果您计划使用 2d,three.js 可以说不是您想要的库。

于 2012-10-06T23:50:40.993 回答