Hi，我是彩云。之前在工作中做了一個(gè) AR 翅膀的特效，設(shè)計(jì)過程并不復(fù)雜，但基本上該有的設(shè)計(jì)流程一樣不少，是一個(gè)很適合分享給大家的絕佳案例。大家有興趣的話，也可以自己跟著教程做一個(gè)試試。

先介紹下這個(gè)玩法，這個(gè) 3D 翅膀可以實(shí)時(shí) AR“長在”用戶身上，可以給大家?guī)砗苄缕娴捏w驗(yàn)，大家也可以在 QQ 相機(jī)和小世界中實(shí)際玩這個(gè)特效。

在 QQ 相機(jī)和小世界的相機(jī)拍攝中，特效的位置

下面的視頻是最終的效果

上線的數(shù)據(jù)很不錯(cuò)，得到了用戶的認(rèn)可。在做這個(gè)玩法的過程中積累了一些經(jīng)驗(yàn)，是總結(jié)也是分享。

（悄悄告訴大家，學(xué)會(huì)了類似這種特效制作，成為特效師還能自己投稿賺錢哦，收入很可觀！所以今天這篇文章一定要收藏，并認(rèn)真看，指不定還可以指望這個(gè)賺錢養(yǎng)活自己呢。強(qiáng)調(diào)下，這不是廣告，只是告訴大家一種可能性，設(shè)計(jì)師尤其有優(yōu)勢(shì)?。?/p>

好了，話不多說，下面仔細(xì)講講這個(gè)玩法是怎么一步一步做出來的。

做需求前，一定要先理清設(shè)計(jì)思路，想清楚了，執(zhí)行才會(huì)效率。這個(gè)特效的設(shè)計(jì)思路，我把它大致分為 9 個(gè)步驟：

1. 需求背景及目標(biāo)
2. 參考搜集，明確風(fēng)格方向
3. 基礎(chǔ)模型設(shè)計(jì)，確定最終造型
4. 雕刻模型，增加模型細(xì)節(jié)
5. 打磨材質(zhì)，貼圖設(shè)計(jì)和烘焙
6. 骨骼綁定和動(dòng)畫設(shè)計(jì)
7. 在工具中還原效果，增加物理隨動(dòng)
8. 設(shè)計(jì) 2D 氛圍元素，打包上線
9. 結(jié)果與反思

需求背景及目標(biāo)

要做好一個(gè)實(shí)際的設(shè)計(jì)需求，了解用戶的屬性和喜好很關(guān)鍵。在我們的產(chǎn)品生態(tài)中，女性用戶偏多，翅膀的訴求一直都有。競(jìng)品已經(jīng)有做過類似的玩法，但效果比較一般，在視覺上還有提升空間。

而我們的產(chǎn)品在當(dāng)時(shí)也沒有全身 AR 的能力，所以也是作為一個(gè)新能力的建設(shè)，未來可以有更多的拓展應(yīng)用?；谶@樣的目標(biāo)，在設(shè)計(jì)上就需要把翅膀的視覺效果做的更好并最終落地。

參考搜集，明確風(fēng)格方向

在相機(jī)特效玩法中，翅膀是一種全身特效玩法，它需要識(shí)別人體邊緣并利用人像分割技術(shù)才能正常生長在人的背上，具體技術(shù)細(xì)節(jié)就不多說了，AR 特效落地是需要通過一個(gè)工具來實(shí)現(xiàn)的，后面會(huì)講到。

設(shè)計(jì)師在這里面的發(fā)揮點(diǎn)是設(shè)計(jì)出漂亮的翅膀，這給了我不少發(fā)揮空間。開始設(shè)計(jì)前，我會(huì)從翅膀的風(fēng)格上做一些提案。通常我在這個(gè)步驟會(huì)去找大量的參考，篩選出一些風(fēng)格圖做成情緒版，便于溝通。

