tokenpockettokenpocket钱包下载|蚂蚁引擎

作者： tokenpockettokenpocket钱包下载

2024-03-09 23:07:16

BT蚂蚁磁力_btmayi.cc

首页 | 网址分类地区分类实用网址最新网址推荐网址随机网址

当前位置：首页 > 分类目录 > 电脑网络 > 分类搜索

BT蚂蚁磁力

网站信息更新日期：2024-03-09

网站名称：BT蚂蚁磁力网站语言：中文简体

网站域名：btmayi.cc进入网站

网站分类：电脑网络 > 分类搜索所属地区：未知

网站简介

BT蚂蚁磁力——一个懂你的磁力搜索导航网站，每天为您分享优质的磁力搜索引擎，为大家提供高质量的影视、小说、图片、视频、美剧、美剧等搜索服务。

Oasis Engine 开源一周年：直击大前端互动领域最新探索与实践_开源_闫园园_InfoQ精选文章

五福背后的 Web 3D 引擎 Oasis Engine 正式开源 - 知乎

五福背后的 Web 3D 引擎 Oasis Engine 正式开源 - 知乎首发于蚂蚁 RichLab 前端团队切换模式写文章登录/注册五福背后的 Web 3D 引擎 Oasis Engine 正式开源Jothy阿里巴巴集团前端工程师作者：Oasis 团队相信大家已经体验了今年支付宝五福的活动，无论是今年的五福首页还是打年兽游戏都是由蚂蚁互动图形引擎（代号：Oasis Engine）驱动的。Oasis Engine 是蚂蚁集团 Web 3D 互动图形引擎，同时也是阿里经济体互动技术方向的首选 Web 3D 引擎，已于 2 月 1 日正式开源。感兴趣的同学可以关注我们的 Github 社区：https://github.com/oasis-engine/engine 和加入钉钉开发者交流群：31360432无论你是渲染方向、TA 方向、IDE 方向、还是更细分的领域，只要你和我们一样有共同的理想和目标，欢迎投递简历到 chenmo.gl@antgroup.com这篇文章会和大家介绍 Oasis Engine 的一些概况和 Oasis Engine 的前世今生以及未来展望。希望通过这篇文章可以让大家对 Oasis Engine 有一个初步了解。引擎介绍Oasis Engine 是引擎一款以 Web 为先，移动为先的互动/创作平台。使用组件系统架构，并且追求易用和轻量。Oasis Engine 主要包含 Oasis Runtime、Oasis Editor 和 Oasis Store 三部分。接下来我们会通过概述、功能介绍、稳定性和性能几个维度来给大家介绍引擎。概述 Oasis Engine 采用组件系统架构，Oasis Engine 不仅需要具备三维渲染能力，还需要包含了非常多来自各领域的功能，比如 2D、3D、UI、音频、物理、VR/AR、逻辑编写等等，这些功能都是开发者的刚需。同时开发者在使用上也通常希望引擎的结构可以保持清晰，功能可以灵活组合。除此之外，通常业务开发还希望进行功能沉淀，其实这些都是属于易用性的范畴。在如此功能复杂度和易用性的权衡下，我们选择了组件系统架构。在组件系统架构下，万物皆组件，任何功能都可以以组件的形式插拔，灵活组合。同时脚本也是一种特殊的组件，开发者也可以很自然的把业务功能沉淀为组件复用。 Oasis 引擎采用脚本系统进行逻辑编写。我们提供了非常多的脚本生命周期回调，开发者只需重载需要的回调函数即可。从易用性和可读性来说，脚本相对通过事件编写逻辑都具有明显的优势。尤其在组件系统架构中，脚本系统是更自然的一种方式。包括我们在做引擎架构时也从不会认为任何一种架构有绝对的对错，更多的是权衡和适合的探讨。同时，我们在脚本系统也做了很多体验上的优化，比如提供了克隆装饰器，开发者可以根据属性的实际情况选择不同的克隆装饰器设置克隆模式，相对于手动编写克隆函数更加的易用。Oasis 引擎的开发语言采用了 TypeScript ，TypeScript 是 JavaScript 的强类型超集，相比弱类型的 JavaScript 具有非常大的优势。尤其对于大型复杂项目，TypeScript 带来了研发效率提升非常明显。相信近几年很多前端开发者已经有所体会。我们也推荐开发者使用 TypeScript 编写逻辑脚本。Oasis 引擎在 API 的设计上追求严谨性、简洁性、易用性等宗旨，听起来很笼统，但是这背后却是无数的设计细节堆积起来的。从体感的维度来讲，清爽、自然、易用、符合开发者直觉的 API 设计就是好设计。我们在 API 设计上还利用了大量现代化的语法特性，比如函数重载、装饰器、async/await、泛型等，这些语法对于 API 的设计非常重要，会直接提升用户的研发体验。功能介绍Transform 是引擎的高频使用功能，无论是渲染还是物理都需要 Transform 描述坐标等相关信息。所以一个优秀的 Transform 不仅要功能强大，还有具备良好的性能优化。Transfrom 最显著的一个特点就是父变换会影响子变换，比如我们能想到修改父节点的局部位置会触发自身和子节点的世界位置变化。但是，实际情况可能远比这复杂，如果修改父节点的局部旋转，不仅会触发自身和子节点的世界旋转变化，还会触发自身和子节点的世界位置变化。同样修改局部缩放也有类似的效应。我们在 Transform 内部做了很多原子化的脏标记，基本原则就是不 get 属性不计算，如果 get 了属性也会根据脏标记判断是否要重新计算。基于 WebGL 开发的引擎通常面临 JS 没有析构函数的困扰。引擎的显存对象并不在 JS 的托管范围之内，如果不进行处理就会造成显存泄漏。于是，Oasis 引擎提供了资源的手动释放函数，可以直接调用对象的销毁函数进行显存释放。但是实际问题更加复杂，当设计给开发同学一个模型时，我们并不知道这个模型对资源的引用关系。比如实体引用了材质，材质又引用了纹理，他们之间的引用关系错综复杂。首先，我们很难找到这些资源；其次，找到了也很难确保其没有被别的模型引用并进行安全销毁。资源系统是引擎的基础能力，包含资源的加载和管理等职责。Oasis 引擎的资源系统加载 API 非常的简单易用，并且支持泛型、和异步编程。我们做了资源引用计数，开发者只需要关心实体节点的销毁即可，引擎内部会自动维护引用计数，调用 resourceManager.gc() 时，所有引用计数为 0 的资产会自动销毁，从而在功能性和易用性直接找到了平衡。着色/材质系统是引擎的渲染心脏，其好坏一定程度上决定了引擎的健康发展。Oasis 引擎自定义着色器非常的简单，让开发者专注于着色器逻辑本身。着色器的数据设置也非常简单，只需调用 shaderData 中的相关接口即可。有过相关开发经验的同学可能还知道着色器宏功能，在 Oasis 中同样非常简单，只需调用 enableMacro 接口即可。引用内部会自动处理相关的子着色器编译。除了简单，Oasis 的整个着色系统还非常强大，Oasis 还是一个面向 GPU 友好的引擎，不仅可以通过材质设置着色数据，还可以通过场景、渲染器、相机等对象设置着色数据。另外，还可以非常自然地把蒙皮计算、粒子轨迹计算、材质着色等模块放入 GPU 中执行，充分发挥 GPU 的并行运算能力。除了自定义着色器之外，Oasis 引擎还提供了灵活强大的 BufferGeometry 系统，开发者可以使用该系统自定义几何体数据。BufferGeometry 系统支持交错顶点缓冲、独立顶点缓冲、instance 缓冲和索引缓冲，做过底层图形开发的同学可能会非常熟悉这些功能。Oasis 的 BufferGeometry 系统几乎包含了所有 GPU 相关的几何体数据处理能力。引擎包含简单易用的功能是必须的，如果能同时兼顾灵活和强大那自然是极好的。我们来说说 BufferGeometry 具体可以做什么，其实高级开发者可以使用它接入任何自定义粒子、拖尾之类的功能。比如 Mars 组件和 Spine 组件就是采用 BufferGeometry 系统接入的。Mars 也是蚂蚁集团的一款高性能动画和特效软件，Spine 想必大家都很了解了，一款非常流行的 2D 动画软件。稳定性和性能稳定性和性能对引擎来说非常的重要，我们在稳定性和性能方面付出了非常多的努力，在亿级流量的平台项目上 crash 率小于万分之 0.3 ：测试方面，我们在编写每个功能的同时都会增加对应的单测案例，在 github 也部署了自动化 CI 测试。性能优化方面，我们也付出了非常多的努力，比如组件驱动的相关优化、Transform 优化、显存上传优化、数学库优化等等。内存优化方面，我们提供了 GPU 纹理压缩功能，可以让纹理显存降低约80% ，同时还提供了良好的资源 GC 管理机制。在每一个系统设计上，我们都会综合考虑性能和内存的平衡点，不会极端盲目的使用“空间换时间”。再来说说我们目前的性能现状，基于上图中的性能测试案例，和国外知名 Web3D 引擎也进行了性能对比，同样的测试规模和环境，Oasis 的性能大约是国外知名 Web3D 引擎的 2 倍。虽然这个案例并不是很全面，但至少是某几块功能的综合性能表现。总结最后，我们对引擎介绍进行一下总结，Oasis 引擎采用组件系统架构、逻辑编写采用脚本系统、引擎源码使用 TypeScript 编写。功能上，我们介绍了引擎的几个基础系统，分别是 Transform 系统、资源系统、材质/着色系统和 BufferGeometry 系统，相信后续还会有机会和大家进行更多的功能介绍；稳定性和性能方面，具备金融级稳定性和领先的性能。前世今生接下来，我们介绍一下 Oasis 引擎的前世今生，套用王小波的“时代三部曲”，将 Oasis 引擎发展至今分为三个阶段：黑铁时代、青铜时代和白银时代。黑铁时代第一阶段是“黑铁时代”（2016年-2018年）。2016年，阿里巴巴和蚂蚁的移动端业务蓬勃发展，但是面向互动需求的图形技术还比较落后，以 Web 3D 引擎为例，长时间内都依赖并不是为移动端而生的 Three.js 引擎。在资产标准方面，glTF 2.0 还没有诞生，obj + mtl 这种古老的格式还不支持 PBR 等高级材质的能力，虽然 fbx 设计师导出方便，但因为其体积过大和 Three.js 的加载器不稳定导致很多项目在美术资产进引擎阶段就流产。 2016年底，蚂蚁图形引擎史上第一位英雄出现，景夫（蚂蚁高级图形技术专家、仙剑三主程、R3 核心开发者）写下了第一行蚂蚁图形引擎的代码，这个项目被命名成 R3（意为 Render for 3D）。R3 为蚂蚁移动端的互动业务而生，采用行业里先进的组件系统游戏引擎架构，工程上为了追求运行时体积的最小化，使用流行的 monorepo 多包单仓库的开发模式。为了更方便地解决场景编辑问题，R3 也定义了一套自己的开发工作流，采用行业里领先的 Unity 编辑器作为场景编辑器，通过自研的 Unity 插件导出 glTF 文件，供运行时加载解析成场景。黑铁时代留下了几个经典的作品，今天打开蚂蚁庄园的“运动会”面板，依旧能看到这这些 low ploygon 风格的游戏。“星星球”是第一个使用 R3 引擎的互动游戏，甚至当时还开发了 AR 版本，比较先锋。青铜时代第二阶段是“青铜时代”（2018年-2020年）。蚂蚁图形引擎从体验技术部移交到了业务场景更加丰富的 RichLab 团队，从 R3 升级为 Oasis，新团队开始重新思考图形引擎之于蚂蚁互动业务和前端工程师的意义。在移动支付和金融数字化的背景下，移动端业务大量的富交互场景需求开始涌现，而对于稳定性的要求非常苛刻。为了更快更好地解决业务诉求，我们一方面开始拥抱前端生态：用 Typescript 重构引擎，使引擎的代码更加健壮，同时开发者可以获得更好的代码提示体验；融入蚂蚁前端开发框架，让引擎能够自然地运行在 React 等框架中，并且拥有资产沉淀能力；和客户端以及小程序容器的同学合作适配了支付宝小程序，让引擎能够在更多的环境中运行。另一方面，我们把重心放到了 3D 研发提效上。通过自研的 Oasis Editor 云端场景编辑器，我们实现了资产管理、场景编辑器、脚本编写等核心能力。同时，我们也关心工作流上下游的衔接问题，比如美术资产的导入问题，我们建议使用 fbx 文件作为输入，然后通过云端的资产转换和压缩等能力处理成适合运行时加载的文件；又比如，我们提供不同产物导出的能力，有 React/Rax/小程序等，实现一处开发多处部署。白银时代第三个时代是“白银时代”（2020年-?）。蚂蚁图形引擎史上的第二位英雄出现，尘沫的加入就如普罗米修斯神话为 Oasis 引擎的重生带来了火焰。经过八个月的四次迭代，引擎的功能、性能和易用性都发生了质的变化：功能方面，引擎的实体/组件系统、脚本系统、资源系统、材质/Shader 系统等基础系统能力达到了行业先进水平；易用性方面，对引擎的核心系统进行了重新设计和思考，API 细节上完全抛弃了之前组件用对象传参的模式，通过 set/get 属性来控制，充分利用 Typescript 语言的特性，让开发者充分享受到“猜测 API”的爽快感；性能方面，引擎的综合性能增强到了青铜时代的四倍，其中 BufferGeometry 系统、材质/Shader 系统的单项性能均达到了之前版本的十倍以上，大幅领先国外知名 Web 3D 引擎。除了在技术上的不断升级，Oasis 团队也非常重视业务落地，我们服务了阿里巴巴和蚂蚁集团内众多事业部的项目，在各个业务方中获得良好的口碑，在各个客户端中也验证了引擎的兼容性和稳定性。未来展望白银时代也是一个开源的时代，事实上 Oasis 引擎的研发迭代早在青铜时代就进入内部开源，按照开源的工作模式通过里程碑和 issue 管理功能迭代。如今引擎虽然在基础功能上已经能够满足业务需求，但未来我们希望把引擎放在一个更大的舞台，通过开源的方式把引擎的能力进一步增强。比如物理引擎方面，目前我们正在通过 WebAssembly 的方式将其集成到引擎中。在引擎的完整性方面，我们首先会补充 2D 图形的能力，同时让引擎能够渲染更多互动中所需的精灵类型，比如 Spine 和 Lottie；更远的目标是实现引擎的跨平台，虽然目前仅支持 WebGL 1.0 和 2.0，但可以看到引擎的 API 如 WebCanvas 等都已经是跨平台引擎的接口设计了，未来会根据需求优先级实现 Metal/Vulkan/WebGPU 等新型图形语言接口的接入。坦白来说， Oasis 还处于发展期，今天开源也只是 Oasis 新的起点，未来还有很长的路要走。希望 Oasis 引擎可以用自己的方式为国产 3D 引擎事业尽一份力，也希望 Oasis 团队可以不忘初心，我们将用 3D 化的交互和表达让世界变得更美好，实现我们心中的绿洲。 https://qr.dingtalk.com/action/joingroup?code=v1,k1,z5lKZLV8thWVr3HW65NvF1h3anwza0WSvUhQtArZkQY= (二维码自动识别)相关引用Oasis 官网：https://oasis-engine.github.io Oasis Github 社区：https://github.com/oasis-engine/engine 钉钉开发者交流群：31360432无论你是渲染方向、TA 方向、IDE 方向、还是更细分的领域，只要你和我们一样有共同的理想和目标，欢迎投递简历到 chenmo.gl@antgroup.com编辑于 2021-02-04 14:45开源3D 渲染前端开发赞同 62896 条评论分享喜欢收藏申请转载文章被以下专栏收录蚂蚁 RichLab 前端团队来自蚂蚁集团花呗借呗的全能型前端团队RichLab

