简介：绿洲从开源走向新的起点，用3D交互和表达让世界变得更美好。今年支付宝五福的活动相信大家都已经体验过了。今年的五福首页和年兽游戏都是由蚂蚁互动图形引擎（代号：OasisEngine）驱动。OasisEngine是蚂蚁集团的Web3D交互图形引擎，也是阿里巴巴交互技术方向的首选Web3D引擎。2月1日正式开源，本文将介绍OasisEngine的一些概况，以及OasisEngine的过去、现在和未来。希望这篇文章能让你对OasisEngine有一个初步的了解。引擎介绍OasisEngine是一个Web-first、mobile-first的交互/创作平台。使用组件系统架构，追求易用性和轻量化。OasisEngine主要包括三个部分：OasisRuntime、OasisEditor和OasisStore。接下来，我们将从概述、功能介绍、稳定性和性能等维度向大家介绍这款引擎。OverviewOasisEngine采用组件系统架构。OasisEngine不仅需要具备3D渲染能力，还需要包含很多来自各个领域的功能，比如2D、3D、UI、音频、物理、VR/AR、逻辑编写等等，这些功能正是开发者需要。同时，开发者通常希望引擎的结构能够保持清晰，功能能够灵活组合。另外，通常业务开发也希望进行功能沉淀，其实这些都属于易用性的范畴。在这样的功能复杂性和易用性的权衡下，我们选择了组件系统架构。在组件体系架构下，一切都是组件，任何功能都可以以组件的形式进行插件化和灵活组合。同时，脚本也是一种特殊的组件，开发者自然可以将业务功能存放到组件中进行复用。Oasis引擎采用脚本系统进行逻辑编写。我们提供了大量的脚本生命周期回调，开发者只需要重载需要的回调函数即可。在易用性和可读性方面，脚本比通过事件写逻辑有明显的优势。特别是在组件系统架构中，脚本系统是一种更自然的方式。包括我们在做引擎架构的时候，从来不认为任何架构是绝对对错的，更多的是取舍和适当的讨论。同时，我们在脚本系统中也做了很多体验优化，比如提供了克隆装饰器，开发者可以根据属性的实际情况选择不同的克隆装饰器来设置克隆模式，更容易上手使用比手动编写克隆功能。Oasis引擎的开发语言使用TypeScript，它是JavaScript的强类型超集，相对于弱类型JavaScript有很大的优势。特别是对于大型复杂项目，TypeScript显着提升了研发效率。相信这几年很多前端开发者都经历过。我们也推荐开发者使用TypeScript来编写逻辑脚本。Oasis引擎在API的设计上奉行严谨、简单、易用的原则。听起来很笼统，但背后却是无数设计细节的积累。从体感的角度来看，清爽、自然、易用、符合开发者直觉的API设计才是好的设计。我们在API设计中也使用了很多现代语法特性，比如函数重载、装饰器、async/await、泛型等，这些语法对于API设计非常重要，将直接提升用户的研发体验。函数介绍Transform是引擎经常使用的函数，无论是渲染还是物理，Transform都需要描述坐标等相关信息。所以一个优秀的Transform不仅要功能强大，还要有很好的性能优化。Transfrom最显着的特点之一是父变换会影响子变换。比如我们可以想象修改父节点的本地位置会触发自身和子节点的世界位置变化。然而，实际情况可能远比这复杂。如果修改父节点的局部旋转，不仅会触发自身和子节点的世界旋转变化，还会触发自身和子节点的世界位置变化。修改局部缩放也有类似的效果。我们在Transform内部做了很多原子脏标记。基本原则是，如果没有获取属性，则不会计算。如果拿到属性，会根据dirtymark判断是否重新计算。基于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这款非常火的二维动画软件并不陌生。稳定性和性能稳定性和性能对发动机来说非常重要。我们在稳定性和性能方面付出了很多努力。上亿流量的平台项目crash率低于万分之0.3：在测试方面，我们在写每个功能的时候，都增加了相应的单元测试用例，在github上也部署了自动化的CI测试。在性能优化方面，我们也下了不少功夫，比如组件驱动优化、Transform优化、显存上传优化、数学库优化等等。在内存优化方面，我们提供了GPU纹理压缩功能，可以减少大约80%的纹理内存，同时也提供了良好的资源GC管理机制。在每一个系统设计中，我们都会综合考虑性能和内存之间的平衡，不会极端盲目地使用“空间换时间”。让我们谈谈我们目前的绩效状况。基于上图的性能测试用例，我们也与国外知名的Web3D引擎进行了性能对比。在相同的测试规模和环境下，Oasis的性能是国外知名Web3D引擎的两倍左右。这个案例虽然不是很全面，但至少是某些功能的综合表现。总结最后，我们总结一下引擎介绍。Oasis引擎采用组件系统架构，逻辑编写采用脚本系统，引擎源码采用TypeScript编写。在功能方面，我们介绍了引擎的几个基本系统，即Transform系统、资源系统、材质/着色系统和BufferGeometry系统。相信以后我们会有机会和大家一起推出更多的功能；在稳定性和性能方面，具有金融级的稳定性和领先的性能。接下来，我们来介绍一下Oasis引擎的前世今生。套用王小波的“时代三部曲”，将绿洲引擎的发展分为三个阶段：黑铁时代、青铜时代和白银时代。黑铁时代??的第一阶段是“黑铁时代”（2016-2018）。2016年，阿里巴巴和蚂蚁的移动业务蓬勃发展，但交互需求的图形技术还比较落后。以Web3D引擎为例，长期以来一直依赖于并非为移动端而生的Three.js引擎。在资产标准方面，glTF2.0还没有诞生。obj+mtl这种古老的格式还不支持PBR等高级材质的能力。fbxdesigner虽然导出方便，但是体积太大，Three.js的loader不稳定。结果，当艺术资产进入引擎阶段时，许多项目就中止了。2016年底，蚂蚁图形引擎史上第一位英雄登场。JingFu（ant高级图形技术专家，三剑主程序，R3核心开发者）编写了ant图形引擎的第一行代码。这个项目被命名为R3（意思是3D渲染）。R3为蚂蚁移动的交互业务而生。采用业界先进的组件系统游戏引擎架构。为了在工程上最小化运行体积，它使用了流行的monorepo多包单仓库开发模型。为了更方便的解决场景编辑的问题，R3还定义了一套自己的开发工作流程，采用业界领先的Unity编辑器作为场景编辑器，通过自研的Unity插件导出glTF文件进行runtime加载并解析到场景中。黑铁时代??留下了几部经典作品。今天，当你打开蚂蚁庄园的“游戏”面板时，你仍然可以看到这些低端游戏。《星际星球》是第一款使用R3引擎的互动游戏，当时甚至还开发了AR版本，比较具有开创性。青铜时代的第二阶段是“青铜时代”（2018-2020）。蚂蚁图形引擎从体验技术部交到了业务场景更丰富的RichLab团队。从R3升级到Oasis后，新团队开始重新思考图形引擎对于蚂蚁交互业务和前端工程师的意义。在移动支付和金融数字化的背景下，大量丰富的移动业务交互场景开始涌现，对稳定性的要求非常苛刻。为了更快更好的解决业务需求，我们一方面开始拥抱前端生态：使用Typescript重构引擎，让引擎代码更加健壮，开发者可以获得更好的代码提示体验；集成ant前端开发框架，让引擎可以自然的运行在React等框架中，具备积累资产的能力；配合客户端和小程序容器的同学适配支付宝小程序，让引擎可以运行在更多的环境中。另一方面，我们将重点放在提高3D研发效率上。通过自主研发的OasisEditor云场景编辑器，我们实现了资产管理、场景编辑、脚本编写等核心能力。同时我们也关心工作流上下游的衔接，比如美术资产的导入。我们推荐使用fbx文件作为输入，然后通过云资源转换和压缩能力处理成适合运行时加载的文件；例如，我们提供导出不同产品的能力，包括React/Rax/applets等，实现一次开发，多次部署。第三个时代是“白银时代”（2020-？）。蚂蚁图形引擎历史上的第二位英雄出现，尘埃的加入就像是普罗米修斯为绿洲引擎重生带来火焰的神话。经过八个月的四次迭代，引擎的功能、性能、易用性都发生了质的变化：在功能方面，引擎的实体/组件系统、脚本系统、资源系统、材质/Shader系统的基础系统能力在易用性方面，对发动机的核心系统进行了重新设计和重新思考。API细节方面，完全摒弃了以往组件通过对象传参的模式，通过set/get属性控制控件，充分利用Typescript语言特性，让开发者充分享受“猜”的爽快感API”；在性能方面，引擎整体性能提升至青铜时代的四倍，BufferGeometry系统和材质/Shader系统的单项性能达到了上一版本的十倍。以上，大大领先于国外知名的Web3D引擎。除了技术的不断升级，绿洲团队也非常重视业务落地。我们服务过阿里巴巴、蚂蚁集团多个事业部的项目，在各业务方中获得了良好的口碑。我们还验证了引擎在各种客户端的兼容性和稳定性。未来展望白银时代也是一个开源时代。事实上，绿洲引擎的研发迭代早在青铜时代就进入了内部开源。根据开源工作模型，通过里程碑和问题管理功能进行迭代。虽然引擎在基础功能上已经可以满足业务需求，但未来我们希望将引擎放在更大的舞台上，通过开源进一步提升引擎的能力。比如在物理引擎方面，我们目前正在通过WebAssembly将其集成到引擎中。在引擎的完备性上，我们会先补充2D图形的能力，同时让引擎能够渲染更多交互需要的精灵类型，比如Spine、Lottie；更进一步的目标是实现引擎的跨平台，虽然目前只支持WebGL1.0和2.0，但是可以看到引擎的API，比如WebCanvas，已经设计成跨平台的引擎接口了。未来会根据需求的优先级实现Metal/Vulkan/WebGPU等新的图形语言接口的接入。坦率地说，绿洲还处于发展期。今天的开源只是绿洲的一个新起点，未来还有很长的路要走。希望绿洲引擎能以自己的方式为国产3D引擎事业贡献力量，也希望绿洲团队不??忘初心。我们将用3D交互和表达，让世界变得更美好，实现心中的绿洲。作者：绿洲团队原文链接本文为阿里云原创内容，未经许可不得转载
