3D AR特效如何在相機(jī)中無(wú)縫應(yīng)用

0 評(píng)論 4299 瀏覽 14 收藏 21 分鐘

編輯導(dǎo)語(yǔ):設(shè)計(jì)沒(méi)有思路,3D AR特效不會(huì)應(yīng)用在相機(jī)中?作者分享了自己將3D AR特效應(yīng)用在相機(jī)中的做法,我們一起來(lái)看下。

為迎接牛年春節(jié),給大家?guī)?lái)新年的祝福和歡樂(lè),我們圍繞關(guān)鍵詞“牛”設(shè)計(jì)了一系列針對(duì)QQ相機(jī)業(yè)務(wù)相關(guān)的玩法濾鏡,包括“牛轉(zhuǎn)乾坤”、“牛氣沖天”、“牛勢(shì)已到”、“招財(cái)童子吐福字”等等,以創(chuàng)新的互動(dòng)能力為QQ用戶提供新奇的玩法體驗(yàn)和情感表達(dá)。

其中:

  • “牛轉(zhuǎn)乾坤”以3D變臉技術(shù)為基礎(chǔ),讓用戶能從普通人臉變成牛臉,酷炫的風(fēng)格配上節(jié)奏感極強(qiáng)的音樂(lè),給用戶帶來(lái)新奇感。
  • “牛氣沖天”則是以互動(dòng)游戲的形式,讓玩家在游戲中通過(guò)收集各種氛圍元素不斷積攢牛氣,獲得更高的牛氣值和更厲害的稱(chēng)號(hào),享受不斷刷分帶來(lái)的樂(lè)趣。
  • “牛勢(shì)已到”則嘗試以臉部為驅(qū)動(dòng),配合臉部表情驅(qū)動(dòng)模型產(chǎn)生變化以及左右搖擺帶來(lái)的物理隨動(dòng)效果,配合一些春節(jié)氛圍元素,趣味十足。
  • “招財(cái)童子吐祝?!眲t結(jié)合了中國(guó)傳統(tǒng)民俗,以拜年送祝福的形式,福氣又添財(cái)?shù)鹊取?/li>

項(xiàng)目中攻克了不少問(wèn)題難點(diǎn),篇幅有限,本文僅以“牛勢(shì)已到”的設(shè)計(jì)制作過(guò)程,和大家分享下設(shè)計(jì)背后的故事。拋磚引玉,希望和大家學(xué)習(xí)交流。

一、問(wèn)題攻堅(jiān),剝開(kāi)盲區(qū)

對(duì)我們?cè)O(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō),這次的玩法設(shè)計(jì)中涉及到很多以前較少接觸的技術(shù)領(lǐng)域,比如將3DMM、Blendshape、AR、多段3D動(dòng)畫(huà)合并與觸發(fā),面部識(shí)別等多能力復(fù)合應(yīng)用的體驗(yàn)把握、效果和性能控制,這對(duì)我們?cè)O(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)是一次不小的挑戰(zhàn)。

本次的美術(shù)制作管線(Art Pipeline)需要結(jié)合不同DCC工具制作不同階段的美術(shù)資源,然后還要在新版工具完成配置,這與常見(jiàn)的游戲制作流程有很大不同。

多能力復(fù)合應(yīng)用不僅帶來(lái)了新的摸索成本,在技術(shù)落地上也帶來(lái)實(shí)際的困難,不少技術(shù)黑盒的存在使得在效果還原的過(guò)程中不斷踩坑。

因?yàn)闃?biāo)準(zhǔn)的不確定性,導(dǎo)致對(duì)于模型的面數(shù),比例,貼圖,動(dòng)畫(huà)長(zhǎng)度等等存在很多的未知難點(diǎn)。

二、流程探索,高效落地

雖然存在很多的不確定性,但有挑戰(zhàn)才有突破的機(jī)會(huì)。我們嘗試借鑒常見(jiàn)的3D游戲制作流程,邊推進(jìn)邊調(diào)整。

1. 玩法設(shè)定

因?yàn)槭腔赒Q相機(jī)的AR玩法,所以我們將整體交互設(shè)定為以用戶的臉為主體,當(dāng)引擎識(shí)別出用戶的臉后,可以將引擎中的模型臉與用戶的臉相匹配,然后用戶可以通過(guò)頭的搖晃和面部表情驅(qū)動(dòng)模型變化。

2. 風(fēng)格設(shè)定