如何评价蚂蚁开源的3D引擎oasis engine? - 知乎

如何评价蚂蚁开源的3D引擎oasis engine? - 知乎首页知乎知学堂发现等你来答切换模式登录/注册开源软件开源免费开源如何评价蚂蚁开源的3D引擎oasis engine?关注者199被浏览146,175关注问题写回答邀请回答好问题 15添加评论分享14 个回答默认排序知乎用户很久没有用知乎了，但是 Oasis 团队是前同事，所以特意上来说说我的想法。我没有办法评价 Oasis 这个引擎本身怎么样，因为我对动画技术所知甚少。但是正因为我在动画领域是一个完全的外行，所以我想从 marketing 的角度来聊聊这个事情。阿里开源给人的印象是为了开源而开源，我认为最大的原因是，阿里的团队在做开源项目的时候，总是喜欢对外宣称他们用这个项目「支撑了什么业务」（当然这是一个好的策略，而且也是事实），但从来不会花精力去告诉他们的受众：「你们可以用它来做什么」。因此大部份的人只是听上去觉得阿里又开源了一个很牛逼的项目，但是这和我有什么关系呢？开源的本质不仅是开放源代码，而且是让每个人都能自由地修改这个软件，从而推进这个软件的发展。那么如果开源只是赚到了一万个吆喝，那么开源的意义又是什么呢？即使依靠猛烈的宣传和阿里的背景最终可以让项目的 star 破千，破万，以我对 Oasis 团队的认识，这不是他们想要达到的根本目标。所以 Oasis 团队要做的，我觉得是在做好 toolchain 本身之外，还要花更多的力气去教育这个「市场」，吸引更多的程序员去了解 Web 动画。首先是在业务的角度，动画对于支付宝营销活动业务数据的影响有多大？如果在我们的营销业务增加了动画，是否可以帮助业务的增长？其次是技术的角度。如果我们的业务想要增加一些动画互动，是不是一定要请一位动画领域的专家？如果不是，我们团队的前端应该如何学习？学习的成本高不高？Oasis 团队如果真正想要给社区带来点什么有别于其它引擎的社区价值，我想应该是要让更多的人接触 Web 动画，通过各种手段填补 Web 动画基础教育的空白，比如出一个能把 Web 动画的基础开发知识和概念的教学，然后结合 Oasis 的工具，和教学互相配合，最终降低 Web 动画开发的门槛。最后，让每个后来需要学 Web 动画的人首先就会想到 Oasis 的教学（即使他最后没有选择用 Oasis 的 toolchain），又或者让中小团队也能做支付宝里面一样的动画。这样 Oasis 应该才算成功吧。如果你看 Nike 的广告，他们从来不会说自己的跑鞋里技术有多么的先进，他们要传达的都是运动的形象，让更多的人跑起来。再举个实际的例子，我曾经看过一本叫 Refactoring UI 的书，里面讲了很多程序员未必知道但知道了之后会在审美上有很大改进的一些设计常识和技巧。看到最后，我惊奇地发现，这本书的作者，同时是 TailwindCSS 的开发者，在 Refactoring UI 掌握的设计技巧，可以用 TailwindCSS 发挥得淋漓尽致。同时也可以听听 Steve Jobs 是怎么理解 Marketing 的：以上内容，都是我个人的见解，并没有在教人做事的想法，权当是和 @鹅叔同学的又一次晚饭瞎聊吧。我们总是在吃饭的时候聊一些形而上的东西，唯独没有聊过 Oasis, 哈哈。编辑于 2021-02-04 22:51赞同 1207 条评论分享收藏喜欢收起胡松Stay humble. 关注作为 Oasis 核心开发者来回答一下。关于历史可以查看：特点Web 优先支付宝大量互动都是基于 HTML5 技术体系的，蚂蚁森林，庄园等应用，以及双十一、双十二和五福等大促。能够支撑支付宝端内的各式各样的业务是我们的首要任务。2. 稳定支撑双十一和五福等项目，在大量的中低端和各种奇怪机型上跑 Web3D，稳定性是我们最看重的一点，包含功能的稳定性和内存的稳定性。后面我们也会逐渐把单测补全。3. 性能这个我们做过和 three.js 的对比，目前来看是占优的。后续的性能也是我们团队的重中之重，希望能够把更多图形效果带到 HTML5 里来。4. 结合前端工程体系npm 工作流，纯 TypeScript 编写（也有计划变成 strict 模式），云端编辑器（暂未开放）。不足功能不全，缺少物理、GUI、后处理等。还有部分功能未到完善，动画、渲染管线(Forward+ 实现)、材质的多 Pass、阴影等。FAQ1. 为什么开源Oasis 目前 api 趋于稳定，也自我感觉项目质量过得去，希望能为社区贡献一点微小的力量，让 Web3D 技术越来越好。同样也希望社区能帮助我们一起把 Oasis 做得更好。2. 如何保证项目的长期维护？这点阿里名声似乎不大好，很多项目 KPI 完成之后就陷入无人维护的状态。这点我想大家可以放心，从 R3 到 Oasis，已经内部维护 3 ~ 4 年了。只要业务存在 3D 的诉求，我们肯定会坚持维护下去。随着技术本身的发展，目前 3D 的需求只会更多，不会更少。3. 和 Babylon 和 Cocos Creator 的对比和 Babylon 比，我们认为基于组件的开发模式对于 3D 业务来说更加友好。虽然 Babylon 的 behaviors 也类似于组件，但总有种生搬硬套的感觉。而且 Babylon 的 api 个人认为是不太友好的，包括资源加载，动画播放等等。和 Cocos Creator 对比，他们的编辑器做得还是比较好用的。目前 Cocos 重点应该是放在 Native 以及小游戏平台上，整套开发也是一个闭环。而我们目前更倾向于在 Web 生态里发展，去打通前端的工程体系。Cocos 目标是游戏，而我们目前是互动。我自己参加 GGJ 使用的也是 Cocos，他们的编辑器做得很不错，也是我们的一个发展方向。目前 Cocos 的 3D 也是处于起步的一个状态，也希望他们能把这块建设得更好，占据 3D 游戏开发的引擎的一席之地。最后欢迎大家来给个 star/pr/issue 参与到社区里来：也欢迎对以上技术感兴趣的私信我，加入到蚂蚁金服。建设一个没有 996，没有强制加班，也拒绝 PUA 的团队。相关链接：编辑于 2021-02-04 14:01赞同 8231 条评论分享收藏喜欢

