前端如何快速实现 3D 虚拟形象？

原创桐伦支付宝体验科技

🙋🏻‍♀️ 编着按：本文是互动图形引擎 Oasis 核心开发桐伦在支付宝体验科技沙龙暨数金荟上的演讲内容，主要分享了基于实时渲染技术的虚拟人技术，欢迎享用～

大家好，欢迎来到支付宝体验科技沙龙，我是来自蚂蚁集团 RichLab 互动科技团队 Oasis 的桐伦。今天我带来的题目是《前端如何快速实现 3D 虚拟形象》。

虚拟形象是最近非常火热的一个话题，无论是元宇宙还是 Web3.0 都会牵扯到虚拟人相关的话题和技术。从比较早的初音到现在比较火的超写实虚拟人，大家已经看到了各种各样的虚拟人角色。

今天我们主要讨论的是基于实时渲染技术的虚拟人技术。我们首先了解一下虚拟人相关的技术实现，接着我会介绍一下我们关于低代码虚拟人方案的一些成果和思考，最后我会做一个简要的总结并且谈一谈虚拟人技术接下来的发展趋势。

首先我们来看虚拟形象的整体流程：

首先美术会在建模软件中建模出虚拟人形象，但在这个阶段，前端开发同学就应该介入进去。有两个方面的原因，首先对于美术素材，在移动端渲染有一系列的限制，例如模型三角面需要控制在多少以下等等，这需要根据业务的需要以及适配多少低端机型来控制。

其次，后续会提到换装捏脸等技术，所以在这个阶段就需要和美术约定要命名规范，包括骨骼节点，蒙皮，材质的名称，后续的算法都需要根据名称来处理模型的数据。最后，美术会导出 glTF 文件给到前端同学，前端同学的所有开发工作都是基于 glTF 文件展开。

接下来就是进入到素材编辑的开发工作中，前端需要调用动画，处理换装，捏脸等等的算法和业务逻辑，甚至还需要结合 AI 算法的能力，实现人脸映射和动作捕捉等技术。最后前端开发会封装组件，或者更简单的就是摆放好模型，截图给设计方使用。

实现虚拟形象的步骤和技术原理

所有的技术开发都围绕着 glTF 文件展开，所以先来看看 glTF 文件的组织方式，可以在任意一个 glTF 查看器中导入文件，然后在控制台中就可看到文件的数据组织方式。主要有两个部分组成，骨骼和蒙皮，骨骼类似于人体结构的树形结构，后续的骨骼动画的实质在于变换骨骼节点的姿态，由此驱动蒙皮发生改变。

Oasis 引擎基础能力

Oasis 引擎为开发虚拟人提供了一系列基础的能力，包括形变动画，蒙皮动画和材质渲染，这使得可以通过资源加载器就可以很容易将 glTF 载入，并且拆解为组件和实体的组织方式。

从一到多

如果只是渲染一个模型，那么使用 Oasis 引擎的能力就能够解决渲染和动画控制的问题。但如果在多个业务都要涉及到虚拟人形象，如何降低虚拟人的开发成本就非常重要了。所以我们在此基础上，有开发了一系列功能，以实现材质复用，并且简化素材编辑，同时这些技术都可以和AI端到端的能力结合起来。下面我们就来看看具体的技术细节。

替换换模型

对于类似眼睛，装备等固定形态的模型，我们可以看到在 glTF 结构中有一个 Head 节点，可以把对应的模型放到该节点下，这些模型就会根据头部的位置，出现在脸上。所以美术建模时，只需要以头部节点为原点制作模型即可。

替换面部贴图

对于类似胡子，腮红等没有形状的部件，可以通过直接修改贴图的方式进行渲染。在右图中，大图是面部的完整贴图，只需要将胡子的贴图渲染到红色的区域上，将得到的新的贴图作为脸部贴图进行渲染就可以了。只需要和美术约定好小贴图的尺寸和位置，然后做合成工作就可以。

替换蒙皮

蒙皮替换的操作和替换模型是类似的。但需要特别指出，蒙皮是受到多个骨骼节点影响的网格，因此，一般来说美术制作时，蒙皮和骨骼是平行摆放，而不是放在某个骨骼节点下。但只要约定号对应的名字，开发只需要按照名字搜索这些节点就可以了。

