LV. 16
GP 406

【心得】unity卡通渲染技術分享

樓主 eddy21709
GP145 BP-
        大家好我又出現啦~最近版上有點小安靜 加上我一直在製作的東西告一段落了 趁著剛做完就來進行一波大型的分享吧~ 首先先上影片(有2個)


一.前言:
       這次的內容跟上一次相比算是加強版了 不論在卡通渲染上面或者shader我自己也算是有更深的一層理解 下面會有我比較深度的心得 至於特效相關的部分 我這次比較不會提  畢竟這方面比較吃美感 我這一塊也還要再不斷磨練 本篇會比較深入的講解我製作這些影片的前置作業以及製作中遇到的一些問題與shader 希望大家看了對你們現在在製作的遊戲或者專案等等有幫助~

二.前置作業:
       說到前置作業主要就是角色模型的準備 還有你最後要製作什麼樣的效果出來 這邊就拿這次的主角---Bang dream的 Yukina! 因為本人很喜歡這部動畫+遊戲 所以就打算把這角色做出來 還記得當初看到他發布的MV(有興趣可以查 neo aspect)讓我印象很深刻 於是就打算有機會自己做一隻看看 這邊也來說一下角色模型的一些要點:
       1.模型的處理:因為我會使用到卡通渲染的shader 而卡通渲染的shader最主要的不外乎就是實時的陰影及高光 可以先看一下這一篇了解一下卡通風格的shader:
第一個比較重要的點 為了讓陰影細節可以表現出來 我這次做的面數很高 因此可以換算出很棒的效果(當然也可以用額外貼圖模擬 但是我懶ORZ) 這邊可以看一下高面數的陰影細節:
尤其是頭髮部分我覺得把細節做出來 效果真的挺不錯的 其他部分如高光等等 顯示出來的效果也會好很多
        面數提完之後再來提幾個比較核心的重點 物件的合併與分開  
       從圖中可以看到我分了很多層 為何分那麼多層 主要是我這部影片不考慮到效能問題 因此為了追求最高的品質 我會希望每一個部位都有一顆材質球來控制這是什麼意思呢? 假設你今天有透明的材質跟不透明的材質你就必須要分開 還有不同質感的部位也要分開 例如:頭髮跟衣服跟皮膚 兩者材質差很多 陰影顏色也不同所以必須要分開 在下面的圖片中可以看到差異:
      接下來就是為了配合卡通的陰影及外描邊做的一些小加工 首先是臉的部分 這邊的臉部法線有做過特別的處理 至於怎麼處理這一篇有講解相關原理與教學:https://forum.gamer.com.tw/Co.php?bsn=60602&sn=5437&subbsn=5&bPage=0 另外可以使用貼圖來控制陰影的出現與否 為了方便大家看圖我把UV也打開 如下圖:
利用貼圖來控制陰影的出現與否(綠色是不要陰影 紅色是需要陰影去做計算)
而外描邊的部分則是用模型的頂點色來控制 之前的卡通shader裡面有提過了這邊就不講解了
        另外臉部表情是用morpher做的 第一部影片的角色我是嘗試使用高級骨骼綁定來製作 但是遇到很多詭異的bug我也不清楚怎麼解決 於是第二部我就改回原本的morpher了
        再來講一下模型盡量不要有很長的袖子~ 像是這個袖子
不論是骨骼或者權重 後來都讓搞到很想死 所以後面有一些部分我乾脆把袖子刪了XD  另外裙子也是很麻煩的問題 也盡量不要太長或者太複雜 記得綁yukina的裙子也綁到很想死 囧

       2.卡通shader的製作:其實各位可以看到影片第一部和第二部角色上的風格差的挺多的 這主要也是因為第一部的角色shader當初沒有想清楚 加入過多沒有意義的效果 導致最後角色很不卡通 於是我這次記取前面的教訓 把比較重要的保留 這邊大概提一下我有用到的部分
       陰影計算 高光計算 邊緣光計算 外描邊計算 頭髮高光計算 就只用到這5個效果 也可以看到相對第一部影片 這次的風格更卡通 更動漫  (因為shader之前已經有開一篇了 有關卡通shader都快速帶過)