五福背后的 Web 3D 引擎 Oasis Engine 正式开源-阿里云开发者社区

产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云售前咨询 95187-1 在线服务售后咨询 4008013260 在线服务其他服务我要建议我要投诉更多联系方式备案控制台开发者社区首页探索云世界探索云世界云上快速入门，热门云上应用快速查找了解更多问产品动手实践考认证TIANCHI大赛活动广场活动广场丰富的线上&线下活动，深入探索云世界任务中心做任务，得社区积分和周边高校计划让每位学生受益于普惠算力训练营资深技术专家手把手带教话题畅聊无限，分享你的技术见解开发者评测最真实的开发者用云体验乘风者计划让创作激发创新阿里云MVP遇见技术追梦人直播技术交流，直击现场下载下载海量开发者使用工具、手册，免费下载镜像站极速、全面、稳定、安全的开源镜像技术资料开发手册、白皮书、案例集等实战精华插件为开发者定制的Chrome浏览器插件探索云世界新手上云云上应用构建云上数据管理云上探索人工智能云计算弹性计算无影存储网络倚天云原生容器serverless中间件微服务可观测消息队列数据库关系型数据库NoSQL数据库数据仓库数据管理工具PolarDB开源向量数据库热门Modelscope模型即服务弹性计算云原生数据库物联网云效DevOps龙蜥操作系统平头哥钉钉开放平台大数据大数据计算实时数仓Hologres实时计算FlinkE-MapReduceDataWorksElasticsearch机器学习平台PAI智能搜索推荐人工智能机器学习平台PAI视觉智能开放平台智能语音交互自然语言处理多模态模型pythonsdk通用模型开发与运维云效DevOps钉钉宜搭支持服务镜像站码上公益

