国内再添开源图形引擎：蚂蚁 Oasis Engine 实践之路

采访嘉宾 | 烧鹅

编辑 | 闫园园

随着互联网技术的发展，Web 前端也出现了不同分支，除了传统网页开发以外，前端图形领域也逐渐独立为一个重要方向。虽然目前从整体上来看，前端图形领域还是比较小众的领域，但从发展势头来看，其未来发展前景还是值得关注。

然而，进入 3D 图形世界除了能看到炫酷的效果以外还是非常令人生畏的，如果不了解 3D 渲染的原理，反而很容易让自己陷入泥潭。那么目前国内外前端图形领域现状究竟怎样？入手前端图形领域又该有怎样的准备？带着以上疑问，InfoQ 特别采访了蚂蚁 Oasis Engine 团队负责人烧鹅。Oasis Engine （以下简称 Oasis）是驱动支付宝五福、打年兽等互动游戏的图形引擎，由蚂蚁集团 RichLab 互动科技团队自研，刚刚度过开源一周年生日。

图形学现状与发展前景

InfoQ：首先请您聊聊前端与图形学的关系。

烧鹅：前端与图形学的关系，我们从两方面来谈：

第一，标准方面。往 Web 图形技术的底层去深究，首先要追溯到国际组织 Khronos Group ，Khronos Group 专注于创立开放标准，免授权费的移动设备接口程序 API , 其制定了 OpenGL 标准，这也是行业领域中最为广泛接纳的 2D/3D 图形 API。

而后基于 OpenGL 在移动端的分支标准 OpenGL ES，Khronos Group 制定了 WebGL 标准，WebGL 标准提供了 3D 图形的 API，允许使用 HTML5 中的 Canvas 调用相关接口。后来 W3C 组织制定了 WebGPU 标准，与 WebGL 不同的是，WebGPU 不是 OpenGL 的包装，而是直接驱动 Vulkan、Metal 和 DirectX 12 等新生代图形接口，最新版的 Chrome 100 已经默认开启了 WebGPU 的能力。目前，WebGPU 还是一个草案阶段，WebGL 已经发展到 2.0 阶段，这两个标准也是前端实现图形应用的基础 API。

第二，领域方面。前端图形开发可以说是平行于传统前端开发的领域，通常情况下，普通的前端开发基于 React、Vue 等框架，而前端图形开发则依靠图形引擎与游戏开发框架去开发应用，这一点类似于游戏开发与传统软件开发的区别。

InfoQ：目前国内外前端图形领域的技术发展现状是怎样的？未来前景如何？

烧鹅：目前从国内外总体发展现状来看，前端图形领域还是相对比较年轻的，毕竟从标准上来看，2011 年 3 月 WebGL 1.0 规范发布，距今也仅仅 11 年的时间。不过随着标准的逐渐成熟，前端图形引擎也像雨后春笋般涌现出来，就像游戏开发依赖于游戏引擎，前端图形开发也依赖于前端图形引擎，而一个优秀的前端图形引擎的出现势必将会带动整个生态的发展。

另外，目前整个前端图形领域发展滞后的原因，除了标准的滞后还有就是人才的缺失。在大多数开发者眼里，在 Web 里运行图形的性能远远不如原生图形，与其费力不讨好研究 Web 图形，不如转而研究原生图形，这种根深蒂固观念的影响也导致很多人才并没有引入到前端图形领域。

不过，从未来发展趋势来看，前端图形领域还是值得关注的。之前受限于各种软硬件的条件，3D 图形效果在 Web 上往往不能很好实现，而随着硬件设备和网络带宽的不断升级，情况已经大大改善。可以预见，前端在未来业务方面也会面临越来越多的 3D 图形需求。

其次，目前互联网公司内前端图形开发工作大多数还是由 Web 前端工程师担任，相关需求的增多必然会要求前端工程师逐步具备 3D 图形开发能力。总的来说，前端图形领域虽然可能不会有一个爆发式的增长趋势，但长期会出现相对缓慢的增长趋势。

