点击上方“深圳湾码农”，回复“2”进入交流群
加入我们一起学习，每天进步
今年支付宝五福的活动相信大家都已经体验过了。 今年的五福首页和年兽游戏都是由蚂蚁互动图形引擎（代号：Oasis Engine）驱动。
Oasis Engine是蚂蚁集团的Web 3D交互图形引擎，也是阿里经济体交互技术方向的首选Web 3D引擎。 2月1日正式开源，有兴趣的同学可以关注我们
Github社区：
加入钉钉开发者交流群：31360432。
无论你是渲染、TA、IDE，还是更细分领域的方向，只要你和我们有相同的理想和目标，欢迎投递简历至
本文将介绍Oasis Engine的一些概况以及Oasis Engine的前世今生和未来展望。 希望这篇文章能让你对Oasis Engine有一个初步的了解。
发动机介绍
Oasis Engine 是一个网络优先、移动优先的交互/创作平台。 使用组件系统架构，追求易用性和轻量化。 Oasis Engine主要包括三个部分：Oasis Runtime、Oasis Editor和Oasis Store。 接下来，我们将从概述、功能介绍、稳定性和性能等维度向大家介绍这款引擎。
概述
Oasis Engine采用组件系统架构。 Oasis Engine不仅需要具备3D渲染能力，还需要包含很多来自各个领域的功能，比如2D、3D、UI、音频、物理、VR/AR、逻辑编写等等，这些功能就是什么开发者需要。 同时dgame3d——开源3d网页游戏引擎，开发者通常希望引擎的结构能够保持清晰，功能能够灵活组合。
另外，通常业务开发也希望进行功能沉淀，其实这些都属于易用性的范畴。 在这样的功能复杂性和易用性的权衡下，我们选择了组件系统架构。 在组件体系架构下，一切都是组件，任何功能都可以以组件的形式进行插件化和灵活组合。 同时，脚本也是一种特殊的组件，开发者自然可以将业务功能存放到组件中进行复用。
Oasis 引擎采用脚本系统进行逻辑编写。 我们提供了大量的脚本生命周期回调，开发者只需要重载需要的回调函数即可。
在易用性和可读性方面，脚本比通过事件写逻辑有明显的优势。 特别是在组件系统架构中dgame3d——开源3d网页游戏引擎，脚本系统是一种更自然的方式。 包括我们在做引擎架构的时候，从来不认为任何架构是绝对对错的，更多的是取舍和适当的讨论。 同时，我们在脚本系统中也做了很多体验优化，比如提供了克隆装饰器，开发者可以根据属性的实际情况选择不同的克隆装饰器来设置克隆模式，更容易上手使用比手动编写克隆功能。
Oasis引擎的开发语言采用了TypeScript，它是JavaScript的强类型超集，相对于弱类型JavaScript有很大的优势。 特别是对于大型复杂项目，TypeScript 显着提升了研发效率。 相信这几年很多前端开发者都经历过。 我们也推荐开发者使用 TypeScript 来编写逻辑脚本。
Oasis引擎在API的设计上奉行严谨、简单、易用的原则。 听起来很笼统，但背后却是无数设计细节的积累。 从体感的角度来看3D场景，API设计清爽、自然、易用、符合开发者直觉的才是好的设计。 我们在API设计中也使用了很多现代语法特性，比如函数重载、装饰器、async/await、泛型等，这些语法对于API设计非常重要，将直接提升用户的研发体验。
特征
Transform是引擎的高频函数。 无论是渲染还是物理，Transform 描述的都是坐标等相关信息。 所以一个优秀的Transform不仅要功能强大，还要有很好的性能优化。
Transfrom 最显着的特点之一是父变换会影响子变换。 比如我们可以想象修改父节点的本地位置会触发自身和子节点的世界位置变化。 然而，实际情况可能远比这复杂。 如果修改父节点的局部旋转，不仅会触发自身和子节点的世界旋转变化2d素材，还会触发自身和子节点的世界位置变化。 修改局部缩放也有类似的效果。 我们在 Transform 内部做了很多原子脏标记。 基本原理是，如果没有获取属性，则不会计算。 如果拿到属性，会根据dirty mark判断是否重新计算。
基于WebGL开发的引擎通常会面临JS没有析构函数的问题。 引擎的显存对象不在JS托管范围内，不处理会造成显存泄漏。 因此Oasis引擎提供了手动释放资源的功能，可以直接调用对象的销毁函数来释放显存。 但实际问题要复杂得多。 在给开发同学设计模型的时候，不知道模型和资源之间的引用关系。 比如实体引用材质，材质引用贴图，它们之间的引用关系错综复杂。 首先，我们很难找到这些资源； 其次，很难保证它们不被其他模型引用和安全销毁。
资源系统是引擎的基本能力，包括资源加载和管理等职责。 Oasis引擎的资源系统加载API非常简单易用，支持泛型和异步编程。 我们做了资源引用计数。 开发者只需要关心实体节点的销毁即可。 引擎会自动维护引用计数。 当调用resourceManager.gc()时，所有引用计数为0的资源都会被自动销毁，这样功能性的A平衡就直接找到了，方便使用。
着色/材质系统是引擎的渲染心脏，其好坏在一定程度上决定着引擎的健康发展。 Oasis 引擎自定义着色器非常简单，允许开发人员专注于着色器逻辑本身。 shader的数据设置也很简单，调用shaderData中的相关接口即可。 有相关开发经验的同学可能也知道shader宏函数，在Oasis中也很简单，调用enableMacro接口即可。 相关的子着色器编译在引用中自动处理。
除了简单之外，Oasis 的整个着色系统也非常强大。 Oasis 也是一个 GPU 友好的引擎，不仅可以通过材质设置着色数据，还可以通过场景、渲染器和相机等对象设置着色数据。 此外，蒙皮计算、粒子轨迹计算、材质着色等模块都可以非常自然地在GPU中实现，充分发挥GPU的并行计算能力。
除了自定义着色器，Oasis 引擎还提供了一个灵活而强大的 BufferGeometry 系统，开发者可以使用它来自定义几何数据。 BufferGeometry 系统支持交错顶点缓冲区、独立顶点缓冲区、实例缓冲区和索引缓冲区。 做过底层图形开发的同学可能对这些功能非常熟悉。 Oasis 的 BufferGeometry 系统包含了几乎所有 GPU 相关的几何数据处理能力。 引擎必须包含简单易用的功能，能同时灵活和强大自然是极好的。
下面说说 BufferGeometry 能做什么。 事实上，高级开发人员可以使用它来访问任何自定义粒子、拖尾和其他功能。 比如Mars组件和Spine组件就是通过BufferGeometry系统连接起来的。 Mars也是蚂蚁集团的一款高性能动画特效软件。 想必大家对Spine这款非常火的二维动画软件并不陌生。
稳定性和性能
稳定性和性能对发动机非常重要。 我们在稳定性和性能方面付出了很多努力。 上亿流量的平台项目崩溃率小于万分之0.3：
让我们谈谈我们目前的性能状态。 基于上图的性能测试用例，我们也与国外知名的Web3D引擎进行了性能对比。 在相同的测试规模和环境下，Oasis的性能是国外知名Web3D引擎的两倍左右。 这个案例虽然不是很全面，但至少是某些功能的综合表现。
总结
最后，我们总结一下引擎介绍。 Oasis引擎采用组件系统架构，逻辑编写采用脚本系统，引擎源码采用TypeScript编写。 在功能方面，我们介绍了引擎的几个基本系统，即Transform系统、资源系统、材质/着色系统和BufferGeometry系统。 相信以后我们会有机会和大家一起推出更多的功能； 在稳定性和性能方面，具有金融级的稳定性和领先的性能。
过去和现在
下面介绍一下绿洲引擎的前世今生，并套用王小波的“时代三部曲”，将绿洲引擎的发展分为三个阶段：黑铁时代、青铜时代和白银时代。
铁器时代
第一阶段是“黑铁时代”（2016-2018）。 2016年，阿里巴巴和蚂蚁的移动业务蓬勃发展，但交互需求的图形技术还比较落后。 以Web 3D引擎为例，他们长期以来依赖于并非为移动端而生的Three.js引擎。 在资产标准方面，glTF 2.0 还没有诞生。 obj+mtl这种古老的格式还不支持PBR等高级材质的能力。 fbx designer虽然导出方便，但是体积太大，Three.js的loader不稳定。 结果，当艺术资产进入引擎阶段时，许多项目就中止了。
2016年底，蚂蚁图形引擎史上第一位英雄登场。 Jing Fu（ant高级图形技术专家，三剑主程序，R3核心开发者）编写了ant图形引擎的第一行代码。 这个项目被命名为 R3（意思是 3D 渲染）。 R3为蚂蚁移动的交互业务而生。 采用业界先进的组件系统游戏引擎架构。 为了在工程上追求运行体积的最小化，它采用了流行的monorepo多包单仓库开发模型。 为了更方便的解决场景编辑的问题，R3还定义了一套自己的开发工作流程，采用业界领先的Unity编辑器作为场景编辑器，通过自研的Unity插件导出glTF文件进行runtime加载并解析到场景中。
黑铁时代留下了几部经典作品。 今天，当你打开蚂蚁庄园的“游戏”面板时，你仍然可以看到这些低端游戏。 《星际星球》是第一款使用R3引擎的互动游戏，当时甚至还开发了AR版本，比较具有开创性。
青铜时代
第二阶段为“青铜时代”（2018-2020）。 蚂蚁图形引擎从体验技术部交到了业务场景更丰富的RichLab团队。 从R3升级到Oasis后，新团队开始重新思考图形引擎对于蚂蚁交互业务和前端工程师的意义。 在移动支付和金融数字化的背景下，大量丰富的移动业务交互场景开始涌现，对稳定性的要求非常苛刻。 为了更快更好的解决业务需求，我们一方面开始拥抱前端生态：
另一方面，我们将重点放在提高3D研发效率上。 通过自主研发的Oasis Editor云场景编辑器，我们实现了资产管理、场景编辑、脚本编写等核心能力。 同时我们也关心工作流上下游的衔接，比如美术资产的导入。 我们推荐使用fbx文件作为输入，然后通过云资源转换和压缩能力处理成适合运行时加载的文件； 例如，我们提供导出不同产品的能力，包括React/Rax/applets等，实现一次开发，多次部署。
白银时代
第三个时代是“白银时代”（2020-？）。 蚂蚁图形引擎历史上的第二位英雄出现，尘埃的加入就像是普罗米修斯为绿洲引擎重生带来火焰的神话。 经过八个月和四次迭代，引擎的功能、性能和易用性都发生了质的变化：
除了技术的不断升级，绿洲团队也非常重视业务落地。 我们服务过阿里巴巴、蚂蚁集团多个事业部的项目，在各业务方中获得了良好的口碑。 我们还验证了引擎在各种客户端的兼容性和稳定性。
未来展望
白银时代也是一个开源的时代。 事实上，绿洲引擎的研发迭代早在青铜时代就进入了内部开源。 按照开源工作模式，通过里程碑和问题管理功能进行迭代。 虽然引擎在基础功能上已经可以满足业务需求，但未来我们希望将引擎放在更大的舞台上，通过开源进一步提升引擎的能力。 比如在物理引擎方面，我们目前正在通过WebAssembly将其集成到引擎中。 在引擎的完备性上，我们会先补充2D图形的能力，同时让引擎能够渲染更多交互需要的精灵类型，比如Spine、Lottie； 更进一步的目标是实现跨平台引擎，虽然目前只支持WebGL 1.0和2.0，但是可以看到引擎的API，比如WebCanvas，已经设计成跨平台引擎接口了。 未来会根据需求的优先级实现Metal/Vulkan/WebGPU等新的图形语言接口的接入。
坦率地说，绿洲还处于发展期。 今天的开源只是绿洲的一个新起点，未来还有很长的路要走。 希望绿洲引擎能以自己的方式为国产3D引擎事业贡献力量，也希望绿洲团队不忘初心。 我们将用3D交互和表达，让世界变得更美好，实现心中的绿洲。
相关参考资料
绿洲官网：
绿洲 Github 社区：
钉钉开发者交流群：31360432
无论你是渲染、TA、IDE，还是更细分领域的方向，只要你和我们有相同的理想和目标，欢迎投递简历至
❤️ 读三件事
如果您觉得此内容鼓舞人心，我想邀请您帮我三个小忙：
点击“在看”，让更多人看到这个内容（喜不喜欢，都是耍流氓-_-）