在這個(gè)玩法中,由于是以虛擬形象結(jié)合玩家的臉部作為游戲主角,所以關(guān)于主角的風(fēng)格設(shè)定尤為關(guān)鍵。為找到想要的春節(jié)氛圍,前期搜集了很多春節(jié)相關(guān)的參考,主要有2個(gè)方向。

方案A的方向是通用的春節(jié)的喜慶元素,關(guān)鍵詞:財(cái)神、紅包、福袋、春節(jié)、牛年、Q萌。

圖片來(lái)源于網(wǎng)絡(luò)

方案B的方向是更加本土和有特色的文化,關(guān)鍵詞:國(guó)潮、陜北外套、腰鼓、喜慶、牛年頭套、春節(jié)。

圖片來(lái)源于網(wǎng)絡(luò)

從關(guān)鍵詞和靈感圖中,我們創(chuàng)作了2個(gè)版本的原畫(huà)概念方案。

經(jīng)過(guò)討論,確定以方案A為最終形象設(shè)定,原因是方案A更加符合用戶對(duì)春節(jié)的期望:化身財(cái)神,小孩子的形象也比較有親切感。因?yàn)轭^部到時(shí)候會(huì)替換用戶的臉,所以這里不需要設(shè)計(jì)角色的臉部造型。

3. 3D模型設(shè)計(jì)

有了明確的2D形象設(shè)計(jì)后,接下來(lái)要做的工作就是把它轉(zhuǎn)化成3D模型,最終的模型設(shè)計(jì)因?yàn)橐胶夂眯阅芎推焚|(zhì),相比于2D設(shè)計(jì),3D設(shè)計(jì)流程顯得復(fù)雜很多。這里的關(guān)鍵步驟有以下幾點(diǎn):

(1)中模設(shè)計(jì)

先根據(jù)原畫(huà)設(shè)定做好中模設(shè)計(jì),這一步主要是確認(rèn)模型的基本造型,便于溝通和調(diào)整。

這個(gè)階段可以先不考慮小細(xì)節(jié),比如衣服褶皺那些可以在高模中雕刻。當(dāng)然,也可以根據(jù)3D模型的具體情況在2D原畫(huà)的基礎(chǔ)上做一些適當(dāng)設(shè)計(jì)發(fā)揮。

(2)雕刻高模

確定中模的結(jié)構(gòu)后,接下來(lái)就需要完成高模的設(shè)計(jì)。有些人可能覺(jué)得好奇,最終用到模型資源是低模,那為什么還要做高模呢?

其實(shí),高模的作用就是為低模而準(zhǔn)備的。通過(guò)高模烘焙出法線貼圖,AO貼圖,金屬度貼圖等等紋理貼圖,能夠讓低模也擁有高模的細(xì)節(jié),這樣做的原因主要是為了降低性能消耗。

精度要求不高的模型在非專(zhuān)業(yè)雕刻軟件中,比如C4D中就能完成雕刻,而精細(xì)度更高的高模則需要到專(zhuān)業(yè)的雕刻軟件,比如Zbrush中雕刻會(huì)更加方便。

雕刻要注意把細(xì)節(jié)雕刻的足夠明顯,甚至可以夸張一些,目的是為了在烘焙后能得到更多細(xì)節(jié)的貼圖。

這樣最終烘焙出來(lái)的貼圖才能方便調(diào)整,比如效果太強(qiáng)可以適當(dāng)減弱,但如果效果太弱是沒(méi)法再增加細(xì)節(jié)的。

(3)拓?fù)涞湍?/strong>

高模的面數(shù)一般會(huì)非常多,考慮性能問(wèn)題,一般來(lái)說(shuō)是不能最終使用的,這個(gè)時(shí)候還需要對(duì)模型進(jìn)行拓?fù)?,也就是重新布線。

拓?fù)涞淖饔檬莾?yōu)化布線,減少面數(shù),而優(yōu)化好的布線也更方便拆UV。這里面有2個(gè)需要注意的地方:

  • 保持面片,不通過(guò)擠壓做出封閉厚度。需要做厚度的地方,用面片彎曲來(lái)實(shí)現(xiàn)。
  • 用點(diǎn)多的高模來(lái)做(可以通過(guò)加細(xì)分來(lái)得到更多點(diǎn)的模型),精度更高的模型會(huì)更加方便吸附選擇,這樣最終得到的布線可以更加規(guī)則。

(4)拆UV