开发者社区

阿里巴巴终端技术

文章

正文

五福背后的 Web 3D 引擎 Oasis Engine 正式开源

2021-02-24

6107

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《

阿里云开发者社区用户服务协议》和

《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写

侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

Oasis 从开源走向新的起点，用 3D 化的交互和表达让世界变得更美好。

作者 | Oasis 团队

相信大家已经体验了今年支付宝五福的活动，无论是今年的五福首页还是打年兽游戏都是由蚂蚁互动图形引擎（代号：Oasis Engine）驱动的。

Oasis Engine 是蚂蚁集团 Web 3D 互动图形引擎，同时也是阿里巴巴互动技术方向的首选 Web 3D 引擎，已于 2 月 1 日正式开源。感兴趣的同学可以关注我们的 Github 社区：https://github.com/oasis-engine/engine 和加入钉钉开发者交流群：31360432。

无论你是渲染方向、TA 方向、IDE 方向、还是更细分的领域，只要你和我们一样有共同的理想和目标，欢迎与我们交流 chenmo.gl@antgroup.com

这篇文章会和大家介绍 Oasis Engine 的一些概况和 Oasis Engine 的前世今生以及未来展望。希望通过这篇文章可以让大家对 Oasis Engine 有一个初步了解。

引擎介绍

