项目案例｜3D AR 特效如何在相机中无缝应用-技术圈

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

阿里巴巴设计官方认证 MCN 机构

SUXA 深圳体验设计协会华东分会

全球服务设计共创节城市站发起者

转自：腾讯 ISUX

编辑：李凯悦

共 5521 字，预计阅读 14 分钟

为迎接牛年春节，给大家带来新年的祝福和欢乐，我们围绕关键词 “牛” 设计了一系列针对 QQ 相机业务相关的玩法滤镜，包括 “牛转乾坤”、“牛气冲天”、“牛势已到”、“招财童子吐福字” 等等，以创新的互动能力为 QQ 用户提供新奇的玩法体验和情感表达。

其中，“牛转乾坤” 以 3D 变脸技术为基础，让用户能从普通人脸变成牛脸，酷炫的风格配上节奏感极强的音乐，给用户带来新奇感；“牛气冲天” 则是 以互动游戏的形式，让玩家在游戏中通过收集各种氛围元素不断积攒牛气，获得更高的牛气值和更厉害的称号，享受不断刷分带来的乐趣；“牛势已到” 则 尝试以脸部为驱动，配合脸部表情驱动模型产生变化以及左右摇摆带来的物理随动效果，配合一些春节氛围元素，趣味十足；“招财童子吐祝福” 则 结合了中国传统民俗，以拜年送祝福的形式，福气又添财等等。

项目中攻克了不少问题难点，篇幅有限，本文仅以 “牛势已到” 的设计制作过程，和大家分享下设计背后的故事。抛砖引玉，希望和大家学习交流。

一、问题攻坚，剥开盲区

对我们设计团队来说，这次的玩法设计中涉及到很多以前较少接触的技术领域，比如将 3DMM、Blendshape、AR、多段 3D 动画合并与触发，面部识别等多能力复合应用的体验把握、效果和性能控制，这对我们设计团队来说是一次不小的挑战。

本次的美术制作管线（Art Pipeline）需要结合不同 DCC 工具制作不同阶段的美术资源，然后还要在新版工具完成配置，这与常见的游戏制作流程有很大不同。多能力复合应用不仅带来了新的摸索成本，在技术落地上也带来实际的困难，不少技术黑盒的存在使得在效果还原的过程中不断踩坑。因为标准的不确定性，导致对于模型的面数，比例，贴图，动画长度等等存在很多的未知难点。

二、流程探索，高效落地

虽然存在很多的不确定性，但有挑战才有突破的机会。我们尝试借鉴常见的 3D 游戏制作流程，边推进边调整。

1、玩法设定

因为是基于 QQ 相机的 AR 玩法，所以我们将整体交互设定为以用户的脸为主体，当引擎识别出用户的脸后，可以将引擎中的模型脸与用户的脸相匹配，然后用户可以通过头的摇晃和面部表情驱动模型变化。

2、风格设定

在这个玩法中，由于是以虚拟形象结合玩家的脸部作为游戏主角，所以关于主角的风格设定尤为关键。为找到想要的春节氛围，前期搜集了很多春节相关的参考，主要有 2 个方向。

方案 A 的方向是通用的春节的喜庆元素，关键词：财神、红包、福袋、春节、牛年、Q 萌。

（图片来源于网络）

方案 B 的方向是更加本土和有特色的文化，关键词：国潮、陕北外套、腰鼓、喜庆、牛年头套、春节。

（图片来源于网络）

从关键词和灵感图中，我们创作了 2 个版本的原画概念方案

经过讨论，确定以方案 A 为最终形象设定，原因是方案 A 更加符合用户对春节的期望：化身财神，小孩子的形象也比较有亲切感。因为头部到时候会替换用户的脸，所以这里不需要设计角色的脸部造型。

3、3D模型设计

有了明确的 2D 形象设计后，接下来要做的工作就是把它转化成 3D 模型，最终的模型设计因为要平衡好性能和品质，相比于 2D 设计，3D 设计流程显得复杂很多。这里的关键步骤有以下几点：

3.1 中模设计

先根据原画设定做好中模设计，这一步主要是确认模型的基本造型，便于沟通和调整。这个阶段可以先不考虑小细节，比如衣服褶皱那些可以在高模中雕刻。当然，也可以根据 3D 模型的具体情况在 2D 原画的基础上做一些适当设计发挥。

3.2 雕刻高模

确定中模的结构后，接下来就需要完成高模的设计。有些人可能觉得好奇，最终用到模型资源是低模，那为什么还要做高模呢？其实，高模的作用就是为低模而准备的。通过高模烘焙出法线贴图，AO 贴图，金属度贴图等等纹理贴图，能够让低模也拥有高模的细节，这样做的原因主要是为了降低性能消耗。