這里一般建議用更加專(zhuān)業(yè)的拆UV工具來(lái)做,比如Uvlayout ,Maya等,不建議用C4D直接拆UV。

我這里由于是在C4D中做的模型,所以通過(guò)在C4D中整理好模型導(dǎo)出.fbx文件,導(dǎo)入Maya中進(jìn)行拆分,然后再導(dǎo)出拆分好UV的.fbx文件來(lái)畫(huà)貼圖。

注意將單個(gè)部件拆分在一個(gè)完整區(qū)域中,會(huì)更方便定位。

(5)畫(huà)貼圖

把拆分好的.fbx導(dǎo)入到SP,然后在SP中進(jìn)行比較細(xì)致的紋理設(shè)計(jì)。

如果對(duì)這個(gè)軟件不熟悉,也可以在C4D中簡(jiǎn)單畫(huà)一些貼圖大概范圍,然后在Ps里細(xì)化貼圖。

當(dāng)然,用SP的好處就是可以烘焙出非常多的細(xì)節(jié)貼圖,主要用到的貼圖包括Diffuse、Normal、Metallic、Roughness方便后續(xù)使用。

(6)烘焙

確定好貼圖后,通過(guò)SP可以將各種需要的貼圖烘焙出來(lái),用到最終的低模上。烘焙的時(shí)候需要注意,低模和高模中的Mesh命名要一一對(duì)應(yīng)。

烘焙出來(lái)的貼圖可能有問(wèn)題,如出現(xiàn)破裂,可以用Ps的內(nèi)容識(shí)別工具進(jìn)行修復(fù),主要修復(fù)法線貼圖上過(guò)渡比較銳利的地方。

(7)確定最終模型效果

貼圖制作完成后,可以得到最終的靜態(tài)渲染效果。

4. 骨骼綁定

模型和UV確定后,接下來(lái)需要進(jìn)行骨骼綁定和權(quán)重分配。

因?yàn)楹罄m(xù)需要在引擎中加上物理隨動(dòng)效果,所以這里的綁定規(guī)范會(huì)跟常規(guī)的3D動(dòng)畫(huà)綁定要求有所不同,它要求哪里需要產(chǎn)生動(dòng)畫(huà)就要將骨骼頂點(diǎn)添加到Mesh的末端點(diǎn),以獲得更加精確的模型控制。

所以,在實(shí)時(shí)3D內(nèi)容的設(shè)計(jì)中,僅靠權(quán)重控制不能做到足夠靈敏。至于綁定的工具,用自己熟悉的軟件即可,比如C4D,Maya ,Blender等等。

5. 動(dòng)畫(huà)設(shè)定

在這次的項(xiàng)目中,需要做多達(dá)5段的動(dòng)畫(huà),其難點(diǎn)在于,這套多段動(dòng)畫(huà)會(huì)分為循環(huán)動(dòng)畫(huà)、非循環(huán)動(dòng)畫(huà),其中拆分開(kāi)的循環(huán)動(dòng)畫(huà),需要首尾完全相同,并又能準(zhǔn)確銜接到下一個(gè)動(dòng)畫(huà)。

這又是與3D動(dòng)畫(huà)設(shè)計(jì)不同的地方,對(duì)動(dòng)畫(huà)節(jié)奏提出了更高的要求。

為了提升溝通效率,向開(kāi)發(fā)說(shuō)明這里的動(dòng)畫(huà)邏輯,制作了一張動(dòng)畫(huà)時(shí)間線圖。

最終把動(dòng)畫(huà)拆分成5段進(jìn)行輸出:

而為了實(shí)現(xiàn)這樣一套復(fù)雜的動(dòng)畫(huà)內(nèi)容,經(jīng)過(guò)了反復(fù)的測(cè)試,我們使用Blender導(dǎo)出最終的多段動(dòng)畫(huà),實(shí)現(xiàn)了復(fù)雜邏輯控制。

這里會(huì)選擇使用Blender輸出,主要原因是Blender的動(dòng)畫(huà)規(guī)則更符合引擎的讀取需要,效果更加接近引擎中的實(shí)際效果,便于測(cè)試。

因?yàn)樾枰郉CC工具的配合,在不斷導(dǎo)入導(dǎo)出的過(guò)程中出現(xiàn)了各種疑難雜癥。這里面有幾個(gè)點(diǎn)尤其需要注意:

(1) 要用正確的Blender版本進(jìn)行動(dòng)畫(huà)合成輸出,Blender版本問(wèn)題會(huì)產(chǎn)生各種bug。這里建議用Blender 2.8 版本進(jìn)行動(dòng)畫(huà)輸出,兼容性更高,導(dǎo)出錯(cuò)誤率較低。想要更方便導(dǎo)出.glb動(dòng)畫(huà)格式,也建議大家嘗試用Maya+Babylon插件。

其中有個(gè)細(xì)節(jié)需要注意下,Blender2.9軟件操作更加便捷,但輸出動(dòng)畫(huà)時(shí),skin值會(huì)丟失,導(dǎo)致動(dòng)畫(huà)運(yùn)行不正常,暫時(shí)只能通過(guò)換到更低的2.8版本來(lái)解決。

(2)在導(dǎo)入Blender前,需要在C4D中把除了骨骼動(dòng)畫(huà)外的所有動(dòng)畫(huà)軌道全部刪除清理,這樣導(dǎo)入Blender中的動(dòng)畫(huà)軌道才是最干凈好處理的。

6. 氛圍細(xì)節(jié)

因?yàn)楫?huà)面是以臉部運(yùn)動(dòng)為驅(qū)動(dòng)的,所以模型會(huì)在整個(gè)屏幕產(chǎn)生移動(dòng),為了讓畫(huà)面更加合理,即人物不可能是沒(méi)理由的漂浮在空中,所以給人物增加了站在云上面的設(shè)定。

為了強(qiáng)化春節(jié)氛圍,還增加了元寶和春聯(lián)的裝飾元素。

并結(jié)合用戶的面部表情觸發(fā),設(shè)計(jì)了觸發(fā)前后的狀態(tài)變化給用戶帶來(lái)驚喜,提升可玩性。

7. 背景音樂(lè)

同時(shí),增加了背景音樂(lè),這里面有個(gè)小細(xì)節(jié)點(diǎn)是結(jié)合了人物面部表情對(duì)音樂(lè)進(jìn)行卡點(diǎn)。當(dāng)用戶張嘴的時(shí)候,音樂(lè)也會(huì)同步變化,會(huì)模仿畫(huà)面喊出“財(cái)神到!”,帶動(dòng)用戶一起互動(dòng)。

同時(shí)也用C4D+AE制作了完整的玩法Demo,便于開(kāi)發(fā)做效果還原。

8. 性能問(wèn)題

做3D內(nèi)容設(shè)計(jì)相較于做3D動(dòng)畫(huà)設(shè)計(jì),會(huì)有更多的技術(shù)性的思考,性能就是一個(gè)重點(diǎn)。

做動(dòng)畫(huà)設(shè)計(jì)時(shí),怎么好看就可以怎么來(lái),但對(duì)于實(shí)時(shí)交互的3D效果來(lái)說(shuō),因?yàn)樽罱K是需要在手機(jī)QQ中上線,需要兼容到各種不同的機(jī)型,所以我們對(duì)于資源包要求非??量蹋枰龊芏嗝佬g(shù)效果的平衡。

整個(gè)的優(yōu)化思路包括以下幾點(diǎn):

  • 當(dāng)前期做完減面后,依然發(fā)現(xiàn)性能不符合要求需要減面時(shí),可以利用Blender的減面修改器進(jìn)行減面。利用這個(gè)修改器做減面對(duì)模型效果影響比較小,又能快速實(shí)現(xiàn)減面能力,非常方便。
  • 經(jīng)過(guò)測(cè)試發(fā)現(xiàn)整體性能消耗上,動(dòng)畫(huà)帶來(lái)的頂點(diǎn)變換產(chǎn)生的性能開(kāi)銷(xiāo)最大,所以要平衡好動(dòng)畫(huà)元素。做性能優(yōu)化時(shí),可以考慮從小動(dòng)畫(huà)上入手,去掉一些不太能注意到的小骨骼動(dòng)畫(huà),減少頂點(diǎn)變換量,從而提升性能。
  • 優(yōu)化貼圖大小,合并貼圖。貼圖存儲(chǔ)的不單是顏色,還包含了各種信息,例如各種黑白圖,能改變粗糙度,金屬度等等。所以可以將貼圖利用不同通道的方式合并到一張圖中,縮小貼圖的文件大小。

