3D 真的很难吗，瞧瞧支付宝怎么作？

阿里妹导读：图像做为人类感知世界的视觉基础，是咱们在这个信息化时代获取信息、表达信息及传递信息的重要手段，而生成图像最高效准确的方式就是由计算机生成、显示、绘制，这些技术又统称计算机图形技术。计算机图形技术已是许多产业的技术基础，好比动画、影视特效、游戏、设计、广告、AR、VR、数据可视化等等。为了更贴近人类真实感觉，提高感官体验，这些产业会优先选择 3D 图像来呈现。今天，咱们就来了解支付宝的3D图像技术。

近些年来计算机图形技术一直是国内外重点研究的方向，它自己是一个很深的领域，不管是学术深度研究，仍是内容工业化产出探索，须要解决的难题都很是之多。其中游戏、电影等领域在这方面已经发展得比较成熟，但 Web 端的计算机图形技术才刚刚起步。

蚂蚁金服从来十分重视交互体验，所以这一块也是咱们的重点研究方向，尤为是 Web 端的计算机图形技术。最初，咱们只是简单应用计算机图形技术服务咱们的产品，后来逐步参与到这个领域的探索之中，在基础能力建设、工具平台、工做流和落地场景方面，造成了一整套解决方案。

接下来，想把咱们在探索过程当中遇到的问题及相应的解法，拿出来跟你们分享一下，欢迎探讨交流。

首先，咱们先简单了解一些前置知识。

实时图形渲染

实际上，3D 图像的渲染分为离线渲染和实时渲染。

离线渲染注重的是图像的真实感，对计算量和计算时间要求并不苛刻，可能须要计算机运算数小时甚至数天才能渲染出一帧图像，一般运用在动画电影、广告插画这种对质量要求较高的领域。

而实时渲染则对计算时间很是严格。在人机交互场景下，随着用户的操做控制，屏幕须要实时刷新，绘制流畅的动画反馈给用户。这就要求计算机在短期内渲染出一幅图像并即时显示出来，紧接着开始准备下一幅图像。实时渲染仅仅依靠 CPU 的计算能力是难以完成的，还须要借助 GPU 的并行计算能力。实时渲染主要运用于人机交互场景、以及根据不一样数据展现不一样图像的渲染场景，好比游戏、数据可视化、AR、VR 等。

在互联网领域，咱们接触的大多数场景都属于实时渲染的范畴。虽然目前实时渲染在渲染效果上作了些阉割，可是咱们相信，随着各项技术的发展，实时渲染效果会愈来愈逼真，之前只能经过离线渲染才能达到的效果未来也能实时渲染出来，将来的虚拟现实及加强现实定会一次又一次地震撼咱们的眼球。

Web 端 3D 图像渲染

高效绘制 3D 图像，必须依赖控制硬件能力和图形绘制接口。为了让浏览器也具有高效绘制 3D 图像的能力，2011 年 WebGL 工做组发布了 WebGL 规范，并很快在各浏览器上落地。有了 WebGL 后，就能够在 Web 端作出炫丽的 3D 效果，利用 Web 的跨终端、跨客户端和灵活动态的特性，用户无需下载 3D 应用客户端，便可低成本获取及按需加载 3D 内容，同时，它还能低成本与支付宝等超级 APP 中的产品内容相结合，充分利用其流量优点。

Web 端的特性加上 3D 渲染，使得许多用户场景都发生了改变，好比：

1. 淘宝商品展现区域，能够向用户展现更直观的 3D 商品模型，使用户全方位浏览商品。
2. 3D 装修设计这种一次性需求，无需再花时间下载一个专业软件，打开浏览器也可得到全景体验。
3. 在 Web 端制做的 3D 小游戏，几乎无需下载时间，便可让用户低成本尝试、无阻碍传播，更容易匹配到目标用户。
4. 浏览器中的地图能够用 3D 方式呈现，模型按需加载，动态渲染。

还有不少 Web 端的 3D 应用场景，这里暂不一一列举了。

有些场景听似不复杂，可是，想直接利用 WebGL 完成可并不简单。 WebGL 自己只提供最基础的图形绘制 API, 你须要充分了解 WebGL 的内部细节，学习如何经过着色器语言进行 GPU 编程、用复杂数学知识解决空间关系和光影效果计算等问题。

因此，咱们但愿基于 WebGL 封装出一个对应用开发者友好的引擎，提供大量经常使用 API, 简化整个 3D 工程的建设过程。因而 Oasis 3D 应运而生。

Oasis 3D

Oasis 3D（绿洲引擎，如下简称 Oasis 3D）是咱们蚂蚁金服自研的一款轻量化的 3D 引擎，它提供丰富的功能组件，支持复杂的 3D 图形渲染，开发者毋需学习复杂的图形学知识，利用 Oasis 3D 便能轻松建立出复杂的 3D 场景，大大下降了 3D 场景的制做难度，想更深刻了解，内网访问oasis 3D官网：https://oasis3d.alipay.com。