精度要求不高的模型在非专业雕刻软件中，比如 C4D 中就能完成雕刻，而精细度更高的高模则需要到专业的雕刻软件，比如 Zbrush 中雕刻会更加方便。雕刻要注意把细节雕刻的足够明显，甚至可以夸张一些，目的是为了在烘焙后能得到更多细节的贴图。这样最终烘焙出来的贴图才能方便调整，比如效果太强可以适当减弱，但如果效果太弱是没法再增加细节的。

3.3 拓扑低模

高模的面数一般会非常多，考虑性能问题，一般来说是不能最终使用的，这个时候还需要对模型进行拓扑，也就是重新布线。拓扑的作用是优化布线，减少面数，而优化好的布线也更方便拆 UV。这里面有 2 个需要注意的地方：

1）保持面片，不通过挤压做出封闭厚度。需要做厚度的地方，用面片弯曲来实现。

2）用点多的高模来做（可以通过加细分来得到更多点的模型），精度更高的模型会更加方便吸附选择，这样最终得到的布线可以更加规则

3.4 拆 UV

这里一般建议用更加专业的拆 UV 工具来做，比如 Uvlayout ，Maya 等，不建议用 C4D 直接拆 UV。我这里由于是在 C4D 中做的模型，所以通过在 C4D 中整理好模型导出 .fbx 文件，导入 Maya 中进行拆分，然后再导出拆分好 UV 的 .fbx 文件来画贴图。注意将单个部件拆分在一个完整区域中，会更方便定位。

3.5 画贴图

把拆分好的 .fbx 导入到 SP，然后在 SP 中进行比较细致的纹理设计。如果对这个软件不熟悉，也可以在 C4D 中简单画一些贴图大概范围，然后在 Ps 里细化贴图。当然，用 SP 的好处就是可以烘焙出非常多的细节贴图，主要用到的贴图包括 Diffuse、Normal、Metallic、Roughness 方便后续使用。

3.6 烘焙

确定好贴图后，通过 SP 可以将各种需要的贴图烘焙出来，用到最终的低模上。烘焙的时候需要注意，低模和高模中的 Mesh 命名要一一对应。烘焙出来的贴图可能有问题，如出现破裂，可以用 PS 的内容识别工具进行修复，主要修复法线贴图上过渡比较锐利的地方。

3.7 确定最终模型效果

贴图制作完成后，可以得到最终的静态渲染效果。

4、骨骼绑定

模型和 UV 确定后，接下来需要进行骨骼绑定和权重分配。因为后续需要在引擎中加上物理随动效果，所以这里的绑定规范会跟常规的 3D 动画绑定要求有所不同，它要求哪里需要产生动画就要将骨骼顶点添加到 Mesh 的末端点，以获得更加精确的模型控制。所以，在实时 3D 内容的设计中，仅靠权重控制不能做到足够灵敏。至于绑定的工具，用自己熟悉的软件即可，比如 C4D，Maya ，Blender 等等。

5、动画设定

在这次的项目中，需要做多达 5 段的动画，其难点在于，这套多段动画会分为循环动画、非循环动画，其中拆分开的循环动画，需要首尾完全相同，并又能准确衔接到下一个动画。这又是与 3D 动画设计不同的地方，对动画节奏提出了更高的要求。

为了提升沟通效率，向开发说明这里的动画逻辑，制作了一张动画时间线图。

最终把动画拆分成 5 段进行输出：

而为了实现这样一套复杂的动画内容，经过了反复的测试，我们使用 Blender 导出最终的多段动画，实现了复杂逻辑控制。这里会选择使用 Blender 输出，主要原因是 Blender 的动画规则更符合引擎的读取需要，效果更加接近引擎中的实际效果，便于测试。

因为需要多 DCC 工具的配合，在不断导入导出的过程中出现了各种疑难杂症。这里面有几个点尤其需要注意：

1）要用正确的 Blender 版本进行动画合成输出，Blender 版本问题会产生各种 bug。这里建议用 Blender 2.8 版本进行动画输出，兼容性更高，导出错误率较低。想要更方便导出 .glb 动画格式，也建议大家尝试用 Maya+Babylon 插件。

其中有个细节需要注意下，Blender2.9 软件操作更加便捷，但输出动画时，skin 值会丢失，导致动画运行不正常，暂时只能通过换到更低的 2.8 版本来解决。

2）在导入 Blender 前，需要在 C4D 中把除了骨骼动画外的所有动画轨道全部删除清理，这样导入 Blender 中的动画轨道才是最干净好处理的。

6、氛围细节

因为画面是以脸部运动为驱动的，所以模型会在整个屏幕产生移动，为了让画面更加合理，即人物不可能是没理由的漂浮在空中，所以给人物增加了站在云上面的设定。

为了强化春节氛围，还增加了元宝和春联的装饰元素。

