嘉宾|烧鹅编辑|闲园园随着互联网技术的发展，在网页前端也出现了不同的分支，除了传统的网页开发外，前端的图形领域也逐渐独立为重要方向。 目前，前端的图形领域总体上还是个小领域，但从发展势头来看，未来的发展前景值得关注。 然而，进入3D图形世界，除了看到酷炫的效果之外，是一件非常可怕的事情，如果不了解3D渲染的原理，反而容易陷入泥潭。 那么，国内外前沿图形领域的现状如何？ 获得前端图形领域需要做哪些准备？ 带着以上的疑问，InfoQ请了蚂蚁Oasis Engine团队的负责人烤鹅。 Oasis Engine (以下简称Oasis )是驱动支付宝( Alipay )五福、年兽等互动游戏的图形引擎，由蚂蚁集团RichLab互动科技团队自主研发，开源一周年诞生

图形学的现状和发展前景InfoQ :首先请谈谈前端与图形学的关系。 烧鹅：让我们从两个方面谈谈尖端与图形学的关系。 第一，标准方面。 深挖网络图形技术的基础，首先要追溯到国际组织Khronos Group。 Khronos Group专注于创立开放标准、免许可费的移动设备接口程序API，制定了OpenGL标准。 这也是业界最广泛接受的2D/3D图形API。 然后，基于OpenGL的移动端分支标准OpenGL ES，Khronos Group制定了WebGL标准，WebGL标准提供了3D图形的API，可以使用HTML5的Canvas调用相关界面随后，W3C组织制定了WebGPU标准。 与WebGL不同，WebGPU直接驱动Vulkan、Metal、DirectX 12等新生代图形界面，而不是OpenGL软件包，最新版本的Chrome 100默认开启WebGPU功能目前，WebGPU还处于草案阶段，WebGL已经发展到2.0个阶段，这两个标准也是前端实现图形APP的基础API。 第二，领域。 前端图形开发可以说是与传统前端开发平行的领域。 通常，普通的前端开发是基于React、Vue等框架，而前端的图形开发在依赖图形引擎和游戏开发框架开发APP场景这一点上，与游戏开发和传统软件开发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

Oasis未来发展规划InfoQ:OASIS的下一个技术规划是什么？ 烧鹅：第一，我们将继续深入完善引擎本身更多的高级功能，如物理系统、动画等，增加更多的项目案例，进一步降低开发者的成本； 第二，计划年底开放编辑器，制作插件功能； 第三，我们也将进一步加强开源影响力建设，不拘国内，提高国际影响力。 infoq :你认为oasis作为Web 3D交互图形引擎开源的意义是什么？ 构建持久健康的开源项目所需的准备和要素。 烧鹅：首先，Oasis开源的意义在于将引擎应用于更丰富的商业场景，同时通过社区的力量进一步扩大引擎生态。 例如，适应微型计划可能不是我们能做到的，但社区中的开发者会相应地完善； 其次，开源团队不拘泥于开发思维，能够扩展更多的产品、商业思维，对自身的成长也有很大的帮助，最重要的是选择开源也希望引擎为前端的整个图形领域做出贡献很多前端工程师表示Oasis Engine是第一个图形引擎，使用起来很方便。 这也有助于许多对图形学感兴趣的前端工程师加深对这个领域的理解。 当然，真正的开源是可持续和健康的。 要开源，需要做三件事。 第一，不是所谓的代码开源，而是所有的开源，比如工艺计划、问题管理；第二，多接触国外的开发者，而不是停留在国内； 三是继续做好社区感兴趣的APP宣传活动，扩大影响力。 例如，Unity每年都会举行开发者大会，展示引擎的新功能和酷炫可见的效果。 他们在内容制作方面也值得学习。 InfoQ :最后，您是否有任何经验或意见想与想要学习或加入前端图形领域的前端工程师分享？ 烧鹅：随着时代的变化，一些传统的前端工程师不满足于现在的接口开发，他们想拓展自己的技术堆栈，比如图形学的发展方向。 首先，如果前端开发者不满足于控制CSS的盒子模型，想要控制的屏幕上的每个像素，描绘出更有想象力的空间，我认为现在是转向前端图形领域的好时机； 其次，在经验方面，可以先学习图形学的基础课程。 图形学中有高屋建瓮的认知，这很重要。 进而判断自己是否真的感兴趣，如果感兴趣的话就涉足Unity、Oasis等引擎，通过使用引擎，可以掌握常见的图形学中的概念，如灯光和材质等。 另一方面，如果有同学想成为引擎开发工程师，则需要更深入的学习。 引擎中的分支也非常复杂，所以它只是一个狭小的小区域，包括我们现在所做的类似互动。 计算机图形学领域是一个非常庞大的领域，需要深厚的知识储备。 掌握基础知识后，选择感兴趣的领域发展，如渲染、物理、动画等。 Oasis官方网站： https://oasisengine.cn/Github地址： https://github.com/oasis-engine/engine嘉宾介绍：烧鹅(徐干伟)蚂蚁集团Oasis Engine 有关高级前端技术专家软件开发和相关领域的更多信息，请点击InfoQ官方网站https://www.infoq.cn/获取更多精彩内容。