Oasis 的前端图形学实践

InfoQ：Oasis 的发展历程中经历了几个重要节点？

烧鹅：Oasis 的发展历程可以分为两个重要时期：内部孵化和开源时期。2016 年底，阿里巴巴和蚂蚁的移动端业务发展迅速，在 Web 3D 引擎方面，主要依赖于 Three.js 引擎。虽然 Three.js 引擎本身已经成熟，但其毕竟不是为移动端而生，而且本身功能局限于渲染，三方生态又良莠不齐。另一方面，从技术发展战略上，公司当时已经认识到，面向移动端图形业务，自身有必要去做一个引擎。

在此契机下，仙剑三游戏主程景夫加入蚂蚁开始了引擎的开发，这也是 Oasis 的前身— R3 项目 ，当时，R3 服务的项目还是比较少的，不过直到现在依旧有迹可循，比如我们经常玩的蚂蚁庄园，里面“星星球”的项目就是由这个引擎驱动的，后来，项目也暂停过一个阶段，并没有太多技术上的突破。

直到 2018 年，RichLab 团队接手，开始确定做一个开源引擎。2020 年，拥有多年图形引擎架构和开发经验的尘沫加入团队，主导了整个引擎的重构，也是从这时候开始，团队对引擎功能、性能、易用性等方面有了更高的要求。

InfoQ：聊聊 Oasis 组件化设计的初衷是什么？组件化架构的设计对于引擎开发有没有带来相关挑战，团队是怎样解决的。

烧鹅：组件化架构初衷有两方面， 首先，就图形引擎或者游戏引擎而言，其本身的功能是非常复杂的，除了需要具备三维渲染能力，还需要包含非常多细分领域的功能，比如 2D、3D、UI、音频、物理、VR/AR、逻辑编写等等。采用组件化架构，功能本身就是一个模块，以组件的形式插拔，灵活组合。这样可以更加优雅地组织场景，避免面向对象编程中继承式设计带来的嵌套以及性能损耗。

其次，组件化架构设计对编辑器的可视化展示也是非常友好的。在编辑器上，功能的展示也是扁平罗列出来，从视觉上就可以清楚的判断哪个功能需要，这对于使用者来说也比较简单。

当然组件化架构设计也并非一帆风顺，在重构过程中，团队也面临了诸多挑战。在组件化架构第一版，我们简单粗暴地去递归遍历场景中的每个节点和节点下的组件，而非用缓存组件队列，也没有设计配套的脚本组件接口，导致性能和功能都存在较大缺陷。后期通过引擎的进一步重构，组件化性能问题才得以解决。

另外，组件化架构和编辑器的有机融合，即组件功能在编辑器里的展示，中间也多涉及交互层的设计，目前团队也仍在持续解决中。

InfoQ：Oasis 应用的是 TypeScript 语言，是如何考虑的，有怎样的意义？

烧鹅：Oasis 的开发语言采用了 TypeScript，TypeScript 是 JavaScript 的超集，相比弱类型的 JavaScript 具有非常大的优势。尤其对于大型复杂项目来说，TypeScript 带来的研发效率优势非常明显。

我们用 Typescript 有两方面的原因，首先对于引擎用户开发者来说，Typescript 最大的优势是有代码提示。作为一个 API 功能非常复杂的引擎来说，查 API 手册就像翻阅一本新华字典，这对于开发者来说是一种压力，这种情况下，代码提示显得尤为重要。

其次，对于引擎开发者来说，TypeScript 定义了弱类型语言缺失的能力，比如装饰器、枚举、类型转换等等。这些新的类型和方法，能够帮助开发者减少引擎的代码量，比如我们用了装饰器之后，代码设计非常干净，而运用了枚举，能够高效地组织代码结构、提升代码的健壮性。

InfoQ：除了功能，Oasis 在提升性能方面做了哪些技术上的努力？