在 Web 端 3D 引擎领域， Oasis 3D 具有如下特色：

1.微内核架构。Oasis 3D 内核提供了基础的渲染能力，但并不局限于此，你能够针对不一样场景对 Oasis 3D 扩展为不一样引擎，如游戏引擎、动画引擎、数据可视化渲染引擎、AR 场景 3D 渲染引擎等。Oasis 3D 吸收了 Unix 思想，它每个模块都遵循了「do one thing, and do it well」的理念，在领域内完成了复杂且内聚的功能集合，只对外暴露最易懂简单的接口，组合起强大复杂的总体，又不影响总体功能的可维护性。目前， Oasis 3D 在蚂蚁金服体系内主要应用于互动游戏及互动大屏上，为了支撑这些场景， Oasis 3D 封装了经常使用的图形功能模块，基本支撑了咱们平常的应用开发：

• SceneGraph 场景结构。图形应用中常见的复杂场景，场景之间的空间关系，均可以经过 SceneGraph 管理；
• 3D 渲染基础功能：光源、网格、几何体、材质系统、相机；
• 渲染加强功能：阴影、后处理系统、场景雾化；
• 外部模型支持 glTF 2.0 以及配套 PBR 材质；
• 丰富多样的动画系统：骨骼动画、插值动画、粒子动画系统；
• 一系列强大的功能组件沉淀：碰撞检测、HUD 平行显示、射线投射、帧缓冲拾取、有限状态机、数学库等等；

2.基于组件开发。基于组件开发（CBD）和传统的面向对象编程（OOP）均可用于扩展一个类的功能，可是在设计思路上有很是大的不一样。传统的面向对象编程（OOP）中，会设计一个基类，在须要扩展特性的时候，以继承基类的方式产生派生类。这种方法很是直观，可是在须要扩展的特性渐多的时候，会有很大的问题。

例如，有一个动物基类 Animal, 若是有一类动物会飞，就得生成扩展类 FlyAnimal；若是有一类动物会游泳，就得生成扩展类 SwimAnimal。可是，若是有一类动物同时会飞会游泳呢？首先，你是没有办法同时继承 FlyAnimal 和 SwimAnimal 的，由于这两个类有共同的基类；其次，若是咱们基于 Animal 扩展生成 FlySwimAnimal 类，就必须将 FlyAnimal 和 SwimAnimal 的代码重写一遍，至关于相似的代码咱们写了两遍。

基于组件开发（CBD)，在功能扩展方面就不存在上述问题。如上面的例子，有一个动物基类 Animal, 若是要扩展飞行的能力，能够实现组件 FlyComponent; 若是要扩展游泳的能力，能够实现组件 SwimComponent. 而使用的时候，只要将所需组件添加到 Animal 中。若是有一类动物同时会飞和游泳，只需给这类动物同时添加 FlyComponent 和 SwimComponent 组件，便可达到扩展效果。

如下两图是面向对象编程（OOP）与基于组件开发（CBD）程序在结构上的对比：

不难看出，在 3D应用中，基于组件开发（CBD）比面向对象编程（OOP）更适合作功能扩展，结构简单清晰。同时，也极大地避免了继承形成的代码耦合。这就很是适合可视化开发。

3.移动端友好。Oasis 3D 自己很轻量，能够作到按需加载，在移动端网速被限制状况也能加载显示。针对移动端浏览器， Oasis 3D 还作了一系列优化，造成了一些最佳实践方案。

经历了蚂蚁金服千万级业务的洗礼，Oasis 3D 在移动端适配了上千种机型，作到了稳定且可信赖。

综上，采用了更适合 Web 端 3D 引擎模式和思想的 Oasis 3D ，为移动端环境作了更多的考虑，相对于市面上其余引擎颇具优点。

项目历程

蚂蚁金服近年来一直在探索 3D 项目的落地， Oasis 3D 经历了一个个项目的磨练，不断迭代优化，总结实践经验，逐步造成了一个高效的 3D 工做流。

2017 年 Oasis 3D 问世之际，就接连承接了蚂蚁庄园-星星球游戏（当年我也玩！）、网商银行两周年粒子阵列特效、花呗双十一特效、借呗呗壳鲸鱼特效等等项目。

2018 年， Oasis 3D 用心作好的一件事情就是优化 API、发布新版本，创建官网并在阿里集团内推广。咱们还深刻探索了移动端的项目落地，好比惠星球、蚂蚁庄园的小鸡爬山等项目，更多采用了移动端友好的 Low poly 风格进行设计，采用大量烘焙贴图替代复杂的光照和阴影，如此一来，视觉效果及性能均大大优化，用户体验也明显提高。

同时，咱们在可视化大屏项目上也作了尝试，并圆满完成了承接公司业务大屏的重要任务。

Oasis 工做流

