9

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程 - 优设网 - UISDC

 2 years ago
source link: https://www.uisdc.com/ar-wing
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程 收藏

8小时前 推荐： 彩云Sky¹点赞 16 评论区 阅读本文需 12 分钟

Hi，我是彩云。之前在工作中做了一个 AR 翅膀的特效，设计过程并不复杂，但基本上该有的设计流程一样不少，是一个很适合分享给大家的绝佳案例。大家有兴趣的话，也可以自己跟着教程做一个试试。

先介绍下这个玩法，这个 3D 翅膀可以实时 AR“长在”用户身上，可以给大家带来很新奇的体验，大家也可以在 QQ 相机和小世界中实际玩这个特效。

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

在 QQ 相机和小世界的相机拍摄中，特效的位置

下面的视频是最终的效果

上线的数据很不错，得到了用户的认可。在做这个玩法的过程中积累了一些经验，是总结也是分享。

（悄悄告诉大家，学会了类似这种特效制作，成为特效师还能自己投稿赚钱哦，收入很可观！所以今天这篇文章一定要收藏，并认真看，指不定还可以指望这个赚钱养活自己呢。强调下，这不是广告，只是告诉大家一种可能性，设计师尤其有优势！）

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

好了，话不多说，下面仔细讲讲这个玩法是怎么一步一步做出来的。

做需求前，一定要先理清设计思路，想清楚了，执行才会效率。这个特效的设计思路，我把它大致分为 9 个步骤：

  1. 需求背景及目标
  2. 参考搜集，明确风格方向
  3. 基础模型设计，确定最终造型
  4. 雕刻模型，增加模型细节
  5. 打磨材质，贴图设计和烘焙
  6. 骨骼绑定和动画设计
  7. 在工具中还原效果，增加物理随动
  8. 设计 2D 氛围元素，打包上线
  9. 结果与反思

需求背景及目标

要做好一个实际的设计需求，了解用户的属性和喜好很关键。在我们的产品生态中，女性用户偏多，翅膀的诉求一直都有。竞品已经有做过类似的玩法，但效果比较一般，在视觉上还有提升空间。

而我们的产品在当时也没有全身 AR 的能力，所以也是作为一个新能力的建设，未来可以有更多的拓展应用。基于这样的目标，在设计上就需要把翅膀的视觉效果做的更好并最终落地。

参考搜集，明确风格方向

在相机特效玩法中，翅膀是一种全身特效玩法，它需要识别人体边缘并利用人像分割技术才能正常生长在人的背上，具体技术细节就不多说了，AR 特效落地是需要通过一个工具来实现的，后面会讲到。

设计师在这里面的发挥点是设计出漂亮的翅膀，这给了我不少发挥空间。开始设计前，我会从翅膀的风格上做一些提案。通常我在这个步骤会去找大量的参考，筛选出一些风格图做成情绪版，便于沟通。

对于翅膀的设计思路，我首先想到的就是游戏中的翅膀效果，因为游戏中的模型参考应该是最多的，然后我会从玩过的游戏中找灵感。所以，我也建议大家，平时可以多体验不同的产品，留心观察，说不定未来做一些项目的时候就能用的到这些“存货”了。我之前也写过一篇文章《如何从优秀作品中偷师，用一个游戏案例教你思路》，大家感兴趣的话也可以去看看。

除了从游戏中搜集灵感外，我还习惯用 pinterest 来找图，我喜欢用这个工具来找参考是因为它有个最厉害的地方——以图搜图，在搜图的过程中不断逼近自己想要的结果，对于找灵感来说，简直是神器。

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

这组参考发出来后，大家比较倾向方向 4。原因可能是因为是要结合真实用户的 AR 效果，放一堆游戏的图让产品很难想象最终的效果。

虽然对我来说是比较清晰的，但比较难达成一致。从方向 4 中收敛出新的关键词组合：透明，炫彩反射。以此达成新的共识，初步明确了质感效果，接下来就可以进行进一步的细化。

然后根据新的关键词，迭代参考，进一步确定造型并将质感可视化。待和需求方达成共识后再动手做，是减少返工的正确方式。下面就是按收敛后的关键词迭代的新的情绪板，这样要做什么就能更清晰了。

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

在找参考这里有几个经验教训分享给大家：

  1. 参考越接近最终效果，越利于沟通，因为其他人很难猜测到你脑子中的想法
  2. 平时多体验产品，在找参考阶段才越容易发散思维
  3. 每个方向要尽快的拉开区分度，这样方便团队决策

基础模型设计，确定大致造型

根据确定的方向，大概花了几个小时我就做了一个初步的模型效果，思路是想通过玻璃材质+贴图纹理的方式实现效果，所以没有对模型做太多结构。

但在渲染的时候会发现，由于模型表面没做结果，缺少起伏，虽然用到了法线贴图，但反射细节几乎没有，效果很差。所以马上换了个思路，还是不能偷懒啊，模型该有的细节还是要雕刻做出来才行。

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

另外，这个模型也有一些结构性的问题，比如翅膀这种向上勾的方式有些违背自然规律，向下垂坠会显得更加自然一些。

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

模型雕刻，增加细节

为了把模型的细节做的更加丰富，我用 ZBrush 进行细节雕刻。关键点是把所有可能会有的模型细节都雕刻出来，这样在烘焙法线的时候才能让模型有细节可以看。除了雕刻好翅膀表层的结构方便烘焙，也对翅膀边缘做了更多曲线化设计，增加细节。