對(duì)于翅膀的設(shè)計(jì)思路，我首先想到的就是游戲中的翅膀效果，因?yàn)橛螒蛑械哪Ｐ蛥⒖紤?yīng)該是最多的，然后我會(huì)從玩過的游戲中找靈感。所以，我也建議大家，平時(shí)可以多體驗(yàn)不同的產(chǎn)品，留心觀察，說不定未來做一些項(xiàng)目的時(shí)候就能用的到這些“存貨”了。我之前也寫過一篇文章《如何從優(yōu)秀作品中偷師，用一個(gè)游戲案例教你思路》，大家感興趣的話也可以去看看。

除了從游戲中搜集靈感外，我還習(xí)慣用 pinterest 來找圖，我喜歡用這個(gè)工具來找參考是因?yàn)樗袀€(gè)最厲害的地方——以圖搜圖，在搜圖的過程中不斷逼近自己想要的結(jié)果，對(duì)于找靈感來說，簡(jiǎn)直是神器。

這組參考發(fā)出來后，大家比較傾向方向 4。原因可能是因?yàn)槭且Y(jié)合真實(shí)用戶的 AR 效果，放一堆游戲的圖讓產(chǎn)品很難想象最終的效果。

雖然對(duì)我來說是比較清晰的，但比較難達(dá)成一致。從方向 4 中收斂出新的關(guān)鍵詞組合：透明，炫彩反射。以此達(dá)成新的共識(shí)，初步明確了質(zhì)感效果，接下來就可以進(jìn)行進(jìn)一步的細(xì)化。

然后根據(jù)新的關(guān)鍵詞，迭代參考，進(jìn)一步確定造型并將質(zhì)感可視化。待和需求方達(dá)成共識(shí)后再動(dòng)手做，是減少返工的正確方式。下面就是按收斂后的關(guān)鍵詞迭代的新的情緒板，這樣要做什么就能更清晰了。

在找參考這里有幾個(gè)經(jīng)驗(yàn)教訓(xùn)分享給大家：

1. 參考越接近最終效果，越利于溝通，因?yàn)槠渌撕茈y猜測(cè)到你腦子中的想法
2. 平時(shí)多體驗(yàn)產(chǎn)品，在找參考階段才越容易發(fā)散思維
3. 每個(gè)方向要盡快的拉開區(qū)分度，這樣方便團(tuán)隊(duì)決策

基礎(chǔ)模型設(shè)計(jì)，確定大致造型

根據(jù)確定的方向，大概花了幾個(gè)小時(shí)我就做了一個(gè)初步的模型效果，思路是想通過玻璃材質(zhì)+貼圖紋理的方式實(shí)現(xiàn)效果，所以沒有對(duì)模型做太多結(jié)構(gòu)。

但在渲染的時(shí)候會(huì)發(fā)現(xiàn)，由于模型表面沒做結(jié)果，缺少起伏，雖然用到了法線貼圖，但反射細(xì)節(jié)幾乎沒有，效果很差。所以馬上換了個(gè)思路，還是不能偷懶啊，模型該有的細(xì)節(jié)還是要雕刻做出來才行。

另外，這個(gè)模型也有一些結(jié)構(gòu)性的問題，比如翅膀這種向上勾的方式有些違背自然規(guī)律，向下垂墜會(huì)顯得更加自然一些。

模型雕刻，增加細(xì)節(jié)

為了把模型的細(xì)節(jié)做的更加豐富，我用 ZBrush 進(jìn)行細(xì)節(jié)雕刻。關(guān)鍵點(diǎn)是把所有可能會(huì)有的模型細(xì)節(jié)都雕刻出來，這樣在烘焙法線的時(shí)候才能讓模型有細(xì)節(jié)可以看。除了雕刻好翅膀表層的結(jié)構(gòu)方便烘焙，也對(duì)翅膀邊緣做了更多曲線化設(shè)計(jì)，增加細(xì)節(jié)。