并结合用户的面部表情触发，设计了触发前后的状态变化给用户带来惊喜，提升可玩性。

7、背景音乐

同时，增加了背景音乐，这里面有个小细节点是结合了人物面部表情对音乐进行卡点。当用户张嘴的时候，音乐也会同步变化，会模仿画面喊出 “财神到！”，带动用户一起互动。也用 C4D+AE 制作了完整的玩法 Demo，便于开发做效果还原。

8、性能问题

做 3D 内容设计相较于做 3D 动画设计，会有更多的技术性的思考，性能就是一个重点。做动画设计时，怎么好看就可以怎么来，但对于实时交互的 3D 效果来说，因为最终是需要在手机 QQ 中上线，需要兼容到各种不同的机型，所以我们对于资源包要求非常苛刻，需要做很多美术效果的平衡。整个的优化思路包括以下几点：

a.当前期做完减面后，依然发现性能不符合要求需要减面时，可以利用 Blender 的减面修改器进行减面。利用这个修改器做减面对模型效果影响比较小，又能快速实现减面能力，非常方便。

b.经过测试发现整体性能消耗上，动画带来的顶点变换产生的性能开销最大，所以要平衡好动画元素。做性能优化时，可以考虑从小动画上入手，去掉一些不太能注意到的小骨骼动画，减少顶点变换量，从而提升性能。

c.优化贴图大小，合并贴图。贴图存储的不单是颜色，还包含了各种信息，例如各种黑白图，能改变粗糙度，金属度等等。所以可以将贴图利用不同通道的方式合并到一张图中，缩小贴图的文件大小。

以最好机型为基础，做出性能允许的最佳资源，以这个标准效果向下兼容，打包出几个性能区段的素材包，包括：

1） 动画+物理随动，高端机型

2） 只有少部分动画，中端机型

3） 没动画，没物理随动，低端机型

9、上线效果

最后，经过复杂的引擎配置流程，材质调整，平衡了一部分效果后最终得以上线，这是最终上线后的效果，可以在 QQ 相机中进行体验。

三、规范梳理，反思沉淀

在这个项目中遇到很多的难题，为了让后续类似玩法能够更好的推进，也对整个项目中需要注意的事项和制作输出规范进行了沉淀，形成了规范文档。

项目上线后，我们也进行了反思，从 3D 动画设计到实时 3D 内容设计需要做一定的思维转换，比如一开始就需要评估清楚玩法和用户使用时的真实场景，不止步与静态渲染。

1）这个玩法主要是应用在用户自拍的过程中，那么用户拍摄的范围多半只能是上半身，想要让用户体验到完整的模型资源，在人物的比例上，可以优化为头身比为 1:1，头套可以比身体稍大一些，会显得更加可爱。

2）拓扑可以做的更加精致一些，在主要部位上的面数可以适当多一些，非重要的元素，面数可以更少，减面也需要差异化处理。

3）当时留的时间比较紧张，没有做太细致得贴图。后续如果继续做好的话，模型上的重点展示区域贴图可以做的更加细致一些，提高品质的同时也提升了效率。

4）实时 3D 内容相比动画，也更注重互动性，比如拍摄比例，张嘴互动、骨骼反馈的灵敏度等等，这些都是与 3D 动画渲染所不同的地方。在落地的过程中，还会有比较多技术项的思考，比如减面优化、适配降级、对接引擎过程中的各种疑难问题解决等等。

四、挑战与机遇，未来可期

对于设计师来说，这次项目挑战不小，同时也收获颇丰。从 0 - 1 的过程中，熟悉了非常多以前不常接触的技术流程，比如模型雕刻、贴图烘焙、骨骼绑定、权重分配、多段动画的合并、多 DCC 工具的配合等等。这些技术点的学习，为后续的项目提供了经验支撑。有挑战才能有进步，跳出自己的舒适区，才能成长的更快。

对于未来，基于多动画，物理随动的玩法能力，也可以应用到更多的创意玩法中，比如与脸部驱动，身体随动之类玩法，都能以这次的项目探索作为经验沉淀而快速复用，值得期待。

最后，想体验文中所说的玩法，可以在 QQ 相机中找到这些滤镜，操作路径是：打开 QQ 聊天窗口 —— 找到相机选择右下角的表情图标 —— 选择最新选项 —— 下滑找到 “牛势已到”，点击即可玩起来。

推荐阅读

华为用户体验设计的体系搭建方法

超 10 亿用户的产品，到底是怎么做用户体验的？

想要引导用户行为转化，理解这 4 个认知心理学理论

让设计圈一片哗然的 Google 新 logo 到底出了什么问题？

如何系统的增强用户粘性，提升产品转化率？

设计新趋势「玻璃拟态」到底是什么？

如何将设计系统快速的从 Sketch 切换到 Figma？

欢迎大家关注三分设，每天分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。