以最好機(jī)型為基礎(chǔ),做出性能允許的最佳資源,以這個(gè)標(biāo)準(zhǔn)效果向下兼容,打包出幾個(gè)性能區(qū)段的素材包,包括:

  • 動(dòng)畫(huà)+物理隨動(dòng),高端機(jī)型
  • 只有少部分動(dòng)畫(huà),中端機(jī)型
  • 沒(méi)動(dòng)畫(huà),沒(méi)物理隨動(dòng),低端機(jī)型

9. 上線效果

最后,經(jīng)過(guò)復(fù)雜的引擎配置流程,材質(zhì)調(diào)整,平衡了一部分效果后最終得以上線,這是最終上線后的效果,可以在QQ相機(jī)中進(jìn)行體驗(yàn)。

三、規(guī)范梳理,反思沉淀

在這個(gè)項(xiàng)目中遇到很多的難題,為了讓后續(xù)類(lèi)似玩法能夠更好的推進(jìn),也對(duì)整個(gè)項(xiàng)目中需要注意的事項(xiàng)和制作輸出規(guī)范進(jìn)行了沉淀,形成了規(guī)范文檔。

項(xiàng)目上線后,我們也進(jìn)行了反思,從3D動(dòng)畫(huà)設(shè)計(jì)到實(shí)時(shí)3D內(nèi)容設(shè)計(jì)需要做一定的思維轉(zhuǎn)換,比如一開(kāi)始就需要評(píng)估清楚玩法和用戶使用時(shí)的真實(shí)場(chǎng)景,不止步與靜態(tài)渲染。

這個(gè)玩法主要是應(yīng)用在用戶自拍的過(guò)程中,那么用戶拍攝的范圍多半只能是上半身,想要讓用戶體驗(yàn)到完整的模型資源,在人物的比例上,可以優(yōu)化為頭身比為1:1,頭套可以比身體稍大一些,會(huì)顯得更加可愛(ài)。

拓?fù)淇梢宰龅母泳乱恍谥饕课簧系拿鏀?shù)可以適當(dāng)多一些,非重要的元素,面數(shù)可以更少,減面也需要差異化處理。

當(dāng)時(shí)留的時(shí)間比較緊張,沒(méi)有做太細(xì)致得貼圖。后續(xù)如果繼續(xù)做好的話,模型上的重點(diǎn)展示區(qū)域貼圖可以做的更加細(xì)致一些,提高品質(zhì)的同時(shí)也提升了效率。

實(shí)時(shí)3D內(nèi)容相比動(dòng)畫(huà),也更注重互動(dòng)性,比如拍攝比例,張嘴互動(dòng)、骨骼反饋的靈敏度等等,這些都是與3D動(dòng)畫(huà)渲染所不同的地方。

在落地的過(guò)程中,還會(huì)有比較多技術(shù)項(xiàng)的思考,比如減面優(yōu)化、適配降級(jí)、對(duì)接引擎過(guò)程中的各種疑難問(wèn)題解決等等。

四、挑戰(zhàn)與機(jī)遇,未來(lái)可期

對(duì)于設(shè)計(jì)師來(lái)說(shuō),這次項(xiàng)目挑戰(zhàn)不小,同時(shí)也收獲頗豐。

從0-1的過(guò)程中,熟悉了非常多以前不常接觸的技術(shù)流程,比如模型雕刻、貼圖烘焙、骨骼綁定、權(quán)重分配、多段動(dòng)畫(huà)的合并、多DCC工具的配合等等。

這些技術(shù)點(diǎn)的學(xué)習(xí),為后續(xù)的項(xiàng)目提供了經(jīng)驗(yàn)支撐。有挑戰(zhàn)才能有進(jìn)步,跳出自己的舒適區(qū),才能成長(zhǎng)的更快。

對(duì)于未來(lái),基于多動(dòng)畫(huà),物理隨動(dòng)的玩法能力,也可以應(yīng)用到更多的創(chuàng)意玩法中,比如與臉部驅(qū)動(dòng),身體隨動(dòng)之類(lèi)玩法,都能以這次的項(xiàng)目探索作為經(jīng)驗(yàn)沉淀而快速?gòu)?fù)用,值得期待。

最后,想體驗(yàn)文中所說(shuō)的玩法,可以在QQ相機(jī)中找到這些濾鏡,操作路徑是:打開(kāi)QQ聊天窗口——找到相機(jī)選擇右下角的表情圖標(biāo)——選擇最新選項(xiàng)——下滑找到“牛勢(shì)已到”,點(diǎn)擊即可玩起來(lái)。

 

本文由 @騰訊ISUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Pixabay,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!