替换骨骼动画·骨骼映射技术

上面介绍了一系列可以替换的资产，我们再来看骨骼动画的替换。如果直接将骨骼动画放在各种各样体型的人体上，由于骨骼动画包含了平移和缩放的信息，会使得所有人物都会被拉伸或者压缩到统一尺度上。因此，需要借助骨骼映射技术，将旋转的数据映射过来，放弃掉平移和缩放的信息，这样一来无论是胖子还是瘦子，高个还是矮个，都可以应用动画。

逆向动力学

上述技术我们实现了各种素材的复用，但是当把一个角色放到真实的环境当中时会带来额外的问题。例如一个跳舞的角色放在一个舞台上，舞台有一个地面，如果没有适配好，会有悬空跳舞的感觉。这时候使用逆向动力学就可以根据末端位置（脚，手，头），计算关联的骨骼关节的姿态，由此自动适配地面，或者实现关注某一点的能力。

逆向动力学的技术比较复杂，主要有两种方式，首先对于简单的情况，例如图中的例子，脚，膝盖的节点比较少，解析法很容易进行求解。但对于有多个骨骼需要计算的情况，则需要使用例如FBIK等迭代法来处理。

穿模问题

当我们实现了各种资产的复用和替换后，随之而来的问题是穿模，例如图中的初音，头发的运动和身体的舞蹈是两个动画，因此，头发很容易穿越手臂。这时候可以使用 Oasis 通过 WebAssembly 技术编译得到的 PhysX.js，利用物理碰撞组件进行碰撞检测的处理。进一步还可以利用布料模拟的工具 Nvcloth.js，对布料做更进一步的碰撞检测和控制。

AI 端到端的能力

近年来 AI 的技术更多应用到了虚拟人当中，例如 TTS 从文字生成语音，同时驱动角色的骨骼和顶点动画。或者类似动作捕捉驱动虚拟人作出各种行为。这里我对这些技术细节不做更多介绍，只强调一点。即例如动作捕捉，用户的体型又高又瘦，如果直接将动作捕捉得到的数据应用到虚拟人上，就会出现之前提到过的扭曲问题。因此，此时最好是通过骨骼映射，将部分动作的数据转移过来，以此保持了整个产品体验的效果。

低代码实现虚拟形象开发

上面讲了很多的技术，大家可能要问了，这和标题中的“快速”背道而驰啊，实在是太复杂了。所以我们还探索了低代码方案。以上所有的技术都被我们封装到了方舟 SDK 当中，并且 SDK 为编辑器的方舟插件提供了支持。

美术可以直接上传资产，然后进行捏脸和场景搭建，材质调教，动画编排等等操作。然后导出前端组件，前端就免去了相关的工作，专注在业务逻辑的实现上。这里需要特别强调的是关于动画编排。其实虚拟人往往会涉及到多个动作的串联，什么时候，怎样的情况下触发什么动作，会有一个比较复杂的逻辑。

通过代码可以使用 Oasis 提供的 Animator 动画控制器组件，但这样并不直观，在编辑器中，我们特别设计了动画编排的页面，可以通过添加动画 layer，以及条件脚本，实现复杂的动画编排逻辑。

未来关键技术展望

这次沙龙主要围绕虚拟人相关技术做了介绍，我们围绕这些技术，搭建了蚂蚁虚拟形象的整体架构。

随着元宇宙，Web3.0 等概念的发展，对虚拟人技术会提出更高的要求。但是降低虚拟人生产成本是一个核心的话题，因此，技术上还需要探索动画，渲染，物理引擎等各种技术，综合地解决相关的问题。同时，虚拟人结合 AR，VR 也是当下的一个趋势，将虚拟人放到真实的环境中，和用户产生更多的连接，会是未来一个非常重要的场景。

最后，明年年初我们的 Oasis 编辑器和方舟组件都会对外开源，感兴趣的小伙伴可以加入我们的钉钉社区，也可以扫码添加微信管理员微信，加入我们的微信群。感谢各位的关注，我们下次再会。

有点意思，那就点个关注呗 💁🏼‍♀️

👇 点击「阅读原文」，在评论区与我们互动噢

继续滑动看下一个