最近因工作需要，调研了下 H5 2D/3D渲染引擎。不过网上找到的都是些比较旧的文章，所以在这里，对一些数据和内容做下更新，以便保鲜这个主题。
首先，根据平时的印象，大致罗列了“怎样算作一款不错的渲染引擎”的评判因素（个人观点欢迎补充）：
形象工程：官网形象，官方 example，github star，issue 处理，
技术层面：技术栈，技术文档，性能测评
生态周边：工具链支持，社区反馈，成熟产品
Part 1: 信息的搬运工
基于上述评判标准，接下来开始大面积搜集信息。边搜集边下结论，过滤掉一些不太合适的，使结论趋于收敛。
1、一些主流引擎库的特性比较
对表格做下展开：
- Three.js：作为老牌的3D库，它已经有众多案例，在PC多网页3D中是目前不错的选择。
- Phaser：文档教程，和案例方面都很不错，功能也算的上丰富。非常适合独立游戏开发和小团队使用。
- Pixi.js：作为渲染器，其渲染性能绝对是非常优秀的，游戏功能方面支持很差，适合极客程序员把玩。
- Egret：性能不错，在工作流方面支持非常优秀，适应中度和重度HTML5游戏开发，有较多商业项目验证，非常适合商业团队使用。
-
enchant.js：性能偏差，不太推荐。 -
craftyJS：文档教程等方面不太完善，很难找到对应技术支持，不推荐。 - Turbulenz：性能极佳，但捆绑其自身业务，不太适合国内市场。
- cocos2d-js：老牌引擎，其性能在排名中居中，工作流支持相对完整，推荐。
- PlayCanvas：重度3D游戏开发引擎，本文不对3D做推荐。
-
melonJS：性能不理想，不推荐。 -
Quintus：不支持WebGL模式，性能较差，不推荐。 -
Hilo：阿里前端团队作品，偏向于前端开发工程师，与游戏专业开发距离较大，推荐做HTML5营销小交互的使用。
参考：
1、来自简书：HTML5游戏引擎深度测评
2、2016年文章：HTML5游戏引擎对比分析调研
3、2018年文章：H5游戏引擎的选择
4、2018年文章：10 JavaScript Engines To Develop Your Own Mobile And Web Games
（本文介绍的最后几款我去看了官网，很糟糕，前排的几个和上面调研结论一致）
2、github 项目概览
github 上的项目介绍和相关数据，本身也将问题说的清楚明白，此处以表格形式略作展示。
数据统计时间：2020-7-10，在线表格在这里。
仔细浏览过一遍 github 项目介绍后，对于哪个引擎能干什么，基本会有一个大致了解。很显然，排名中上游的引擎是在一番优胜劣汰中沉淀下来的优胜者，所以有着比较充分的理由选用它们。
然而，值得说明的是，大家需要结合自己的项目需求，有时强大并不一定适合，中游的未必不可取。强大者入手门槛高，很难在较短时间驾驭，中等体量的反而上手快。
比如在我看来，选择一款引擎，不仅要满足项目需求，对自己而言也意味着一项长期技术投入。在长时间的使用过程中，填坑写插件几乎是不可避免的，你是否愿意投入精力，是否恰好对这个方向感兴趣，决定了你选择的体量。
好了，搜集了那么多信息，也酝酿了一番，这里就进一步收敛下：
Three.js 很强大，但并不是我的项目要用的东西。
工具链上，白鹭 egret 引擎无疑是最完善的，但这不作为最大权重去考虑。一些后来居上的引擎，也可能逐步弥补工具链。
完善的工具链，固然是一大优势，但初期会考虑偏轻，快速启动的项目去体验。
所以，我基本只打算聚焦于 pixi 和 phaser 这 2 套引擎。
3、demo 进一步体验
这些引擎都非常棒，demo 做出的效果足够吸引人。颜值即正义，所以再多看几眼。
1、巴比伦 https://doc.babylonjs.com/examples/
2、turbulenz 也很酷 http://biz.turbulenz.com/samples
3、pixi https://pixijs.io/examples/
4、phaser https://phaser.io/news/category/game
4、主要引擎/库介绍
似乎意犹未尽，似乎犹豫不决。早先对这个方向其实了解不多，所以这里再对这些优秀的引擎/库做下介绍说明。
2D 引擎库
pixi.js
一般来说，WebGL 的渲染速度都会比 Canvas 快，这是由俩者的绘制路径决定的。Pixi 最大的特点在于，Pixi 具有完整的 WebGL 支持，却并不要求开发者掌握 WebGL 的相关知识，并在需要时无缝地回退到 Canvas 。相较于很多同类产品，它的渲染能力是比较强大的。然而，Pixi 也有不足的地方，Pixi 对于动画的支持是比较缺乏的，在实际开发中，常常需要引进额外的动画库，如 GSAP。
Phaser
是一款专门用于HTML5 2D游戏开发的开源框架，提供 JavaScript 和 TypeScript双重支持，内置游戏对象的物理属性，采用 Pixi.js——在渲染方面直接封装了 Pixi渲染引擎（Phaser2 如此，Phaser3 已放弃），以加快Canvas 和 WebGL 渲染；架构方面，Phaser 内嵌了4个物理引擎，提供粒子系统、动画、预下载和设备适配方案；兼容性方面，Phaser 的焦点是放在移动端浏览器上的；API 方面，Phaser 能实现丰富的游戏功能，适合复杂度高的游戏开发。
目前项目最新进展是，Phaser4（Phaser 第4个大版本）正在开发中，并且已经得到 Facebook 支持。
CreateJS
CreateJS 官方提供了 TweenJS 支持动画开发，同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持，对于 H5 游戏基础功能的支持是足够的。在兼容性方面，CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外，CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。
Cocos2d-x
Cocos2d-x 是业界比较老牌的游戏引擎了，同时支持 C++ ，Lua 和 JavaScript 三种开发语言，官方用例来看更倾向于 C++ 开发，适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator 游戏开发工具，组件化，脚本化，数据驱动，跨平台发布。
3D 引擎库
Three.js
相信对于很多有关注 3D 游戏的开发者来说，Three.js 早已经耳熟能详了。实际上，Three.js 官方定位并不是游戏引擎，而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现，比较少直接拿 Three.js 来开发 H5 游戏。渲染环境上，Three.js 支持 WebGL 和 CSS3D 两种渲染模式。
PlayCanvas
从渲染支持程度来看，PlayCanvas 不仅支持 3D WebGL渲染，同时保持到 VR 的支持，拥有比较好的拓展性。在工具流的支持上，提供了在线编辑器和发布托管等服务。从官方教程上看，教程也是比较详细的。
5、测评&体验
补充一则关于 pixi, egret, layabox 的测评。
Part 2: 一个初步结论
Pixi 和 Phaser 二选一，我倒向 Phaser。不可否认它们都非常优秀，但我是从自己的实际需求触发。以下内容作为结论支撑。
1、希望轻松的开发小游戏
pixi 专注于渲染。我尝试这个 example 时，就遇到了插件库未及时根据版本的问题，最终不得搁置。——也就是说它单纯做渲染引擎，非常优秀（phaser2 内置它作为渲染引擎，phaser3 已脱离 pixi ），但是作为游戏引擎，它还需要用户手动拼装很多第三方插件。这容易让没有多少游戏基础的我们，陷入技术细节。
phaser 可以让我直接入门游戏开发。从完全小白开始，3个小时 2 个 demo 都顺利跑起来（官方示例中由于版本差异及旧代码未同步，有些小坑要补一下，不过问题可忽略），rollup + typescript + phaser3 实现起来非常顺手。
stackoverflow这里 的回答，也支持了我的选择。
2、社区丰富
非常容易的搜索到学习资料。比如：
1、开发者文档 http://book.phaser-china.com
2、官网中文支持 https://www.phaser-china.com
3、phaser API github-phaser3-docs
4、中文教程 http://phaser.io/tutorials
5、facebook 即时游戏 guide http://phaser.io/tutorials
6、模版项目多 phaser3-typescript-project-template
7、比如一个教程 https://www.phaser-china.com/
8、某中文社区 http://club.phaser-china.com
9、江湖大牛 http://blog.xiiigame.com
10、百度贴吧 https://tieba.baidu.com
11、游戏产品1 https://tarutarolegends.com
有关 Phaser 的信息非常容易获取，模版项目紧跟技术节奏。（其他很多框架就没见到开发者去帮他做模版项目的，足见得开发者的热情）
另外 Phaser4 已经在 2019 年底开始开发了，这回是得到了 Facebook 爸爸的支持。
3、丰富功能
市面上的 H5 引擎并不少，但是 Phaser 可以说是 2D 中尤为出色的一个。
Phaser 提供的功能非常全面，比如物理引擎，Phaser3 默认内置4种物理引擎，Arcade，P2，Ninja, Matter.js，各自有各自的适用场景，使用起来也非常方便。
同时，Phaser 还支持瓦片地图、定时器、渐变动画、帧动画、滚动背景、对象池、照相机、粒子系统、图形绘制、位图、像素图、图集、加载管理、多点触摸、音视频等等几乎你能够想到的所有做游戏需要的基础功能，是目前市面上 2D 的 H5 游戏引擎中功能最丰富的一个。
4、超强定制能力
Phaser 的定制能力到底有多强，可以从两方面来讲。
第一，Phaser 的插件机制。Phaser 可以允许开发者通过插件来引入其他强大的能力，比如通过插件你可以引入box2d物理引擎，引入spine骨骼动画，引入列表控件等等。Phaser 的插件机制为 Phaser 提供了无限可能性，强大的插件功能使得Phaser 几乎无所不能。
第二，Phaser 的模块化编译。由于 Phaser 是源码开放的，我们可以从官方 github上获取其源码进行编译，从而编译出我们自己的 Phaser。同时，官方的源码写得非常漂亮，在设计之初就考虑到了模块化编译，比如你不需要 p2 引擎，那么你就可以编译一个 phaser-arcade-physics 版本，甚至你不需要物理引擎，那么你可以编译一个 minimum 版本。只需要在编译的时候添加一个参数就好，十分方便。
5、移动端及 I/O 支持
多端支持在 Phaser2 就开始了，Phaser3 则做的更好更全面。
6、周边相关工具
1、青瓷引擎，基于 Phaser 引擎
2、白鹭对几个主要引擎提供的龙骨动画插件 DragonBones
- dragonBone 编辑器 dragonbones
3、Unity https://zhuanlan.zhihu.com
没有最棒，只有更适合。读者也可以按照自己的思路，选择一款最适合自己口味的渲染引擎。
整理信息不易，转载请著名作者和文章链接。