Oasis Engine 是引擎一款以 Web 为先，移动为先的互动/创作平台。使用组件系统架构，并且追求易用和轻量。Oasis Engine 主要包含 Oasis Runtime、Oasis Editor 和 Oasis Store 三部分。接下来我们会通过概述、功能介绍、稳定性和性能几个维度来给大家介绍引擎。

概述

Oasis Engine 采用组件系统架构，Oasis Engine 不仅需要具备三维渲染能力，还需要包含了非常多来自各领域的功能，比如 2D、3D、UI、音频、物理、VR/AR、逻辑编写等等，这些功能都是开发者的刚需。同时开发者在使用上也通常希望引擎的结构可以保持清晰，功能可以灵活组合。

除此之外，通常业务开发还希望进行功能沉淀，其实这些都是属于易用性的范畴。在如此功能复杂度和易用性的权衡下，我们选择了组件系统架构。在组件系统架构下，万物皆组件，任何功能都可以以组件的形式插拔，灵活组合。同时脚本也是一种特殊的组件，开发者也可以很自然的把业务功能沉淀为组件复用。

Oasis 引擎采用脚本系统进行逻辑编写。我们提供了非常多的脚本生命周期回调，开发者只需重载需要的回调函数即可。

从易用性和可读性来说，脚本相对通过事件编写逻辑都具有明显的优势。尤其在组件系统架构中，脚本系统是更自然的一种方式。包括我们在做引擎架构时也从不会认为任何一种架构有绝对的对错，更多的是权衡和适合的探讨。同时，我们在脚本系统也做了很多体验上的优化，比如提供了克隆装饰器，开发者可以根据属性的实际情况选择不同的克隆装饰器设置克隆模式，相对于手动编写克隆函数更加的易用。

Oasis 引擎的开发语言采用了 TypeScript ，TypeScript 是 JavaScript 的强类型超集，相比弱类型的 JavaScript 具有非常大的优势。尤其对于大型复杂项目，TypeScript 带来了研发效率提升非常明显。相信近几年很多前端开发者已经有所体会。我们也推荐开发者使用 TypeScript 编写逻辑脚本。

Oasis 引擎在 API 的设计上追求严谨性、简洁性、易用性等宗旨，听起来很笼统，但是这背后却是无数的设计细节堆积起来的。从体感的维度来讲，清爽、自然、易用、符合开发者直觉的 API 设计就是好设计。我们在 API 设计上还利用了大量现代化的语法特性，比如函数重载、装饰器、async/await、泛型等，这些语法对于 API 的设计非常重要，会直接提升用户的研发体验。

功能介绍

Transform 是引擎的高频使用功能，无论是渲染还是物理都需要 Transform 描述坐标等相关信息。所以一个优秀的 Transform 不仅要功能强大，还有具备良好的性能优化。

Transfrom 最显著的一个特点就是父变换会影响子变换，比如我们能想到修改父节点的局部位置会触发自身和子节点的世界位置变化。但是，实际情况可能远比这复杂，如果修改父节点的局部旋转，不仅会触发自身和子节点的世界旋转变化，还会触发自身和子节点的世界位置变化。同样修改局部缩放也有类似的效应。我们在 Transform 内部做了很多原子化的脏标记，基本原则就是不 get 属性不计算，如果 get 了属性也会根据脏标记判断是否要重新计算。

基于 WebGL 开发的引擎通常面临 JS 没有析构函数的困扰。引擎的显存对象并不在 JS 的托管范围之内，如果不进行处理就会造成显存泄漏。于是，Oasis 引擎提供了资源的手动释放函数，可以直接调用对象的销毁函数进行显存释放。但是实际问题更加复杂，当设计给开发同学一个模型时，我们并不知道这个模型对资源的引用关系。比如实体引用了材质，材质又引用了纹理，他们之间的引用关系错综复杂。首先，我们很难找到这些资源；其次，找到了也很难确保其没有被别的模型引用并进行安全销毁。

资源系统是引擎的基础能力，包含资源的加载和管理等职责。Oasis 引擎的资源系统加载 API 非常的简单易用，并且支持泛型、和异步编程。我们做了资源引用计数，开发者只需要关心实体节点的销毁即可，引擎内部会自动维护引用计数，调用 resourceManager.gc() 时，所有引用计数为 0 的资产会自动销毁，从而在功能性和易用性直接找到了平衡。

着色/材质系统是引擎的渲染心脏，其好坏一定程度上决定了引擎的健康发展。Oasis 引擎自定义着色器非常的简单，让开发者专注于着色器逻辑本身。着色器的数据设置也非常简单，只需调用 shaderData 中的相关接口即可。有过相关开发经验的同学可能还知道着色器宏功能，在 Oasis 中同样非常简单，只需调用 enableMacro 接口即可。引用内部会自动处理相关的子着色器编译。

除了简单，Oasis 的整个着色系统还非常强大，Oasis 还是一个面向 GPU 友好的引擎，不仅可以通过材质设置着色数据，还可以通过场景、渲染器、相机等对象设置着色数据。另外，还可以非常自然地把蒙皮计算、粒子轨迹计算、材质着色等模块放入 GPU 中执行，充分发挥 GPU 的并行运算能力。

除了自定义着色器之外，Oasis 引擎还提供了灵活强大的 BufferGeometry 系统，开发者可以使用该系统自定义几何体数据。BufferGeometry 系统支持交错顶点缓冲、独立顶点缓冲、instance 缓冲和索引缓冲，做过底层图形开发的同学可能会非常熟悉这些功能。Oasis 的 BufferGeometry 系统几乎包含了所有 GPU 相关的几何体数据处理能力。引擎包含简单易用的功能是必须的，如果能同时兼顾灵活和强大那自然是极好的。

我们来说说 BufferGeometry 具体可以做什么，其实高级开发者可以使用它接入任何自定义粒子、拖尾之类的功能。比如 Mars 组件和 Spine 组件就是采用 BufferGeometry 系统接入的。Mars 也是蚂蚁集团的一款高性能动画和特效软件，Spine 想必大家都很了解了，一款非常流行的 2D 动画软件。