三.調動作+特殊外掛:
        模型準備完畢 骨骼綁定好之後就開始調整動作了 因為我調動作也還挺菜的 因此這邊也快速帶過 值得一提的是max裡面可以放入音樂在時間軸裡面(畢竟我要搭配音樂) 因此把音樂放入max裡面之後調動作會快速很多~
        再來是特殊外掛 之前就有提到的post-processing以外 這邊我還有使用

Dynamic Bone(動態骨骼)

不得不說這個真的挺好用的 當你的模型位移的時候可以幫你計算骨骼的擺動 對於衣服 頭髮等等非常好用 而且可以設定碰撞 讓你比較不會有穿面的問題 但是他也是有相對的缺點的 就是當你模型位移的過大 會有一些問題出現 不過整體還是挺好用的 就是設置上有點麻煩... 這邊小小推薦一下

四.Timeline與鏡頭與特效:
        這邊的鏡頭切換位移等等 都是使用timeline與cinemachine來做到鏡頭的位移切換等等 我個人非常推薦使用 這邊推薦一下這個UP主 裡面有timeline與cinemachine的官方翻譯教學也有其他部分的教學:https://space.bilibili.com/28562838?spm_id_from=333.788.b_765f7570696e666f.2
        再來就是特效的部分 這次的分享主要會著重在shader的原理分享 大概講解一下原理就好 因為每一個shader如果要認真講 我覺得可能錄影片還比較快

五.shader的分享與應用:
       這邊我就把我影片用到的shader 為何使用以及原理都簡單的分享一下內容~
1.刀光
這邊背後的拖尾+刀光 使用的是差不多的shader 原理就是使用2張noise進行疊加 然後作走UV+溶解的效果 再把這個shader配合模型 就可以做到這樣的效果 如果想知道怎麼做 可以去B站找浮生老師的教學

2.冰
這邊主要使用了PBR的材質 並且利用視角方向與物體法線方向dot之後的數值 再與兩個顏色進行lerp來做到2種顏色混合 並且搭配冰的模型 來做出這樣的效果

3.水
水是一個很不規則的物體 因此必須使用頂點位移來達到水的型態 中間的水就是使用noise來進行頂點位移 將noise貼圖與物體的頂點做相加(黑色是+0 白色是+1) 因此就可以做到 像水一般的型態 並且不斷移動noise貼圖的UV 就可以做到中間水的效果
至於旁邊的水 大部分原理差不多 唯一不同的地方在於 頂點位移多了計算切線方向 才能做到一開始的浪捲起來的效果 值得一提的是 必須面數要足夠 不然頂點做位移的時候 很容易有硬邊會很難看

4.爆炸
第一張圖球的原理其實也是多個noise進行疊加 然後分別用不同的速度不同的顏色來移動UV 比較困難的點在於  如何加加減減 來做出我們想要的圖形 這一點比較困難~
第二張圖的爆炸原理跟刀光挺像的 也是使用noise來製作圖形 並且再加上UV移動加上溶解 配合模型以及粒子系統的放大動畫 就可做出爆炸的煙的效果 另外加入一點頂點位移效果會更好 下面給一下模型的圖:
5.護盾
這邊的護盾使用到了畫面扭曲的效果 原理是先獲取當前畫面的圖(Scene Color) 並且使用一張貼圖的改變當前畫面的UV 來做到類似空間扭曲的效果 另外要在SG裡面要使用他 必須是透明shader才能使用 會這樣是因為跟繪製順序有關係 另外破碎的部分是用3dmax的破碎外掛(rayfire)做的

6.風
風的主體都有使用shader 這邊提一下幾個重點 首先是使用一個圓環的模型 並且搭配兩種shader 第一種是使用一張黑白色的紋理貼圖 與顏色進行相乘 然後加上溶解 搭配粒子系統的旋轉 放大 顏色變化等等 第二種則是走UV 並且使用視角方向dot物體法線方向跟alpha進行相乘 來做到中間是1邊緣是0 也就是比較虛的風  然後將2種風疊在一起就可以做出來摟~ 下圖給個對比看看兩者的差異
第一部的部分差不多結束接著換第二部有用到的效果

