<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          項目案例|3D AR 特效如何在相機中無縫應用

          共 5850字,需瀏覽 12分鐘

           ·

          2021-06-22 19:39

          點擊"三分"關注,回復"社群"加入我們

          歡迎來到專業(yè)設計師學習交流社區(qū)

          三分設|連接知識,幫助全球 1 億設計師成長

          阿里巴巴設計官方認證 MCN 機構

          SUXA 深圳體驗設計協(xié)會華東分會

          全球服務設計共創(chuàng)節(jié)城市站發(fā)起者

          ·

          轉自:騰訊 ISUX

          編輯:李凱悅

          共 5521 字,預計閱讀 14 分鐘



          為迎接牛年春節(jié),給大家?guī)硇履甑淖8:蜌g樂,我們圍繞關鍵詞 “?!?設計了一系列針對 QQ 相機業(yè)務相關的玩法濾鏡,包括 “牛轉乾坤”、“牛氣沖天”、“牛勢已到”、“招財童子吐福字” 等等,以創(chuàng)新的互動能力為 QQ 用戶提供新奇的玩法體驗和情感表達。

          其中,“牛轉乾坤” 以 3D 變臉技術為基礎,讓用戶能從普通人臉變成牛臉,酷炫的風格配上節(jié)奏感極強的音樂,給用戶帶來新奇感;“牛氣沖天” 則是 以互動游戲的形式,讓玩家在游戲中通過收集各種氛圍元素不斷積攢牛氣,獲得更高的牛氣值和更厲害的稱號,享受不斷刷分帶來的樂趣;“牛勢已到” 則 嘗試以臉部為驅動,配合臉部表情驅動模型產生變化以及左右搖擺帶來的物理隨動效果,配合一些春節(jié)氛圍元素,趣味十足;“招財童子吐祝?!?則 結合了中國傳統(tǒng)民俗,以拜年送祝福的形式,福氣又添財等等。
          項目中攻克了不少問題難點,篇幅有限,本文僅以 “牛勢已到” 的設計制作過程,和大家分享下設計背后的故事。拋磚引玉,希望和大家學習交流。


          一、問題攻堅,剝開盲區(qū)

          對我們設計團隊來說,這次的玩法設計中涉及到很多以前較少接觸的技術領域,比如將  3DMM、Blendshape、AR、多段 3D 動畫合并與觸發(fā),面部識別等多能力復合應用的體驗把握、效果和性能控制,這對我們設計團隊來說是一次不小的挑戰(zhàn)。


          本次的美術制作管線 (Art Pipeline) 需要結合不同 DCC 工具制作不同階段的美術資源,然后還要在新版工具完成配置,這與常見的游戲制作流程有很大不同。多能力復合應用不僅帶來了新的摸索成本,在技術落地上也帶來實際的困難,不少技術黑盒的存在使得在效果還原的過程中不斷踩坑。因為標準的不確定性,導致對于模型的面數,比例,貼圖,動畫長度等等存在很多的未知難點。

                            
          二、流程探索,高效落地

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

          1、玩法設定
          因為是基于 QQ 相機的 AR 玩法,所以我們將整體交互設定為以用戶的臉為主體,當引擎識別出用戶的臉后,可以將引擎中的模型臉與用戶的臉相匹配,然后用戶可以通過頭的搖晃和面部表情驅動模型變化。

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

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

          (圖片來源于網絡)

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

          (圖片來源于網絡)

          從關鍵詞和靈感圖中,我們創(chuàng)作了 2 個版本的原畫概念方案
          經過討論,確定以方案 A 為最終形象設定,原因是方案 A 更加符合用戶對春節(jié)的期望:化身財神,小孩子的形象也比較有親切感。因為頭部到時候會替換用戶的臉,所以這里不需要設計角色的臉部造型。

          3、3D模型設計
          有了明確的 2D 形象設計后,接下來要做的工作就是把它轉化成 3D 模型,最終的模型設計因為要平衡好性能和品質,相比于 2D 設計,3D 設計流程顯得復雜很多。這里的關鍵步驟有以下幾點:


          3.1 中模設計
          先根據原畫設定做好中模設計,這一步主要是確認模型的基本造型,便于溝通和調整。這個階段可以先不考慮小細節(jié),比如衣服褶皺那些可以在高模中雕刻。當然,也可以根據 3D 模型的具體情況在 2D 原畫的基礎上做一些適當設計發(fā)揮。


          3.2 雕刻高模
          確定中模的結構后,接下來就需要完成高模的設計。有些人可能覺得好奇,最終用到模型資源是低模,那為什么還要做高模呢?其實,高模的作用就是為低模而準備的。通過高模烘焙出法線貼圖,AO 貼圖,金屬度貼圖等等紋理貼圖,能夠讓低模也擁有高模的細節(jié),這樣做的原因主要是為了降低性能消耗。


          精度要求不高的模型在非專業(yè)雕刻軟件中,比如 C4D 中就能完成雕刻,而精細度更高的高模則需要到專業(yè)的雕刻軟件,比如 Zbrush 中雕刻會更加方便。雕刻要注意把細節(jié)雕刻的足夠明顯,甚至可以夸張一些,目的是為了在烘焙后能得到更多細節(jié)的貼圖。這樣最終烘焙出來的貼圖才能方便調整,比如效果太強可以適當減弱,但如果效果太弱是沒法再增加細節(jié)的。


          3.3 拓撲低模
          高模的面數一般會非常多,考慮性能問題,一般來說是不能最終使用的,這個時候還需要對模型進行拓撲,也就是重新布線。拓撲的作用是優(yōu)化布線,減少面數,而優(yōu)化好的布線也更方便拆 UV。這里面有 2 個需要注意的地方:

          1)保持面片,不通過擠壓做出封閉厚度。需要做厚度的地方,用面片彎曲來實現。
          2)用點多的高模來做 (可以通過加細分來得到更多點的模型),精度更高的模型會更加方便吸附選擇,這樣最終得到的布線可以更加規(guī)則

          3.4 拆 UV
          這里一般建議用更加專業(yè)的拆 UV 工具來做,比如 Uvlayout ,Maya 等,不建議用  C4D 直接拆 UV。我這里由于是在 C4D 中做的模型,所以通過在 C4D 中整理好模型導出 .fbx 文件,導入 Maya 中進行拆分,然后再導出拆分好 UV 的 .fbx 文件來畫貼圖。注意將單個部件拆分在一個完整區(qū)域中,會更方便定位。


          3.5 畫貼圖
          把拆分好的 .fbx 導入到 SP,然后在 SP 中進行比較細致的紋理設計。如果對這個軟件不熟悉,也可以在 C4D 中簡單畫一些貼圖大概范圍,然后在 Ps 里細化貼圖。當然,用 SP 的好處就是可以烘焙出非常多的細節(jié)貼圖,主要用到的貼圖包括 Diffuse、Normal、Metallic、Roughness 方便后續(xù)使用。


          3.6 烘焙
          確定好貼圖后,通過 SP 可以將各種需要的貼圖烘焙出來,用到最終的低模上。烘焙的時候需要注意,低模和高模中的 Mesh 命名要一一對應。烘焙出來的貼圖可能有問題,如出現破裂,可以用 PS 的內容識別工具進行修復,主要修復法線貼圖上過渡比較銳利的地方。


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


          4、骨骼綁定
          模型和 UV 確定后,接下來需要進行骨骼綁定和權重分配。因為后續(xù)需要在引擎中加上物理隨動效果,所以這里的綁定規(guī)范會跟常規(guī)的 3D 動畫綁定要求有所不同,它要求哪里需要產生動畫就要將骨骼頂點添加到 Mesh 的末端點,以獲得更加精確的模型控制。所以,在實時 3D 內容的設計中,僅靠權重控制不能做到足夠靈敏。至于綁定的工具,用自己熟悉的軟件即可,比如 C4D,Maya ,Blender 等等。


          5、動畫設定
          在這次的項目中,需要做多達 5 段的動畫,其難點在于,這套多段動畫會分為循環(huán)動畫、非循環(huán)動畫,其中拆分開的循環(huán)動畫,需要首尾完全相同,并又能準確銜接到下一個動畫。這又是與 3D 動畫設計不同的地方,對動畫節(jié)奏提出了更高的要求。


          為了提升溝通效率,向開發(fā)說明這里的動畫邏輯,制作了一張動畫時間線圖。
          最終把動畫拆分成 5 段進行輸出:


          而為了實現這樣一套復雜的動畫內容,經過了反復的測試,我們使用 Blender 導出最終的多段動畫,實現了復雜邏輯控制。這里會選擇使用 Blender 輸出,主要原因是  Blender 的動畫規(guī)則更符合引擎的讀取需要,效果更加接近引擎中的實際效果,便于測試。

          因為需要多 DCC 工具的配合,在不斷導入導出的過程中出現了各種疑難雜癥。這里面有幾個點尤其需要注意:
          1) 要用正確的 Blender 版本進行動畫合成輸出,Blender 版本問題會產生各種 bug。這里建議用 Blender 2.8 版本進行動畫輸出,兼容性更高,導出錯誤率較低。想要更方便導出 .glb 動畫格式,也建議大家嘗試用 Maya+Babylon 插件。
          其中有個細節(jié)需要注意下,Blender2.9 軟件操作更加便捷,但輸出動畫時,skin 值會丟失,導致動畫運行不正常,暫時只能通過換到更低的 2.8 版本來解決。
          2) 在導入 Blender 前,需要在 C4D 中把除了骨骼動畫外的所有動畫軌道全部刪除清理,這樣導入 Blender 中的動畫軌道才是最干凈好處理的。

          6、氛圍細節(jié)
          因為畫面是以臉部運動為驅動的,所以模型會在整個屏幕產生移動,為了讓畫面更加合理,即人物不可能是沒理由的漂浮在空中,所以給人物增加了站在云上面的設定。
          為了強化春節(jié)氛圍,還增加了元寶和春聯(lián)的裝飾元素。


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


          7、背景音樂
          同時,增加了背景音樂,這里面有個小細節(jié)點是結合了人物面部表情對音樂進行卡點。當用戶張嘴的時候,音樂也會同步變化,會模仿畫面喊出 “財神到!”,帶動用戶一起互動。也用 C4D+AE 制作了完整的玩法 Demo,便于開發(fā)做效果還原。


          8、性能問題
          做 3D 內容設計相較于做 3D 動畫設計,會有更多的技術性的思考,性能就是一個重點。做動畫設計時,怎么好看就可以怎么來,但對于實時交互的 3D 效果來說,因為最終是需要在手機 QQ 中上線,需要兼容到各種不同的機型,所以我們對于資源包要求非??量?,需要做很多美術效果的平衡。整個的優(yōu)化思路包括以下幾點:

          a.當前期做完減面后,依然發(fā)現性能不符合要求需要減面時,可以利用 Blender 的減面修改器進行減面。利用這個修改器做減面對模型效果影響比較小,又能快速實現減面能力,非常方便。

          b.經過測試發(fā)現整體性能消耗上,動畫帶來的頂點變換產生的性能開銷最大,所以要平衡好動畫元素。做性能優(yōu)化時,可以考慮從小動畫上入手,去掉一些不太能注意到的小骨骼動畫,減少頂點變換量,從而提升性能。

          c.優(yōu)化貼圖大小,合并貼圖。貼圖存儲的不單是顏色,還包含了各種信息,例如各種黑白圖,能改變粗糙度,金屬度等等。所以可以將貼圖利用不同通道的方式合并到一張圖中,縮小貼圖的文件大小。

          以最好機型為基礎,做出性能允許的最佳資源,以這個標準效果向下兼容,打包出幾個性能區(qū)段的素材包,包括:
          1) 動畫+物理隨動,高端機型
          2) 只有少部分動畫,中端機型
          3) 沒動畫,沒物理隨動,低端機型

          9、上線效果
          最后,經過復雜的引擎配置流程,材質調整,平衡了一部分效果后最終得以上線,這是最終上線后的效果,可以在 QQ 相機中進行體驗。


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

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


          項目上線后,我們也進行了反思,從 3D 動畫設計到實時 3D 內容設計需要做一定的思維轉換,比如一開始就需要評估清楚玩法和用戶使用時的真實場景,不止步與靜態(tài)渲染。

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

          2) 拓撲可以做的更加精致一些,在主要部位上的面數可以適當多一些,非重要的元素,面數可以更少,減面也需要差異化處理。

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

          4) 實時 3D 內容相比動畫,也更注重互動性,比如拍攝比例,張嘴互動、骨骼反饋的靈敏度等等,這些都是與 3D 動畫渲染所不同的地方。在落地的過程中,還會有比較多技術項的思考,比如減面優(yōu)化、適配降級、對接引擎過程中的各種疑難問題解決等等。

                            
          四、挑戰(zhàn)與機遇,未來可期

          對于設計師來說,這次項目挑戰(zhàn)不小,同時也收獲頗豐。從 0 - 1 的過程中,熟悉了非常多以前不常接觸的技術流程,比如模型雕刻、貼圖烘焙、骨骼綁定、權重分配、多段動畫的合并、多 DCC 工具的配合等等。這些技術點的學習,為后續(xù)的項目提供了經驗支撐。有挑戰(zhàn)才能有進步,跳出自己的舒適區(qū),才能成長的更快。

          對于未來,基于多動畫,物理隨動的玩法能力,也可以應用到更多的創(chuàng)意玩法中,比如與臉部驅動,身體隨動之類玩法,都能以這次的項目探索作為經驗沉淀而快速復用,值得期待。

          最后,想體驗文中所說的玩法,可以在 QQ 相機中找到這些濾鏡,操作路徑是:打開  QQ 聊天窗口 —— 找到相機選擇右下角的表情圖標 —— 選擇最新選項 —— 下滑找到 “牛勢已到”,點擊即可玩起來。





          推 薦 閱 讀
          華為用戶體驗設計的體系搭建方法
          超 10 億用戶的產品,到底是怎么做用戶體驗的?
          揭秘滴滴、蔚來等大廠的用戶體驗設計策略
          一款為你帶來難忘體驗的美食 APP
          谷歌的新一代 Web 性能體驗和質量指標
          2021 年用戶體驗設計趨勢分析
          想要引導用戶行為轉化,理解這 4 個認知心理學理論
          讓設計圈一片嘩然的 Google 新 logo 到底出了什么問題?
          如何系統(tǒng)的增強用戶粘性,提升產品轉化率?
          設計新趨勢「玻璃擬態(tài)」到底是什么?
          如何將設計系統(tǒng)快速的從 Sketch 切換到 Figma?



          歡迎大家關注三分設,每天分享優(yōu)質設計、創(chuàng)意靈感、新知新識,定期大咖老師直播分享,零距離連麥,答疑解惑。

          瀏覽 87
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  狠狠操五月天 | 国产黄色视频免费观看 | 日韩中AV无码毛片 | 成人无码网站在线观看 | 亚洲色情A片 |