雕刻的時(shí)候也嘗試了 2 個(gè)不同的結(jié)構(gòu)，最終選定了方案 2，大家覺得更加流線型的翅膀會(huì)更好看一些。

在 zb 中進(jìn)行雕刻

模型設(shè)計(jì)中有幾個(gè)小的經(jīng)驗(yàn)：

1. 想要模型最終視覺效果好，細(xì)節(jié)一定要足夠多，比如這里的紋路，模型表面的起伏，邊緣的曲線都可以有盡量多的細(xì)節(jié)變化。好的模型設(shè)計(jì)，白模就會(huì)比較耐看。

2. 為了方便后面烘焙貼圖時(shí)，細(xì)節(jié)豐富可控，雕刻的時(shí)候可以把細(xì)節(jié)的起伏關(guān)系交代的更加明確，也就是做的更夸張一些，這樣在烘焙時(shí)效果損失會(huì)相對(duì)較少。

3. 模型雕刻的時(shí)候可以適當(dāng)在 ZBrush 中把細(xì)分等級(jí)拉高，更容易雕刻細(xì)節(jié)。而在做模型平滑時(shí)，再把細(xì)分等級(jí)拉低，方便快速平滑。多說一句，C4D 中雖然也能雕刻，但功能跟 ZBrush 根本不能比，建議大家也可以嘗試下。

材質(zhì)設(shè)計(jì)，貼圖烘焙

分析下這個(gè)翅膀最終的效果，材質(zhì)上需要用到顏色貼圖+法線貼圖+炫彩玻璃材質(zhì)。

顏色貼圖在 SP 中畫下就行，操作上跟 PS 很類似，用手繪板稍微畫下就 OK。法線貼圖比較簡(jiǎn)單，因?yàn)橛辛饲懊娴窨痰母吣?，通過 Substance Painter 烘焙就可以得到了。

烘焙的過程也比較簡(jiǎn)單，先把低模導(dǎo)入到 SP 中，選擇烘焙這個(gè)功能，并選擇 ZBrush 雕刻的高模進(jìn)行烘焙導(dǎo)出貼圖即可。這里要注意的是，高模和低模的 mesh 命名，低模是 low_xxx，高模是 high_xxx，模型的格式都是.FBX。

由于玻璃材質(zhì)效果需要實(shí)現(xiàn)實(shí)時(shí)渲染，沒法通過貼圖來實(shí)現(xiàn)，最終是要靠引擎能力，所以在這里用 3D 軟件渲染只能作為參考。

對(duì)于玻璃材質(zhì)的表現(xiàn)，主要還是依賴于 hdr 貼圖，一張顏色豐富的 HDR 貼圖對(duì)于玻璃材質(zhì)的渲染最為關(guān)鍵。

有了這個(gè)靜態(tài)渲染效果后，接下來就需要在引擎中進(jìn)行還原，這個(gè)就要靠技術(shù)美術(shù)同學(xué)配合寫 shader 才能做出來。其實(shí)這個(gè)過程也就類似于做 UI 時(shí)，前端開發(fā)需要去把設(shè)計(jì)稿還原出來一樣了。

骨骼綁定和動(dòng)畫設(shè)計(jì)

確定了模型效果后，接下來就需要對(duì)模型進(jìn)行綁定和動(dòng)畫了。由于蝴蝶的翅膀動(dòng)畫一般是相對(duì)較硬的，所以按照常規(guī)的非實(shí)時(shí)渲染流程只加了 2 根骨骼。但這樣有個(gè)問題是在引擎中加物理效果時(shí)，隨動(dòng)效果很硬，很難給用戶感知到翅膀的隨動(dòng)感。