烧鹅：Web 图形引擎性能优化一个核心的思想就是：重 GPU 轻 CPU，在这个思想下面再去做一些针对细节的优化 。

虽然 GPU 在复杂计算方面能力弱一点，但是它能够同时进行更多简单的任务，而且就目前现状来看，JS 相对 C++ 等原生 CPU 语言运行效率更低，所以引擎整体性能优化即重 GPU 轻 CPU，一方面把骨骼动画、粒子动画等较大规模的原本 CPU 的计算量转嫁到 GPU 中，另一方面减少 CPU 到 GPU 的资源传输，包括传输量和传输频率，通过这种方式，提升了引擎本身性能。

Oasis 未来发展规划

InfoQ：能否介绍一下 Oasis 下一步技术规划是怎样的？

烧鹅：第一，我们继续深入完善引擎本身更多高级功能，包括物理系统、动画等，增加更多项目案例，进一步降低开发者的上手成本；第二，我们计划在年底开放编辑器，打造一些插件功能；第三，我们也将进一步加强开源影响力建设，不拘泥于国内，而是增加国际影响力。

InfoQ：您认为 Oasis 作为一个 Web 3D 互动图形引擎开源的意义是什么？建立一个持续、健康的开源项目需要哪些准备或者要素。

烧鹅：首先，Oasis 开源的意义在于把引擎往更丰富的业务场景里面去应用，同时也能依靠社区的力量进一步扩大引擎的生态，举个例子，比如适配微信小程序，可能我们没有精力去做，但社区里的开发者会进行相应的完善；其次，开源能够让团队不再拘泥于开发思维而是扩展更多产品、业务思维，这对于自身发展成长也是大有裨益；最重要的一点，选择开源也希望引擎对整个前端图形领域有一定的贡献。很多前端工程师都表示 Oasis Engine 是接触的第一个图形引擎，容易上手，这也可以帮助更多对图形学感兴趣的前端工程师们增加对此领域的了解。

当然，真正的开源，是一种可持续、健康的状态。做开源的话需要做到三点：第一，不要去做所谓的代码开源，而要做到流程规划、问题管理等全部开源；第二，不要只停留在国内，而要多接触国外开发者；第三，持续地做出社区感兴趣的应用，扩大影响力。比如，Unity 每年都会做开发者大会，展示引擎的新功能以及酷炫、让人眼前一亮的效果，他们在内容制作这方面也是值得大家学习的。

InfoQ：最后，您有没有想跟打算学习或者入行前端图形领域的前端工程师们分享的经验或者看法。

烧鹅：随着时代的变化，一些传统的前端工程师已经不满足于现在的界面开发，想去拓宽自己的技术栈，比如图形学方向。

首先，如果前端开发者不满足控制 CSS 的盒模型，而是渴望控制的屏幕上的每个像素，去绘制更有想象力的空间，我认为现在是一个转向前端图形领域不错的时机；其次，经验方面，可以先学图形学的基础课程，对图形学有高屋建瓴的认知，这是很关键的，进一步判断自己是否真正感兴趣，如果感兴趣的话可以开始上手使用一些引擎，比如 Unity 、Oasis 等，通过对引擎的使用，掌握常见的图形学里面的概念，比如灯光、材质等。

另一方面，如果有同学想转引擎开发工程师的话，需要更深度的学习。因为引擎里面的分支也是非常复杂的，包括像我们现在做的互动，也只是一个比较窄和小众的领域。计算机图形领域是一个非常庞大的领域，需要有很深的知识储备，掌握基础知识之后再去挑选自己感兴趣的分支领域发展，比如渲染、物理、动画等等。

Oasis 官网：

https://oasisengine.cn/

Github 地址：

https://github.com/oasis-engine/engine

嘉宾介绍：

烧鹅（徐乾伟）：

蚂蚁集团 Oasis Engine 团队负责人，高级前端技术专家，主导了阿里集团和蚂蚁集团互动图形方向的技术发展，目前致力于 Oasis Engine 引擎和编辑器的产品化建设。