作者 这是一篇来自 gskinner 开发者的客座文章。Mozilla 一直与 gskinner 的 CreateJS.com 团队合作，为他们的开源库带来新功能，并确保它们在 Firefox OS 上运行良好。
在 gskinner，我们一直秉持的理念是将我们的解决方案贡献给开发者社区 - 过去四年我们一直专注于 HTML 和 Javascript 的 Web 标准。我们的 CreateJS 库为在开放、现代的 Web 上构建丰富的交互式体验提供了易于使用、模块化、跨浏览器和跨平台的 API。我们认为它们很棒。
例如，CreateJS CDN 每月通常会收到数亿次访问，Adobe 已选择 CreateJS 作为其在 Flash Professional CC 中创建 HTML5 文档的官方框架。
Firefox OS 非常适合 CreateJS 内容。我们只花了一点精力就确保了最新库的兼容性，它们是该平台上开发应用程序和游戏的宝贵工具。
我们很高兴欢迎 Mozilla 成为 CreateJS 的官方赞助商，并宣布一些关于这些库的激动人心的消息！
WebGL
随着 WebGL 在浏览器中得到更广泛的支持，我们很自豪地宣布，在与 Mozilla 合作后，EaselJS 的全新 WebGL 渲染器现在处于早期测试阶段！经过研究、内部讨论和优化，我们成功发布了一个渲染器，它可以比当前 Canvas 2D 上下文快 6 倍到 50 倍的速度渲染 2D 内容的一部分。它在 Firefox OS 的浏览器和应用内环境中都得到全面支持。
我们思考了想要从 WebGL 渲染器中获得什么，并将目标缩小到三个关键目标
- 绘制精灵和位图的超快性能
- 与现有 EaselJS API 的一致性和集成
- 如果 WebGL 不可用，则能够回退到 Context2D 渲染
以下是我们想出的方法
SpriteStage 和 SpriteContainer
两个新类，SpriteStage 和 SpriteContainer，对显示列表施加了限制，以实现对位图内容的积极优化渲染。这包括图像、精灵表动画和位图文本。SpriteStage 旨在根据需要自动进行额外的绘制调用，避免对单个绘制调用中可以包含的元素数量设置任何固定的最大值。
这些新类扩展了现有的 EaselJS 类（Stage 和 Container），因此如果您熟悉 EaselJS，创建 WebGL 内容非常简单。只需几个按键，就可以使用 WebGL 启用现有的 EaselJS 内容。
分层渲染器
这种方法允许 WebGL 和 Context2D 内容分层显示在屏幕上，鼠标/触摸交互可以无缝地在层之间传递。例如，一个使用 WebGL 渲染的超快游戏引擎可以显示在利用 Context2D 渲染器更强大功能的 UI 层下方。您甚至可以在 WebGL 层和 Context2D 层之间交换资产。
最后，WebGL 内容与现有的 Context2D 渲染器完全兼容。在不支持 WebGL 的设备或浏览器上，您的内容将自动通过 canvas 2D 进行渲染。
虽然从新渲染器中挤出每一丝性能都需要付出一些努力，但我们对这种新方法非常满意。它允许开发人员为各种设备构建性能极高的内容，并利用围绕 CreateJS 的极其丰富的现有 API 和工具链。在下面，您会发现一些演示和链接，展示了它的功能。
示例：Bunnymark
Web 图形的非常流行（虽然有限）的基准测试是 Bunnymark。这个基准测试只是衡量渲染器在 60fps 下可以支持的弹跳兔子位图精灵（试试说 5 次）的最大数量。
下表比较了使用经典的 Context2D 渲染器和新的 WebGL 渲染器的 Bunnymark 得分。数字越大越好。
| 环境 | Context2D | WebGL | 变化 |
|---|---|---|---|
| 2012 Macbook Pro，Firefox 26 | 900 | 46,000 | 51x |
| 2012 Macbook Pro，Chrome 31 | 2,300 | 60,000 | 26x |
| 2012 Win 7 笔记本电脑，IE11 (x64 NVIDIA GeForce GT 630M，1 GB VRAM) | 1,900 | 9,800 | 5x |
| Firefox OS 1.2.0.0-prerelease（早期 1.2 设备） | 45 | 270 | 6x |
| Nexus 5，Firefox 26 | 225 | 4,400 | 20x |
| Nexus 5，Chrome 31 | 230 | 4,800 | 21x |
由于这些数字显示了 60fps 下的最大精灵数量，因此如果允许更低的帧速率，上面的数字可以显着增加。值得注意的是，我们内部拥有的唯一 Firefox OS 设备是早期 Firefox OS 1.2 设备（具有相对低功率的 GPU），但我们仍然看到显着的性能提升。
示例：Sparkles 基准测试
这个非常简单的演示旨在测试在将浏览器推到 24fps 时屏幕上可以放置多少粒子。
示例：行星 Gary
我们经常使用 Planetary Gary 游戏演示作为 CreateJS 库中新功能的测试平台。在本例中，我们将现有的游戏改造为使用新的 SpriteStage 和 SpriteContainer 类来渲染 WebGL 中的游戏体验。
这令人惊讶地易于实现，只需要更改或添加三行代码，并且证明了新 API 的易用性和一致性。这是一个特别好的例子，因为它展示了 Context2D 渲染器的强大功能集如何用于用户界面元素（例如开始屏幕），并与 WebGL 渲染器的卓越性能（例如游戏）协同工作。
更棒的是，游戏素材被打包为矢量图形，这些图形在运行时通过 Context2D 渲染器绘制到精灵表上（使用 EaselJS 的 SpriteSheetBuilder），然后传递给 WebGL 渲染器。这允许完全可缩放的图形，文件大小最小（网络传输约 85kb）且性能惊人！
路线图
我们在 GitHub 上发布了 新的 WebGL 渲染器的公开预览版，以便社区可以试用它并 提供反馈。它很快就会包含在下一个主要版本中。
关注 @createjs 和 @gskinner 的推特，及时了解最新消息，并告诉我们您的想法 - 感谢阅读！
关于 Louis Stowasser
我是一名 Mozilla 合作伙伴工程师，Gamedev Weekly 的维护者，以及位于澳大利亚布里斯班的 CraftyJS 游戏引擎的创建者。
6 条评论