稳定性和性能

稳定性和性能对引擎来说非常的重要，我们在稳定性和性能方面付出了非常多的努力，在亿级流量的平台项目上 crash 率小于万分之 0.3 ：

测试方面，我们在编写每个功能的同时都会增加对应的单测案例，在 github 也部署了自动化 CI 测试。

性能优化方面，我们也付出了非常多的努力，比如组件驱动的相关优化、Transform 优化、显存上传优化、数学库优化等等。

内存优化方面，我们提供了 GPU 纹理压缩功能，可以让纹理显存降低约80% ，同时还提供了良好的资源 GC 管理机制。在每一个系统设计上，我们都会综合考虑性能和内存的平衡点，不会极端盲目的使用“空间换时间”。

再来说说我们目前的性能现状，基于上图中的性能测试案例，和国外知名 Web3D 引擎也进行了性能对比，同样的测试规模和环境，Oasis 的性能大约是国外知名 Web3D 引擎的 2 倍。虽然这个案例并不是很全面，但至少是某几块功能的综合性能表现。

总结

最后，我们对引擎介绍进行一下总结，Oasis 引擎采用组件系统架构、逻辑编写采用脚本系统、引擎源码使用 TypeScript 编写。功能上，我们介绍了引擎的几个基础系统，分别是 Transform 系统、资源系统、材质/着色系统和 BufferGeometry 系统，相信后续还会有机会和大家进行更多的功能介绍；稳定性和性能方面，具备金融级稳定性和领先的性能。

前世今生

接下来，我们介绍一下 Oasis 引擎的前世今生，套用王小波的“时代三部曲”，将 Oasis 引擎发展至今分为三个阶段：黑铁时代、青铜时代和白银时代。

黑铁时代

第一阶段是“黑铁时代”（2016年-2018年）。2016年，阿里巴巴和蚂蚁的移动端业务蓬勃发展，但是面向互动需求的图形技术还比较落后，以 Web 3D 引擎为例，长时间内都依赖并不是为移动端而生的 Three.js 引擎。在资产标准方面，glTF 2.0 还没有诞生，obj + mtl 这种古老的格式还不支持 PBR 等高级材质的能力，虽然 fbx 设计师导出方便，但因为其体积过大和 Three.js 的加载器不稳定导致很多项目在美术资产进引擎阶段就流产。

2016年底，蚂蚁图形引擎史上第一位英雄出现，景夫（蚂蚁高级图形技术专家、仙剑三主程、R3 核心开发者）写下了第一行蚂蚁图形引擎的代码，这个项目被命名成 R3（意为 Render for 3D）。R3 为蚂蚁移动端的互动业务而生，采用行业里先进的组件系统游戏引擎架构，工程上为了追求运行时体积的最小化，使用流行的 monorepo 多包单仓库的开发模式。为了更方便地解决场景编辑问题，R3 也定义了一套自己的开发工作流，采用行业里领先的 Unity 编辑器作为场景编辑器，通过自研的 Unity 插件导出 glTF 文件，供运行时加载解析成场景。

黑铁时代留下了几个经典的作品，今天打开蚂蚁庄园的“运动会”面板，依旧能看到这这些 low ploygon 风格的游戏。“星星球”是第一个使用 R3 引擎的互动游戏，甚至当时还开发了 AR 版本，比较先锋。

青铜时代

第二阶段是“青铜时代”（2018年-2020年）。蚂蚁图形引擎从体验技术部移交到了业务场景更加丰富的 RichLab 团队，从 R3 升级为 Oasis，新团队开始重新思考图形引擎之于蚂蚁互动业务和前端工程师的意义。在移动支付和金融数字化的背景下，移动端业务大量的富交互场景需求开始涌现，而对于稳定性的要求非常苛刻。为了更快更好地解决业务诉求，我们一方面开始拥抱前端生态：

用 Typescript 重构引擎，使引擎的代码更加健壮，同时开发者可以获得更好的代码提示体验；

融入蚂蚁前端开发框架，让引擎能够自然地运行在 React 等框架中，并且拥有资产沉淀能力；

和客户端以及小程序容器的同学合作适配了支付宝小程序，让引擎能够在更多的环境中运行。

另一方面，我们把重心放到了 3D 研发提效上。通过自研的 Oasis Editor 云端场景编辑器，我们实现了资产管理、场景编辑器、脚本编写等核心能力。同时，我们也关心工作流上下游的衔接问题，比如美术资产的导入问题，我们建议使用 fbx 文件作为输入，然后通过云端的资产转换和压缩等能力处理成适合运行时加载的文件；又比如，我们提供不同产物导出的能力，有 React/Rax/小程序等，实现一处开发多处部署。

白银时代

第三个时代是“白银时代”（2020年-?）。蚂蚁图形引擎史上的第二位英雄出现，尘沫的加入就如普罗米修斯神话为 Oasis 引擎的重生带来了火焰。经过八个月的四次迭代，引擎的功能、性能和易用性都发生了质的变化：

功能方面，引擎的实体/组件系统、脚本系统、资源系统、材质/Shader 系统等基础系统能力达到了行业先进水平；

易用性方面，对引擎的核心系统进行了重新设计和思考，API 细节上完全抛弃了之前组件用对象传参的模式，通过 set/get 属性来控制，充分利用 Typescript 语言的特性，让开发者充分享受到“猜测 API”的爽快感；

性能方面，引擎的综合性能增强到了青铜时代的四倍，其中 BufferGeometry 系统、材质/Shader 系统的单项性能均达到了之前版本的十倍以上，大幅领先国外知名 Web 3D 引擎。

除了在技术上的不断升级，Oasis 团队也非常重视业务落地，我们服务了阿里巴巴和蚂蚁集团内众多事业部的项目，在各个业务方中获得良好的口碑，在各个客户端中也验证了引擎的兼容性和稳定性。

未来展望

