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