1.OP部分: 這邊沒有啥特別的shader比較麻煩的大概就是K動作+對嘴好麻煩R
2.緋色之空: 風的shader跟上面一模一樣 其他有用到的都是很簡單的溶解效果 這邊就不多提了
3.Everlasting:
圈起來的部分是使用前面提到的Scene Color 第一張圖的做法比較特別 因為我想要做出冰的倒影一般的效果 於是我使用了當前螢幕的UV 並且把這個UV對應到這張貼圖上面 最後再做疊加 就可以做出假反射的感覺~
第二張圖做法跟上面的護盾大同小異 獲取Scene Color然後改變他的UV 再與貼圖做疊加即可
4.紅蓮的弓矢:
這部分流動的氣流做法非常簡單~就是序列貼圖然後走UV而已 而第2張圖的刀光 做法也跟上面的刀光作法一樣 不外乎就是使用Noise+走UV+溶解+變色
5.firebird:
第一二張圖用的shader都一樣 只是模型+貼圖不同 作法也是使用2個noise來進行計算 並且使用一張貼圖來控制大致的型態 以及顏色的分佈 使用的貼圖如下(環形火焰):
第3張是火鳥的翅膀 這邊使用一張貼圖做遮罩(方便做出翅膀的型態)然後使用一張紋理貼圖移動UV來做到類似火焰的效果 但是如果單純走UV看起來很死板 這邊做了一下擾動+頂點位移 讓他看起來比較生動 看不出來是一張圖走UV 下圖是材質屬性:
另外值得一提的是 這邊有把角色完全壓成白色 前面也有一個是壓成黑色 原理很簡單就是直接給顏色不是用貼圖的顏色罷了~
6.Neo aspect:

這邊使用2個shader先講中間的這一塊 這一塊其實挺複雜的...基本原理也是使用多個Noise進行加加減減 比較麻煩的地方在於做外邊線 以及維持該有的形狀 又能夠有流動感 主要作法也沒有啥特別的 真的就是加加減減
另一個shader是背景的擴張 要比較眼尖才看的出來 這個shader比較特別 主要是在UV上面下功夫 這邊給一下SG的節點圖:
第一張圖的計算其實是所謂的魚眼效果 可以讓貼圖有向外擴的效果 有興趣的人可以去看看Unity的魚眼效果的shader這邊的計算跟他一模一樣
第二張圖相對簡單 其實就是做一個貼圖的放大縮小 這個公式我建議可以記下來真的挺好用的 (X-1)*-0.5 然後再把結果連到offset X連到Tiling 使用這個shader來做到好像背景整個擴張的感覺~

六.總結:
       這次對於shader的掌握度又更理解許多 以前幾乎都是使用別人做好的shader來用到自己的案例裡 但是現在可以自己製作自己想要的效果真的差很多 不論在自由度 效果的呈現 使用的便利性都好非常多 以往UV移動都必須要K動畫 說時在很麻煩 但是使用shader之後跟粒子系統做搭配 幾乎不用K任何動畫了 不論在效果的呈現 以及效率上都大大提升了許多 因此這邊也挺推薦大家來學習這個大坑~ 我所做的卡通角色幾乎都不必畫貼圖 運用shader的計算來達到好看又有效率 最後再對特效的部分做個小總結:
1.noise真的很好用 一定挺多人不知道這是啥 SG裡面有給3種noise 這邊給個節點圖:
可以看到真的就是對這張noise加加減減 不論是刀光 火焰 爆炸的溶解 水的頂點位移都跟他有密切的相關
2.了解你需要的型態:水的型態很多變 因此就必須再頂點位移下足功夫  火的型態則必須使用noise進行加減來模擬出來 風的效果要做到就要各種走UV+溶解 螢幕畫面的疊加要放在那些地方等等等 這些部分都是要去思考的

3.序列貼圖的進化:這次的練習我也感受到 序列圖畫16張的效果真的很不錯 並且多看參考多畫 會漸漸體會到一些東西 這邊附個16張的刀光
另外因為這次的效果非常多 很難好好的講解每一個 而且用寫的真的挺難表達的 只好都快速帶過 如果有真的很想知道怎麼做的 或許可以考慮錄個視頻講解

最後的最後 順便也來召喚一下其他有上浮生六期的同學們~ 也來分享一下這次你們學到的心得感想!
145
-
未登入的勇者,要加入討論嗎?
板務人員:

234 筆精華,前天 更新
一個月內新增 4
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】