雕刻的时候也尝试了 2 个不同的结构，最终选定了方案 2，大家觉得更加流线型的翅膀会更好看一些。

在 zb 中进行雕刻

模型设计中有几个小的经验：

1. 想要模型最终视觉效果好，细节一定要足够多，比如这里的纹路，模型表面的起伏，边缘的曲线都可以有尽量多的细节变化。好的模型设计，白模就会比较耐看。

2. 为了方便后面烘焙贴图时，细节丰富可控，雕刻的时候可以把细节的起伏关系交代的更加明确，也就是做的更夸张一些，这样在烘焙时效果损失会相对较少。

3. 模型雕刻的时候可以适当在 ZBrush 中把细分等级拉高，更容易雕刻细节。而在做模型平滑时，再把细分等级拉低，方便快速平滑。多说一句，C4D 中虽然也能雕刻，但功能跟 ZBrush 根本不能比，建议大家也可以尝试下。

材质设计，贴图烘焙

分析下这个翅膀最终的效果，材质上需要用到颜色贴图+法线贴图+炫彩玻璃材质。

颜色贴图在 SP 中画下就行，操作上跟 PS 很类似，用手绘板稍微画下就 OK。法线贴图比较简单，因为有了前面雕刻的高模，通过 Substance Painter 烘焙就可以得到了。

烘焙的过程也比较简单，先把低模导入到 SP 中，选择烘焙这个功能，并选择 ZBrush 雕刻的高模进行烘焙导出贴图即可。这里要注意的是，高模和低模的 mesh 命名，低模是 low_xxx，高模是 high_xxx，模型的格式都是.FBX。

由于玻璃材质效果需要实现实时渲染，没法通过贴图来实现，最终是要靠引擎能力，所以在这里用 3D 软件渲染只能作为参考。

对于玻璃材质的表现，主要还是依赖于 hdr 贴图，一张颜色丰富的 HDR 贴图对于玻璃材质的渲染最为关键。

有了这个静态渲染效果后，接下来就需要在引擎中进行还原，这个就要靠技术美术同学配合写 shader 才能做出来。其实这个过程也就类似于做 UI 时，前端开发需要去把设计稿还原出来一样了。

骨骼绑定和动画设计

确定了模型效果后，接下来就需要对模型进行绑定和动画了。由于蝴蝶的翅膀动画一般是相对较硬的，所以按照常规的非实时渲染流程只加了 2 根骨骼。但这样有个问题是在引擎中加物理效果时，随动效果很硬，很难给用户感知到翅膀的随动感。

这里解释下，引擎中的物理效果是基于链式骨骼节点来进行动画的，可以想象成你甩动一条铁链那种感觉，铁链的节点数越少，甩动肯定就越硬，随动效果也就越不明显。所以，为了能让用户对随动有比较强的感知，就需要增加骨骼节点数，增强随动效果。

动画搞定后，还需要给开发渲染一个 demo 动画作为后期调整的参考

增加 2D 氛围元素

做完 3D 部分，整体的玩法还是比较干，所以还需要增加一些 2D 的氛围。这些动画都是通过 pag 来实现的。

最后想把玩法实现落地，我们需要用到特效工具 Tencenteffect，大家也可以到这个 https://effect.qq.com 网站上下载这个软件 。

在这个软件中就可以配置好这个特效玩法了，具体怎么做，下载这个软件后里面会有一些基础教程。

在工具中的效果，可以边做边实时预览

下面就是最终在引擎中优化后，用户拍摄的真实效果，一个相机滤镜效果就做出来了，大家可以在 QQ 小世界中玩玩。

结果及反思

一开始做这个玩法的时候，更多的是想作为新能力的探索尝试，因为觉得这个全身玩法对用户来说，拍摄成本比较高。但最后却发现这个玩法的数据非常不错，用户很喜欢，成了爆款。

我自己也去调研了用户的拍摄情况，从用户拍摄的结果上看，你永远不知道你的用户会如何使用这些效果，各种千奇百怪的拍法都有，感叹用户的创造力太强了。

所以，如果从设计角度总结经验，可以大致判断一些倾向，比如新奇好看能打动她们，基于这样的判断后面也把这里用到的炫彩材质复用到其他玩法中，提升探索的边际价值。

在做 3d 模型的时候，一定要注意找到合适的参考。可以是细致的原画稿，可以是正确的结构图等等。参考找的好，更容易把东西做好。

参考图细节越丰富，结构表达的越清晰，才能更好的把握模型结构，最终的渲染花的成本也会更低。如果模型结构都没啥细节，后期花的时间会更多，而且还很难出效果。

模型想要做的好，最关键就是在于造型，造型好看白模就会比较好看，灯光和材质是加分。比如像光叔的这些模型，白模就已经无敌了。光叔的个人网站， https://zhelongxu.com/大家可以围观下 ，3D 领域的天花板，很荣幸光叔还是我的学长，向他学习。

光叔做的模型-白模

好了，以上就是彩云在实际工作中做的一个爆款玩法设计的全过程，希望你有从中学到有价值的内容，别忘了点赞转发支持彩云。

欢迎关注作者的微信公众号：「彩云译设计」


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK