LV. 20
GP 957

【心得】超大型作品 Unity X 少女歌劇 卡通渲染技術分享(更新至BRDF 會持續緩速更新)

樓主 eddy21709
GP75 BP-
        大家好 這次總算把之前一直在作的作品完成了! 這次同樣也有兩個作品 一個是以特效 鏡頭為主的 另一個是以演唱會舞台效果 渲染為主的作品 以下是連結:
       這次作的部分很多 個人也打算把裡面用到的技術 思路都寫一遍 給自己做個總結 也反饋給大家 希望能讓大家理解整個製程 也可以了解更多東西~ 本次會講到的部分非常非常多 大致上會分成這幾個:
1.模型與動畫
     這部分主要在講解3dmax建卡通模型的一些重點 我覺得比較出效果的部分 還有動作在max裡面作還是在unity作的優缺點 跟shader之間的對應等等

2.卡通shader
     這部分應該大家會特別有興趣 我應該也會很大篇幅的講這一塊 最主要在動畫渲染與MV渲染的一些區別 還有我的一些新理解 當然也會包刮使用到的技術 這塊會比較硬核 不過我會以shadergraph從簡單一路到複雜作一遍

3.鏡頭與後處理
     這部分重點在使用後處理去幫畫面作層層的改變 同時也可以利用RenderTexture搭配shader 把角色的渲染再提升一個檔次 裡面用到的效果非常關鍵 可以很好的提升卡通感 也會簡單講一下鏡頭的設置與我自己的工作流程

4.特別技術
    這部分會重點講解一些特別的技術 例如平面倒影 體積光 雖說這兩個我是直接買插件 但是原理還是要講解一下 以及怎麼簡單的使用他 還有我自己搞得鏡頭特效的一些作法 雖然之前已經有寫過一篇了 不過既然要總結 我還是再寫一遍 掌握這個技術可以很容易的作出很屌的效果!

5.整體工作流
    這部分最主要是把所有的東西都串連起來的講解 前面的模型 動作 shader 鏡頭 後處理都作好之後 我們還必須寫一些腳本方便管控 這邊會簡單的說每個腳本是作什麼的 然後整體大致上我是怎麼串連起來的 還有一些製作上的思路等等

6.特效體悟
    這部份則是總結這一年我對特效的一些體悟 會把特效影片裡的一些效果作簡單的講解 主要是講解思路 以及特效的貼圖 還有一些特別的效果的使用 像是全畫面的序列 高細節的貼圖 使用遮罩的卡通特效等等  
 
     之後會重點都在這一串作講解 如果可以的話也可以多多分享 個人是挺希望可以多擴散一點出去 一方面對我挺有幫助的 一方面也可以讓更多人學到這些知識 不然最近的遊戲業感覺不是這麼妙...
75
-
LV. 20
GP 965
2 樓 eddy21709
GP13 BP-
        首先模型部分 這次總共作個9個角色 平均一個角色大概作2個禮拜(不包含綁定) 第一個角色做得比較久 因為手腳 部分衣服可以共用 所以第一個角色完成後續就很快了~ 我在製作的時候也有分批次作 根據服裝的相似度 先做小光(藍色)再作華戀(紅色) 一組一組的作效益比較高~ 然後有一個很重要的點 就是參考圖務必要很正確! 千萬不要隨便截一個"看似正面的角度"往往會做不好 剛好這個有遊戲 裡面都有Live2D的圖 所以可以很好的作參考 像這種的就很棒! 盡可能的很正確 然後建模的時候盡可能的做到一樣
再來提一些我覺得模型比較重要的部份 當然這只是我自己的理解 應該很多人有不同的想法 我覺得最首要的就是頭部 頭部要盡量做到很一致 我自己是習慣 作一個大概之後 簡單拆分一下UV 就把模型放到unity裡面搭配卡通shader不斷來回調整 直到滿意為止 然後在簡單說一下我覺得比較重要的部份 以頭部來說 最重要的當然就是正面 佈線 弧度都要盡量做得好 像是臉部的部份 在箭頭的部位 要稍微凹進去一點點 會比較優
這個角度的曲線很重要 務必要有這種曲線
臉頰的佈線也很重要
眼睛跟嘴巴是以一個圓 一圈一圈往外擴散的佈線
再來是身體的弧度 要做到前凸後翹
腿的部分很重要 弧度跟之字形結構要做出來
然後在unity裡面不斷反覆地調整修改 然後這是第一版的角色:
其實還是可以看到有些角色做的還是有點問題 所以我後續其實還有再花不少時間作調整 這個真的非常吃經驗 版上有在建模的朋友 也可以留言一起討論重點部分 也會幫到我><
其實這樣不斷來回的改真的挺麻煩的 max改一下放unity 不能很直覺的改 所以之後可能考慮試試blender應該可以提高效率 接下來要提一下跟卡通渲染有關的部分了 角色的部分還必須刷頂點色 為了控制描邊的粗細 所以我選擇用G通道來控制描邊的粗細 具體的工作流可以看一下這影片:
不過這個其實有點脫褲子放屁 最主要是因為我的模型已經綁好骨架了... 所以導致我不大可能去更改 在3dmax裡面刷又很不直觀 所以只好在unity裡面刷頂點色控制描邊粗細 然後FBX Exporter把刷好頂點色的模型輸出 在用blender烘焙成貼圖 其實如果可以的話 建好模型之後 匯入unity刷頂點色 然後同樣的模型導出 之後使用這個刷好頂點色的模型作後續就可以了~ 這部分最主要是要作描邊的粗細

接下來還有一個頂點色要處理 那就是為了給後處理描邊使用的 可以看一下這部分的後半段:https://forum.gamer.com.tw/C.php?bsn=60602&snA=2983

這邊在簡單的講一下原理 首先我先用一個Camera照角色 然後照角色的頂點色R通道 接著使用sobelfliter的計算方式 根據像素顏色的對比來繪製邊線 這邊可以看一下對照圖:



那因為我還有作距離的計算 為了避免 遠處的描邊過粗 所以我還加入的深度以及距離的判定  來確保遠近不會有問題 詳細部份後處理的部份再提 然後就可以很好的作出內描邊了~


箭頭部份就是依靠sobelfliter後處理所繪製的內描邊 一般描邊則是單純的法線擠出 然後利用頂點色控制粗細 因此角色的頂點色主要就是在做這些部份 光這些其實就很花心力了=..=

接著我還有作一套UV2 這套UV2很簡單 看圖就秒懂了
這邊刻意多一套UV 是為了刷漸層 像是頭髮的部份 我可以利用一個漸層 從上面往下刷 來營造好像有光影響到的感覺:
可以看到這樣一點點的漸層就很好的讓角色可以更好的跟畫面和在一起 或者增加細節 像這邊:
在腿跟鞋子的銜接 也稍微做了一點點漸層的陰影色進去 可以很好的提高細節 還有增加融合感 因此特意多開了個UV2來控制這一塊 同時頭髮高光 也可以利用到 像這邊的天使光環:
對應好UV2 把高光的圖畫上去就可以
這樣就可以很輕鬆地作出假的頭髮高光 在利用shader作一點變化看起來就差不多了~

接著提到動作部份:
我最原先是在max裡面K動畫 效率上還可以 但是在轉來轉去的時候很麻煩 畢竟我們是做動畫的感覺 稍微手偏了 就必須回到3dmax裡面調整 往往一直來回會挺花時間 尤其是作這一段的時候 為了把劍對準鏡頭插下去 花費了不少時間調整
因此在作完這部份的作品之後 我打算使用在unity裡面K動作的插件 那我這邊選擇Very Animation 使用教學我就不講解了 網路上有很詳細的教學 可以看影片跟著設置 大概1個禮拜就差不多上手了
然後說一下為何要使用這個插件 最主要是為了提高效率 畢竟所見及所得 爾且使用這個K動畫 效率不會輸3dmax~ 爾且我們使用的是Humanoid可以共用所有動作 這個插件 還可以把手部動作存下來 需要使用直接點就可以 我覺得這部份比max的好用很多
表情也可以存下來~(這邊用的是blendshape)
只要在max裡面把對應的嘴型做好 命名都一樣 這樣子我只要調整一個角色的嘴型 就可以把這個嘴型共享到所有角色~
並且因為我是在unity裡面實時 進行的 所以我可以對著鏡頭K表情
爾且因為是使用unity的animation所以可以使用曲線編輯 真的很舒服~
並且 還有鏡射的功能 這邊就是用鏡射功能直接把動作鏡射過來 就可以少做很多部份


然後動作部份我是找這一部 一點一點K的
並且在作的時候我有分類 好比一開始的 迷宮組 花葉組 他們的動作幾乎都一致 所以優先處理他們的
再來是 奈奈 純那 露女士QQ組  他們前面 中間的動作都一致 所以可以一起完成
再來是自古紅藍出CP的 華光組   他們的動作比較特殊 所以會特殊去作 幾乎都是他們在solo
並且還有很多部分可以共用動作 很多段動作都可以直接共用

這部分做好一邊 反過來就OK了
都是一致的動作很好處理

不過我還是有把每個動作都額外複製出來 先做好一個全部通用的 再個別分發到不同角色身上 所以會有這樣的分類(可以看到數量還蠻多的..)
並且有些動作可以利用timeline的動作blend把動作跟動作之間作混和 可以看這壯觀的timeline... 這是所有動作再timeline的部分
另外還有一點 我這裡面的動作都是不帶位移的 也就是移動部分我自己額外在timeline裡面K 可以看到量也真的是挺大的XD 畢竟還有隊伍變換
所以其實在動作部份真的花了蠻多時間的 後續還要考慮裙子穿模的問題 一個一個修正 途中還遇到了一些bug有點噁心 不過最後還是把動作部分都完成 爾且一旦基礎都做好了 剩下其實就是對著鏡頭細修 到後期基本上都是微調 增加點細節部分罷了~

不知不覺寫了超級多=...= 模型跟動作的部分就大概寫到這邊了 我自己本身建模跟動作也不是特別厲害 就是稍微點一下這方面的技能點罷了 也方便我自己作出我自己想要的效果 有一些具體的指教或者建議也歡迎在下方留言 之後就會進入可能更長的shader篇了=..=
13
-
LV. 20
GP 1k
3 樓 eddy21709
GP17 BP-
       接下來來講卡通shader的部分吧 本次的shader主要兩種呈現 本篇會由淺入深 並且一步一步地把效果實現
1.動畫渲染:主要就是標準的硬邊陰影 邊緣光 高光 描邊 為了盡量符合動畫裡的效果
2.舞台渲染:因為舞台上會有很多的燈光 因此需要多做蠻多功夫在光影上的互動  並且也使用了比較高階一點的漫反射模型:BRDF 算是本次效果的重大功臣 另外還有內光暈 燈光邊緣光 也算是非常關鍵的效果

卡通shader的部分其實我已經寫了蠻多文章介紹過 所以這邊我就不贅述太多 我就直接在shadergraph裡面實現 不過在實現之前 必須要先準備2個東西:

因為SG(shadergraph)裡面並沒有燈光 所以我們到這邊獲取:https://github.com/Unity-Technologies/ShaderGraph-Custom-Lighting/tree/master/Assets 並且最重要的就這兩個檔案
有了這兩個檔案之後 我們的SG就會有Get MainLight的節點了~ 首先我們先創建一個PBR的Shader 為何使用PBR主要是因為如果不使用PBR的話 會無法獲得shadowmap的陰影數據 然後我們老規矩 N dot L 然後記得都要歸一化(normalize)不然得到的數值會不正確 並且要做Saturate讓數值不要有負數 就會得到這樣的效果:

接下來我們把貼圖指定上去 並且跟陰影的結果相乘:

那頭髮不分因為我沒有給貼圖 所以我這邊必須在跟一個顏色做相乘 並且 我們接下來把陰影做成硬邊的 要做成硬邊 一般來說我們可以使用step節點 那我這邊使用另一個比較有趣的節點 Gradient然後連到time的地方 就可以把我們的陰影區分成硬邊陰影了~

然後接下來 我們要把陰影顏色改成不是黑色 以前我在做這部分都會加來減去的 後來發現使用Lerp這個節點就搞定了 這個節點真的非常好用~ 我們將我們得到的數值連到Lerp的T 並且在A的部分連上一個我們自定義的顏色 做陰影顏色:

那麼我們最簡單的卡通渲染基本上就算是做出來了 接下來就是要把高光 邊緣光的部份作進去 首先先作高光 這邊我們同樣使用最基本簡單的高光(Blinn-Phong) 公式也很簡單N dot H 詳細推導 這邊就不提了 想知道的朋友可以找谷歌大神 N就是法線方向 H則是燈光方向L + 視角方向V 然後歸一化 如下:
這就是基本的高光算法 不過我們要在跟我們的漫反射作相乘 因為我們不希望我們的高光 在暗處也會發亮 所以我們這邊跟漫反射的結果相乘 然後再作硬邊的效果 如下:
到這邊 硬邊高光也被我們實現了 不過我們還想要控制範圍 所以我們這邊給一個power power的含意就是作次方 好比0.1的3次方是0.001會更接近黑色 這樣方便我們控制不同部位的高光範圍 然後我們把結果跟一個顏色相乘 然後再跟我們前面貼圖*陰影的部份作相加 並且把顏色 範圍都稍作調整:
到這邊簡單的高光部份算是作好了 接下來要作邊緣光 這邊也使用作簡單的作法 菲尼爾 菲尼爾的概念很簡單 就是N dot V 然後作1-  我們也可以直接使用Fresnel的節點 並且呈上一個顏色作相加:

接著把邊緣光轉成硬邊的效果 這部分也跟前面都一樣 並且Fresnel 的power部份跟前面控制高光範圍的概念是一樣的 我們可以利用它來改變邊緣光的範圍 並且再把邊緣光的部份跟陰影相乘 因為邊緣光在陰影處部會有 所以我們得到這樣的效果:

不過我們現在還無法得到shadowmap的陰影 所以我們可以從Get MainLight這節點的shadowAttenuation獲取shadowMap的數值 只要把我們N dot L之後跟這個數值相乘就可以得到陰影了~

最後我們還必須製作描邊 來讓我們的角色有外描邊的部份 但是SG並沒有多pass的方式 所以我們要編譯成程式碼然後去改 像這一篇作的方式:https://forum.gamer.com.tw/C.php?bsn=60602&snA=2738
經過處理之後就有描邊了~
接下來 來作一下我們前面提到的 頭髮的一個漸層 來製作有燈光照到的感覺 這邊我們可以利用UV的特效 作一個漸層 並且同樣用power來改變範圍
接著再把他跟一個顏色相乘 然後加上去就可以對應第一套UV的漸層了
但是我們要對應的是UV1 不是UV0 因此這邊要用一個叫做Length的節點 來幫助我們得到正確的UV1
最後在把頭髮高光的圖作上去 簡單的卡通渲染的效果算是實現得差不多了~

不過這樣還是不大夠 我們還必須作一下後處理 後處理會搭配RenderFeature 並且搭配blit來使用 這時候就要用到上面的影片裡面的腳本了~ 不過這個連結貌似失效了... 這邊我把檔案打包到我的雲端 需要的人可以來下載:https://drive.google.com/file/d/1gy5eiKMBGDq5bn4BUz0U_zhYzygOvEzf/view?usp=sharing
我之前寫的文章就有大致說要怎麼使用:https://forum.gamer.com.tw/C.php?bsn=60602&snA=3091
眉毛的順序渲染:
加入模糊效果:
製作畫面的濾色:
最後加入後處理:
到這邊為止 基本上就是我在動畫渲染所作的大部份的工作了~ 也就是這一部的畫面基本上都是這樣達成的 當然還有一個內描邊的部分 這部分我打算下一篇再提
那麼下一篇就會提到舞台渲染的加工方式 以及BRDF的使用以及優勢等等 基本的部分已經寫有點太多了XD
         最後簡單作個小總結 可以看到一般的卡通渲染 其實不外乎就是漫反射 陰影(ShadowMap)高光 邊緣光 其他部分就看自己要怎麼修改 那麼一般來說 還會用貼圖控制陰影範圍 不過這部分我並沒有特別去作 因為我的模型本身的面數還算挺高的 加上如果我每個角色都還要繪製陰影貼圖 那對我的工作量會很大 因此這部分就沒有特別作 總之就是用一張圖的RGB3個通道 分別對高光 陰影 描邊(或者其他的東西) 去進行額外的計算
       我們也可以看到後處理的效果還挺重要的 如果少了這個後處理 就很難讓角色跟背景融合在一起 因此我認為除了卡通shader重要以外 後處理也功不可沒 尤其是在作舞台渲染 後處理可說是MVP級別的存在 還有BRDF也是非常重要~ 這部份我們之後在談~
17
-
LV. 20
GP 1k
4 樓 eddy21709
GP2 BP-
       接下來講一下舞台效果的卡通shader 這部分比較難 所以才拖了這麼久(絕對不是本人太懶) 這次使用到幾個非常靈魂的效果 首先就是我們的BRDF~~~
       
       BRDF我這邊只概略的介紹一下(要詳盡的麻煩找谷歌大神) BRDF簡單來說就是相對比較高級的光照效果 我們前面都只使用簡單的NdotL(蘭伯特光照模型)  而BRDF則是相對複雜許多的計算 但是得到更泛用 更好調整的效果 順帶一提 URP shader裡面的Lit也是BRDF
       接下來說一下BRDF的兩個部分 第一個部分就是漫反射 Disney Diffuse這個就是迪士尼 根據許多經驗 最後結合歸納出來的漫反射效果 第二個部分則是GGX的高光 比較多人會使用這個高光的計算效果 其他還有很多的算法 這邊使用的是GGX(不知道有沒有拼錯.) 然後我們特地把它做成shadergraph可以使用的節點 如下:
看起來好像有錯誤 實際上是可以使用的 因為我魔改了一些光照的東西 所以會出現這個bug麻煩無視掉ww 可以看到 我們可以在SG(shadergraph)裡面提供需要的資訊 然後藉由這個Custom Function的節點來計算BRDF的內容 那實際上我這邊還有寫幾個hlsl檔案提供給這個節點閱讀 如下:
這部分就是Disney Diffuse的程式碼的部分 可以看到他的計算也沒說到特別的複雜 只要把這個hlsl文件寫好 放到Custom function的節點裡面 然後設置好對應的東西就可以使用了~ 接下來是高光:
然後最後只要把這兩個效果相加就是我們的BRDF了! 到這邊就是BRDF的主要內容 接下來來開始講解卡通shader的部分 首先先說一下BRDF為何這麼重要 這邊就直接看它所影響的效果吧~ 首先當然是硬邊陰影的部分 基本上就是拿BRDF為主去做計算 不過我這邊還有做一些其他東西:
可以看到內容挺複雜的 實際上其實只是把Disney Diffuse所計算的效果藉由Sample Gradient來說到硬邊的陰影罷了 其他的部分只是我所做的一些光照處理 為的就是讓角色可以藉由點光源的強度來改變角色的陰影數值 硬邊陰影的部分:
其實BRDF轉成硬邊陰影 效果說真的跟NdotL區別不大 但是為什麼還是要用到它呢? 其實最主要是需要他的虛邊陰影 也就是直接真實光照的計算 為的就是提升一些地方的細節 看一下節點:
沒錯就這麼簡單 主要只是為了自己可以用指定的顏色去混和 然後把結果跟上面的效果相乘就好了 那麼來看一下它所影響的部分吧:
左邊為沒有使用這個效果 右邊為加入BRDF陰影的計算 可以看到在頭髮的部分 還有金屬的部分都稍微比較有一點點的立體感 這一點點的立體感很重要 卡通渲染如果你給太多寫實的就不卡通了 全部都是色塊又會太卡通 缺少細節 其實這一點在特效部分也是一樣的道理 以後在特別講一下這部分 我們再看一張對比圖 看一下整體區別在哪邊:
這邊就可以看到某一邊的細節相對就比較少了一點點了 差這麼一點點卻挺影響整體效果的 因此我認為這個部份真的很重要 其實也很類似最近比較夯的原神 他們也是用類似的作法 來提高細節度 也就是我之前卡通shader部分的多ramp的概念有點像~ 不過這次的shader高級很多就是了w

最後就是高光的部分 這次是把高光分成兩種 一種是虛的高光 一種是實的高光 根據不同物件給予不同的效果 可以看一下圖:
可以看到有沒有高光也是有點細節上的差別 在這邊也大概可以看到 缺少了這一點點的細節 積少成多 就會導致效果出不來 而這個高光就是BRDF的高光部分 還可以藉由調整粗糙度 金屬度(F0是非尼爾影響的強度 一般來說金屬的F0的數值很高0.7以上 頭髮布料等等大概0.1以下)得到不同的高光效果:
然後值得一提的是 我們角色的臉部 是完全沒有用到這些的喔! 這點非常重要 因為臉部一但用了就不卡通了 所以臉的部分就完全單純的貼圖+硬邊陰影 不能有任何的寫實陰影部分 很容易導致風格偏掉 不知不覺 寫了一個多小時了... 之後會在更新下一個部分 內光暈的部份 主要就是做這一部分(金色的部份):
製作方式主要靠這張圖即可~
有了這張圖就可以做成這張圖
然後變成這張圖 最後以畫面空間加上去即可:
至於怎麼做的 之後更新後再說吧~~~ 以下開放沒獎徵答
2
-
未登入的勇者,要加入 5 樓的討論嗎?
板務人員:

238 筆精華,10/12 更新
一個月內新增 5
歡迎加入共同維護。


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

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