騰訊高手出品！8 個步驟復盤爆款「AR翅膀特效」的設計過程

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

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

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

下面的視頻是最終的效果

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

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

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

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

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

需求背景及目標

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

而我們的產(chǎn)品在當時也沒有全身 AR 的能力，所以也是作為一個新能力的建設，未來可以有更多的拓展應用。基于這樣的目標，在設計上就需要把翅膀的視覺效果做的更好并最終落地。

參考搜集，明確風格方向

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

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

對于翅膀的設計思路，我首先想到的就是游戲中的翅膀效果，因為游戲中的模型參考應該是最多的，然后我會從玩過的游戲中找靈感。所以，我也建議大家，平時可以多體驗不同的產(chǎn)品，留心觀察，說不定未來做一些項目的時候就能用的到這些“存貨”了。我之前也寫過一篇文章《如何從優(yōu)秀作品中偷師，用一個游戲案例教你思路》，大家感興趣的話也可以去看看。

除了從游戲中搜集靈感外，我還習慣用 pinterest 來找圖，我喜歡用這個工具來找參考是因為它有個最厲害的地方——以圖搜圖，在搜圖的過程中不斷逼近自己想要的結(jié)果，對于找靈感來說，簡直是神器。

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

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

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

在找參考這里有幾個經(jīng)驗教訓分享給大家：

1. 參考越接近最終效果，越利于溝通，因為其他人很難猜測到你腦子中的想法
2. 平時多體驗產(chǎn)品，在找參考階段才越容易發(fā)散思維
3. 每個方向要盡快的拉開區(qū)分度，這樣方便團隊決策

基礎模型設計，確定大致造型

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

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

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

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

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

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

在 zb 中進行雕刻

模型設計中有幾個小的經(jīng)驗：

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

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

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

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

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

顏色貼圖在 SP 中畫下就行，操作上跟 PS 很類似，用手繪板稍微畫下就 OK。法線貼圖比較簡單，因為有了前面雕刻的高模，通過 Substance Painter 烘焙就可以得到了。

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

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

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

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

骨骼綁定和動畫設計

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

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

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

增加 2D 氛圍元素

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

效果實現(xiàn)

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

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

在工具中的效果，可以邊做邊實時預覽

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

結(jié)果及反思

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

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

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

總結(jié)

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

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

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

光叔做的模型-白模

最后

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

歡迎關注作者的微信公眾號：「彩云譯設計」