虽然 Oasis 3D 为 3D 项目落地首发奇功，但整个研发过程仍是比较艰辛的，过程当中暴露了 Web 端 3D 项目制做的一系列问题：

• 定制化开发过多。尤为是移动端项目，渲染能力受到设备极大限制，在不影响效果的状况下，还要作到流畅运行，因此常常会采用一些定制化的方案解决，用取巧的方式实现。这就要求用户熟练掌握 Oasis 3D 引擎原理，必要时还要作一些定制化开发，总体开发难度高，效率低。
• 上手成本高。前端工程师对计算机图形技术和游戏领域工做流并不熟悉，致使只有少部分工程师能 hold 住 3D 项目。
• 沉淀少，创意难。产品线的设计师大多并不擅长 3D 设计，不知道该如何设计，或者设计出来的方案不必定能落地。设计师须要了解实际运行环境的特色进行模设计，最好是直接根据当前环境支持的效果进行扩展，因为目前能参考的 Web 端 3D 沉淀案例比较少，因此也加大了 3D 项目落地的难度。
• 工做流程繁琐。模型美术作出的模型转换成优质可运行资源的过程比较繁琐，还须要借助 Unity 进行配置后转换，工做流繁重。

这些问题都是 Web 端 3D 项目落地遇到的阻力，这使得这项技术在蚂蚁体系内推广复用也困难重重。

因此，咱们不只要解决引擎层面的问题，更重要的是要让 Web 3D 项目落地变得简单，而且让更多人轻松掌握这项能力。这就倒逼着咱们同时从引擎功能、工具及工做流、平台生态三方面同时建设。

因而咱们基于 Oasis 3D 开发了 3D 内容编辑器——Oasis Editor。

Oasis Editor 是一个在线编辑器，它从新定义了 3D 工程的工做流，经过 Oasis Editor 提供的的工做流，你能够可视化编辑 3D 场景与交互逻辑。包括场景搭建、场景美化、动画编辑、游戏逻辑编辑在内的功能均可以在线完成。

整个 Oasis Editor 具备如下优势：

• 丰富的功能组件。Oasis Editor 支持丰富的资源类型，可经过自定义扩展功能将定制化需求扩展为全新的功能组件。
• 美术资源无缝对接。Oasis Editor 会自动完成大部分 3D 资源的转换及上传工做，彻底省掉 Unity 转换工做。

• 各种动画可视化编辑。Oasis Editor 为工程师或设计师提供了各类动画编辑功能，如插值动画编辑、粒子动画编辑，这让咱们告别了原来在代码中反复调整参数、再给设计师浏览的工做流，设计师能够直接使用编辑器调整参数，参与到项目开发中——把专业的事交给专业的人去作。
• 在线平台生态。Oasis Editor 配套了 3D 内容平台，提供项目迭代管理和资源共享能力。

另外，Oasis Editor 会尽可能覆盖咱们 3D 开发的方方面面。好比，在计算机图形技术中，最专业的部分是利用各类图形算法和可编程着色器接口实现各类特效和仿真效果，应用开发工程师其实很难介入这部分工做。可是不少专业的着色器都是能够复用的，可视化着色器编辑器和着色器内容管理平台也很是重要。后续咱们计划将这部分功能与 Oasis Editor 工程打通，这样不只能够向用户通盘展现咱们所支持的着色器效果，又能够减小不少定制化开发的工做量。

总的来讲，咱们但愿经过 Oasis Editor 简化 3D 开发过程当中那些繁琐且有难度的工做，让开发者对 Oasis 3D 引擎无感知，经过 Oasis 工做流就能完成整个项目的开发，让 3D 开发的能力触手可及。

总结

浏览器为了实现基础通用性，提供给用户的是最基础的绘制接口，用户可以彻底自由地在画布上控制每个片源点的显示，但过度的自由也是把双刃剑——你的想象力和图形学知识体系彻底限制了你能渲染出什么样的做品，而大部分人并不具有这样的专业能力，这就使得目前 Web 端 3D 项目落地变得极其困难。就比如咱们想造一座摩天大楼，但浏览器只提供了最基础的砂石材料——这无疑是天方夜谭。

与建大楼同样，咱们 Web 端 3D 工程必定也是逐渐趋向工业化发展的。 Oasis 体系会将底层专业的事情包揽掉，只提供给用户高效易用的工具以及内容丰富的平台。

咱们一直在努力建设中，很快 Oasis 体系将会面向阿里体系外的用户开放，为全部 Web 端 3D 项目开发者提供服务，敬请期待！

PS：团队正在急招：互动图形技术、前端/全栈开发、前端架构、大数据开发等方向任选，指望层级 P6+～P7，团队技术氛围好，简历能够直接砸邮箱哦：xingdi.cxd@alibaba-inc.com

---

本文做者：文楼

阅读原文

本文来自云栖社区合做伙伴“阿里技术”，如需转载请联系原做者。