這里解釋下，引擎中的物理效果是基于鏈?zhǔn)焦趋拦?jié)點(diǎn)來進(jìn)行動(dòng)畫的，可以想象成你甩動(dòng)一條鐵鏈那種感覺，鐵鏈的節(jié)點(diǎn)數(shù)越少，甩動(dòng)肯定就越硬，隨動(dòng)效果也就越不明顯。所以，為了能讓用戶對(duì)隨動(dòng)有比較強(qiáng)的感知，就需要增加骨骼節(jié)點(diǎn)數(shù)，增強(qiáng)隨動(dòng)效果。

動(dòng)畫搞定后，還需要給開發(fā)渲染一個(gè) demo 動(dòng)畫作為后期調(diào)整的參考

增加 2D 氛圍元素

做完 3D 部分，整體的玩法還是比較干，所以還需要增加一些 2D 的氛圍。這些動(dòng)畫都是通過 pag 來實(shí)現(xiàn)的。

效果實(shí)現(xiàn)

最后想把玩法實(shí)現(xiàn)落地，我們需要用到特效工具 Tencenteffect，大家也可以到這個(gè) https://effect.qq.com 網(wǎng)站上下載這個(gè)軟件 。

在這個(gè)軟件中就可以配置好這個(gè)特效玩法了，具體怎么做，下載這個(gè)軟件后里面會(huì)有一些基礎(chǔ)教程。

在工具中的效果，可以邊做邊實(shí)時(shí)預(yù)覽

下面就是最終在引擎中優(yōu)化后，用戶拍攝的真實(shí)效果，一個(gè)相機(jī)濾鏡效果就做出來了，大家可以在 QQ 小世界中玩玩。

結(jié)果及反思

一開始做這個(gè)玩法的時(shí)候，更多的是想作為新能力的探索嘗試，因?yàn)橛X得這個(gè)全身玩法對(duì)用戶來說，拍攝成本比較高。但最后卻發(fā)現(xiàn)這個(gè)玩法的數(shù)據(jù)非常不錯(cuò)，用戶很喜歡，成了爆款。

我自己也去調(diào)研了用戶的拍攝情況，從用戶拍攝的結(jié)果上看，你永遠(yuǎn)不知道你的用戶會(huì)如何使用這些效果，各種千奇百怪的拍法都有，感嘆用戶的創(chuàng)造力太強(qiáng)了。

所以，如果從設(shè)計(jì)角度總結(jié)經(jīng)驗(yàn)，可以大致判斷一些傾向，比如新奇好看能打動(dòng)她們，基于這樣的判斷后面也把這里用到的炫彩材質(zhì)復(fù)用到其他玩法中，提升探索的邊際價(jià)值。

總結(jié)

在做 3d 模型的時(shí)候，一定要注意找到合適的參考。可以是細(xì)致的原畫稿，可以是正確的結(jié)構(gòu)圖等等。參考找的好，更容易把東西做好。

參考圖細(xì)節(jié)越豐富，結(jié)構(gòu)表達(dá)的越清晰，才能更好的把握模型結(jié)構(gòu)，最終的渲染花的成本也會(huì)更低。如果模型結(jié)構(gòu)都沒啥細(xì)節(jié)，后期花的時(shí)間會(huì)更多，而且還很難出效果。

模型想要做的好，最關(guān)鍵就是在于造型，造型好看白模就會(huì)比較好看，燈光和材質(zhì)是加分。比如像光叔的這些模型，白模就已經(jīng)無敵了。光叔的個(gè)人網(wǎng)站， https://zhelongxu.com/大家可以圍觀下 ，3D 領(lǐng)域的天花板，很榮幸光叔還是我的學(xué)長，向他學(xué)習(xí)。

光叔做的模型-白模

最后

好了，以上就是彩云在實(shí)際工作中做的一個(gè)爆款玩法設(shè)計(jì)的全過程，希望你有從中學(xué)到有價(jià)值的內(nèi)容，別忘了點(diǎn)贊轉(zhuǎn)發(fā)支持彩云。

歡迎關(guān)注作者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」