白银时代也是一个开源的时代，事实上 Oasis 引擎的研发迭代早在青铜时代就进入内部开源，按照开源的工作模式通过里程碑和 issue 管理功能迭代。如今引擎虽然在基础功能上已经能够满足业务需求，但未来我们希望把引擎放在一个更大的舞台，通过开源的方式把引擎的能力进一步增强。比如物理引擎方面，目前我们正在通过 WebAssembly 的方式将其集成到引擎中。在引擎的完整性方面，我们首先会补充 2D 图形的能力，同时让引擎能够渲染更多互动中所需的精灵类型，比如 Spine 和 Lottie；更远的目标是实现引擎的跨平台，虽然目前仅支持 WebGL 1.0 和 2.0，但可以看到引擎的 API 如 WebCanvas 等都已经是跨平台引擎的接口设计了，未来会根据需求优先级实现 Metal/Vulkan/WebGPU 等新型图形语言接口的接入。

坦白来说， Oasis 还处于发展期，今天开源也只是 Oasis 新的起点，未来还有很长的路要走。希望 Oasis 引擎可以用自己的方式为国产 3D 引擎事业尽一份力，也希望 Oasis 团队可以不忘初心，我们将用 3D 化的交互和表达让世界变得更美好，实现我们心中的绿洲。

蚂蚁互动图形引擎 Oasis Engine v0.8 发布 - 知乎

蚂蚁互动图形引擎 Oasis Engine v0.8 发布 - 知乎首发于Galacean 渲染引擎技术专栏切换模式写文章登录/注册蚂蚁互动图形引擎 Oasis Engine v0.8 发布蚂蚁 RichLab 前端团队一个充满专业匠心、自由有爱气质的团队历经数月，蚂蚁互动图形引擎 Oasis Engine v0.8 正式发布，本次里程碑除了原本的 Engine 仓库外，为了 Oasis 生态更健康的发展，还为大家带来了包含一定业务向且具备通用性功能的工具包（ Engine Toolkit ）仓库。Engine 物理方面增加了角色控制器，可以大幅减少角色类互动业务的开发成本，同时还引入了物理关节，可以快速完成弹簧、铰链等物理仿真效果。精灵方面增加了 slice（九宫）绘制模式。文字方面通过内部机制的优化大幅减少了内存占用，并提升了一定性能。在交互方面增加了 Pointer Button 功能，交互功能也逐步趋于完善。Engine Toolkit 仓库除包含原有 Engine 仓库的相机控制器、GPU 拾取和性能数据统计功能外，本次里程碑还新增了辅助线框绘制、平面阴影材质、蒙皮骨骼预览、Gizmo、后处理外描边、线条绘制等功能，这些功能通常可以开箱即用，也非常欢迎开发者贡献该仓库。另外 Oasis Editor 的部分核心功能未来也由 Engine toolkit 提供支持，相信很多内行的同学已经看出本次里程碑新增的功能均为编辑器所需的核心功能。Engine仓库地址：https://github.com/oasis-engine/engine0.8 里程碑完整日志：https://github.com/oasis-engine/engine/releases/tag/v0.8.0-beta.5物理更新新增角色控制器新版引擎支持了角色控制器组件，角色控制器支持胶囊体或盒子形状。通过角色控制器可以为角色提供更多基于物理的反馈，配合 Animator 动画能力可以轻松实现障碍物翻阅，爬坡运动等功能。详情参考角色控制器组件。新增基础物理关节另外还新增了固定关节，铰链关节和弹性关节，通过关节可以更加容易的控制动态碰撞器的运动约束，让物理仿真型互动效果更丰富，实现更简单。详情请参考基础物理约束组件。2D 更新文字文字系统底层大重构，文字的纹理基于单个字符进行缓存，对于大量文字渲染，性能和内存均得到大幅提升，以官网示例文字弹幕为例，性能提升 20%，如下左为重构前，右为重构后：内存方面，基于字符缓存可以使内部字符纹理得到最大程度的复用，重构后文字弹幕示例内存至少节省了 50%，内存对比如下左为重构前，右为重构后（空画布内存 33.6 M）：精灵精灵部分进行了大量重构，主要迎来两个更新：首先是渲染器可选择绘制模式 Simple 与 Sliced ，Simple 为默认模式对应 0.7 版本中的绘制，Sliced 则为新增的九宫绘制，与之配套的是开发者可以设置 Sprite 的 Border 达到自己期望的拉伸效果。同时，我们将控制渲染尺寸的属性放在了 SpriteRenderer 中，开发者可以通过 width 和 height 来设置。交互更新InputManager 新增三项能力，已经解除对 H5 原生事件的依赖：支持滚轮，开发者可以在脚本系统中直接获取本帧滚轮改变的差值。获取触控按键状态，开发者可通过isPointerHeldDown，isPointerDown 与 isPointerUp 获取全局的触控按键状态，获取触控光标位置，开发者可通过 pointerPosition 与 pointerMovingDelta 获取光标此刻在屏幕空间中本帧的位置与位移。动画更新BlendShape 动画在 webgl1.0 模式下能力得到增强，之前版本 webgl 1.0 模式下的 BlendShape 动画最大支持数量有一定限制，超过数量限制则在运行时中永远无法播放。新版本采用动态策略解决最大数量限制，运行时根据动画的权重比，动态播放权重影响较大的几个 BlendShape 动画，提升了 webgl1.0 降级模式下的动画效果和易用性。其他相机支持 Color、Depth、Stencil 原子化清除能力，可以更灵活的控制渲染混合效果。Shader.getMacroByName 增加变量宏缓存能力，ShaderData 增加 getMacros() 获取当前宏集合方法。数学类（Vector3、Vector4、Color 等）增加 copyFrom() 方法，支持和 Object 对象进行数据交互。Renderer 增加 priority属性，增强渲染排序能力，解决深度相同对象渲染冲突问题。Sprite 的 pivot 和 reigion 调整至左下角。增加组件依赖装饰器 dependentCompoments ，配置组件依赖关系更简单。Engine Toolkit 仓库地址：https://github.com/oasis-engine/engine-toolkit0.8 里程碑完整日志：https://github.com/oasis-engine/engine-toolkit/releases/tag/v0.8.0-beta.1辅助线绘制三维空间中很多无形对象都需要可视化辅助调试，比如物理碰撞器、相机、光等。尤其是物理组件的调试一直是用户很大的痛点，此前的调试要么需要依赖 NVIDIA PhysX Visual Debugger，要么只能靠猜来判断碰撞器的位置。这个里程碑新增的 @oasis-engine-toolkit/auxiliary-lines 良好的解决了该问题。骨骼查看器我们在查看附带骨骼动画的模型时，不能一目了然的概览其骨骼情况，是令人非常头痛的问题。该特性可以帮助开发者快速预览模型骨骼概况，并根据骨骼权重展示不同长短以及大小，也支持颜色、粗细等配置。Gizmo 新增 Gizmo 组件，可通过可视化的方式的进行物体拖拽、旋转、缩放，Gizmo 是三维可视化交互工具的核心功能之一。描边无论是在编辑器还是互动业务中，我们经常有高亮选中某个模型的诉求，Outline 采用全屏后处理的模式，可高亮显示模型以及子节点的外轮廓，并支持调整颜色和粗细。平面阴影增加平面阴影材质，平面阴影材质虽然有一定局限性，需要地面不能有明显凹凸，但在符合规范的场景下，其具备更好的性能，该效果通常在特定业务中被广泛使用。画线使用 WebGL 绘制宽度大于 1 的线一直是难点，新增的 Lines 工具可以渲染实线虚线，并且支持自定义线宽、lineCap 和 lineJoin 等功能，也是业务中很常见的需求，例如开发者可以将该功能用于制作地图导航线。控制器基于 InputManager 重构的 OrbitControl 和 OrthoControl 减少了70%代码，同时支持键盘和鼠标的自定义快捷键。文档更新文档更新内容安装 Oasis更新引擎 0.8 包体结构初始化画布更新画布尺寸检查与画布尺寸更新时需要同步的操作加载 3D 模型补充支持的模型类型第一个游戏优化 2D 项目屏幕适配逻辑引擎优化标题层级补充引擎状态接口描述场景补全增删改查描述实体与组件补全增删改查描述变换补充变化的一些基本概念相机优化结构补充相机朝向，剔除与多相机相关内容材质优化内容结构，细化渲染状态与队列纹理增加 UV 坐标，纹理格式等相关内容。纹理压缩增加压缩纹理格式支持示例精灵与精灵渲染器更新渲染模式更新 region 与 pivot 示意图更新 SpriteRenderer 在三维空间的位姿示意动画控制器增加示例代码与动画控制器内的层级描述物理增加物理不同包的指标对比增加物理追帧的描述增加为 MeshRenderer 添加包围盒的示例示例更新角色控制器、物理约束、碰撞器辅助线、文字弹幕、九宫格、骨骼显示器、描边工具、画线、平面阴影0.9 里程碑预告接下来会把更多的关注点放到用户层关注的高级功能，帮助开发者提升渲染效果和开发效率。渲染方面计划增加可支持大型场景渲染的实时阴影，动画方面会支持任意属性编辑，特效方面会增加拖尾效果。小彩蛋编辑器在这个里程碑经过了一次重大设计迭代和代码重构，支持 2D、3D、数字人等三类项目的创建，后续还会扩展更多实用的业务模板，比如 AR、动效等模板。此外，编辑器已支持第三方插件能力，基于插件机制可以快速支撑业务功能。接下去几个月，我们将在内部做进一步的测试和功能完善，期待年底开放与大家见面。如下图所示，我们制作了数字人插件，用来实现捏脸、换装、动画等数字人业务需求。如何进一步了解我们Oasis 开源社区群管理员 (微信)：zengxinxin2010网站官网地址https://oasisengine.cnEngine 源码地址https://github.com/oasis-engine/engineEngine Toolkit 源码地址https://github.com/oasis-engine/engine-toolkit发布于 2022-08-03 15:41图形WebGL赞同 151 条评论分享喜欢收藏申请转载文章被以下专栏收录Galacean 渲染引擎技术专栏Galacean 渲染引擎技

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

国内再添开源图形引擎：蚂蚁 Oasis Engine 实践之路 - 知乎切换模式写文章登录/注册国内再添开源图形引擎：蚂蚁 Oasis Engine 实践之路InfoQ已认证账号采访嘉宾 | 烧鹅编辑 | 闫园园随着互联网技术的发展，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 引擎和编辑器的产品化建设。了解更多软件开发与相关领域知识，点击访问 InfoQ 官网：https://www.infoq.cn/，获取更多精彩内容！发布于 2022-04-20 17:03开源图形开源项目赞同 1添加评论分享喜欢收藏申请

国内再添开源图形引擎：蚂蚁 Oasis Engine 实践之路_大前端_闫园园_InfoQ精选文章

蚂蚁互动图形引擎 Oasis Engine v0.7 发布-阿里云开发者社区

开发者社区

支付宝体验科技

正文

蚂蚁互动图形引擎 Oasis Engine v0.7 发布

2023-05-19

154

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《

阿里云开发者社区用户服务协议》和

《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写

侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

蚂蚁互动图形引擎 Oasis Engine v0.7 发布

码农小达人

蚂蚁互动图形引擎 Oasis Engine v0.8 发布-阿里云开发者社区

开发者社区

支付宝体验科技

正文

蚂蚁互动图形引擎 Oasis Engine v0.8 发布

2023-05-19

157

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《

阿里云开发者社区用户服务协议》和

《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写

侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

蚂蚁互动图形引擎 Oasis Engine v0.8 发布

码农小达人

Follow

tokenpockettokenpocket钱包下载|蚂蚁引擎

tokenpockettokenpocket钱包下载|蚂蚁引擎

BT蚂蚁磁力_btmayi.cc

Oasis Engine 开源一周年：直击大前端互动领域最新探索与实践_开源_闫园园_InfoQ精选文章

五福背后的 Web 3D 引擎 Oasis Engine 正式开源 - 知乎

如何评价蚂蚁开源的3D引擎oasis engine? - 知乎

五福背后的 Web 3D 引擎 Oasis Engine 正式开源-阿里云开发者社区

蚂蚁互动图形引擎 Oasis Engine v0.8 发布 - 知乎

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

国内再添开源图形引擎：蚂蚁 Oasis Engine 实践之路_大前端_闫园园_InfoQ精选文章

蚂蚁互动图形引擎 Oasis Engine v0.7 发布-阿里云开发者社区

蚂蚁互动图形引擎 Oasis Engine v0.8 发布-阿里云开发者社区

最近的新闻

您可能喜欢的文章

tokenpocketapp官方下载链接安装|未来30天天气预报查询

tp正版下载|中国基金网官网

TP钱包币是否会被封？

TP钱包钓鱼平台如何追回/guanjianci

如何避免TP钱包授权风险？

TP钱包提HT - 支持HT提现的TP钱包教程

TP钱包如何查看前10个地址