LV. 14
GP 217

【心得】高品質卡通角色實現心得(shaderforge)會不斷更新效果做法->更新面部補光+物體投影部分

樓主 eddy21709
GP71 BP-
大家好~這次新年在家終於完成最近研究的高品質卡通角色了~影片預覽效果
:
這次的效果參考大量文章(主要為崩壞3)以及自己的一些理解所完成 之後如果大家有興趣的話我會一一把每個效果做介紹  這次使用unity2018.3 並使用shaderforge去製作shader (shadergraph不能作外描邊ORZ)  以及post-processing做濾鏡效果 並且藉由調整unity的shadow來實現物體的投影  這次同樣也是實時的光影但是進行了許多改良與優化 跟半年前的角色一比 果然差有點多阿@@ 趁著新年在家沒事把技術分享 順便請教板上有沒有大大能給予優化ORZ  

接著來介紹一下卡通風格的基本概念與我所用到的作法:
1.外描邊(outline):卡通風格的靈魂之一 有很多種作法 這邊我使用的是shaderforge裡面自帶的沿著模型法線(Normal)向外擠出的作法 同時還有作一些小加工(頂點色控制粗細)

2.漫反射(Diffuse):這次的做法跟之前不太一樣 之前的作法只能計算一個硬邊的陰影 這次的做法參考了崩壞3的多通道ramp上色 可以一層一層的疊加上色 圖引自http://youxiputao.com/articles/11839

3.頭髮高光:這邊使用的是一套很給力的公式 基本上照著公式走就可以達到影片中的效果

4.邊緣光:這一部分我做了2種邊緣光 第一種使用fresenl來模擬角色受光面的邊緣光 第二種也是使用fresenl但是是做在背光面 這邊有參考薩爾達的作法  https://connect.unity.com/p/zelda-inspired-toon-shading-in-shadergraph 圖中可以清楚看到邊緣光的效果
第一種邊緣光:
第二種邊緣光:

5.物體投影和面部補光:投影的部分使用unity自帶的ShadowMap只要調整好數值 並且在shader裡面進行加工 就可以達到物體的投影(EX:頭髮投影到臉上的陰影)並且使用PCSS再進行加工 面部補光這邊是使用修改頂點色(Vertex COlor) 讓臉部不要有奇怪的陰影 圖引自http://gad.qq.com/article/detail/10052
6.高光:為了體現不同材質 特別利用高光來區分出金屬材質與盔甲 金屬材質使用一般高光的計算方式)比較虛)  盔甲與衣服等等 則是經過較特別的計算 讓他變成硬邊的高光 圖中紅色是一般高光  綠色是硬邊高光

7.眼睛:眼睛的部分有作出高光會隨著攝影機視角移動跟著進行偏移 以及球體的光線焦散效果 也是參考崩壞3的作法(雖然沒有全部實現)

8.特殊後製及工具:繪製頂點色的部分 使用了unity上免費的工具PolyBrush來繪製(比我預想中的好用!) 後製的部分同樣神好用的post-processing以及物體投影(陰影)改善的PCSS腳本 少了這2個效果瞬間落漆一個檔次...... 以下對比圖
最後附上材質圖:

shaderforge的節點就沒辦法了 因為非常非常非常複雜 連我自己都快看不懂了wwww
然後以上的做法都只是概括的提一下 之後會再把每一個效果的作法 進行深入的詳解 敬請期待!
71
-
LV. 15
GP 250
2 樓 eddy21709
GP11 BP-
接下來開始詳細介紹一下每一個效果的作法吧~  基本上都是跟shader有關係的

1.外描邊(outline):顧名思義就是模型外面的描線 描邊有很多種作法 一種是用後製的shader有點像一種濾鏡 另一種就是最常用的沿物體法線擠出的作法 我這邊也是使用這個做法 shaderforge裡面就已經有做好外描邊給我們使用 使用方法很簡單 自定義一個數值連上去就好了 如圖:
另外這作法之前就有大大們討論這個方法 我這邊就不討論了 https://forum.gamer.com.tw/C.php?bsn=60602&snA=1086
但是這時候出現問題了 有的地方不希望有描邊 而且粗細大小都一樣 看起來沒有美感 於是這邊使用了模型頂點色(VertexColor)來進行控制 至於模型頂點色是啥鬼呢? 其實就是每個模型的頂點 都會有一個顏色數據 這個數據是為了讓我們可以在模型上進行不同顏色的加工 然後利用我們的shader來計算頂點的數值 來獲得特殊的效果 例如:Unity的粒子系統 他的顏色變化以及透明 其實都是用頂點色去做控制 下圖為3dmax裡的頂點色(一般來說默認會是白色):
而頂點色跟一般的顏色一樣都是有RGBA的 我這邊進行的加工就是利用模型頂點色的G通道(也可以用其他通道)跟我們向外擴的數值進行相乘 當G的數值越大 線就會越粗 G越小線就越小 做法如下圖:
效果對比:
可以看出有使用頂點色控制描邊效果差蠻多的(這邊只有做臉部的對比) 另外值得一提的是 要改變頂點色 可以用3dmax 裡面的指令:VertexPaint 但是使用3dmax來做有個缺點 就是來回切換很麻煩 3dmax裡畫好再放入Unity看效果很不直觀 於是這邊我使用Unity商店裡的PolyBrush 使用他來繪製頂點色 成效很不錯

接著還要進行一項加工 因為描邊的效果一旦拉遠 很容易造成遠看描邊的效果太細 很近看又感覺太粗 很難抓出一個比例 於是這邊進行另一個加工:隨攝影機距離外描邊會放大縮小 那麼要如何實現呢? 原理很簡單 就是抓出攝影機位置與物體位置的直線距離(要注意是世界位置) 並且以這距離跟外描邊相乘即可 如下圖:
View Pos即攝影機的位置 減去物體位置後 使用Length去計算他們的直線距離 再使用clamp0-1讓他們數值不要無限大 之後再把數值remap到1-2之間 最後與外描邊相乘即可 這個效果我試出來效果還不錯 如果有錯誤也歡迎指正~ 到這邊第一個效果講解完畢~ 之後會講解漫反射以及這次的研究重點之一 多ramp通道上色效果
11
-
LV. 15
GP 265
3 樓 eddy21709
GP11 BP-
2.漫反射(diffuse):這部分基本上就是物體接收到光影所應該有的陰影(注意這不是物體間的投影) 一般而言最簡單的做法就是使用燈光方向物體法線方向進行點乘(dot) 但是卡通風格要把陰影作出明顯的區分 於是目前有2種做法可以區分陰影:
第一種作法:我上次有分享做法 這邊不贅述附上連結:https://forum.gamer.com.tw/Co.php?bsn=60602&sn=5078
第二種做法:使用ramp上色 這個做法可以做到控制陰影的顏色過渡 也是這一次最重要的效果的基礎 那要怎麼做呢? 在上面的連結有提到 Half Lambert 基本實踐就是 燈光方向物體法線方向進行點乘*0.5+0.5 得到較圓滑的陰影 下圖是節點:
接著重點來了 我們要使用一張2D的漸層圖 然後將這個2D漸層圖(一般會稱他為Ramp) 的UV 分別對應到暗面與亮面 意思就是計算出來的數值越小(暗面) 顏色會越往左邊的顏色移動 計算出來的數值越大(亮面) 會越往右邊的顏色移動 以下為節點與效果:
當然我們也可以改變Ramp的圖 來讓陰影變得比較硬邊
從這邊可以看到要作出卡通風格的陰影並沒有很難 但是目前有幾個麻煩的問題 控制不容易 往往要一直在PS裡面一直調整 那麼我們不如用一張灰階的Ramp圖 然後用一個顏色去上色 作法等於在PS裡面這樣做:
這邊在shaderforge裡面的做法是使用一個顏色與Ramp圖作blend(混合 並且選擇Screen濾色)
接著又出現一個問題 那就是在調顏色的時候透明度會不起作用 導致調整很不好調整 這時候就要拿出透明度計算公式出來了~ ColorAlp(帶透明的顏色) = Color(原顏色) * Color.a(原顏色的Alpha值) + 白色(1,1,1,1)*(1-Color.a) 下面為節點:
但是只有硬邊的話陰影層次不夠 於是乎進階的作法要來了 這也是崩壞3所實現的多通道Ramp上色 在使用這個做法之前要準備一張圖:
這張圖有什麼特點嗎? 我們主要看他的RGB通道的3張圖 其實就是3張不同的Ramp圖所組合的! 我們再分別使用RGB通道的各個Ramp 與3個顏色分別作混合 最後再全部相乘 就可以達成多Ramp通道上色 另外R通道的效果會是比較虛的陰影 G通道是很硬很實的陰影 B通道介於兩者之間 同時還能做到3個通道的上色顏色都不同 做出非常豐富的層次感! 以下為節點(有點複雜了...)
另外值得一提的是 我們可以藉由調整這張多通道Ramp圖的Tiling 來控制軟硬度 以下為軟硬之間的差別:
最後在三張近圖作比較 可以看出多Ramp上色所實現的層次感:
單Ramp(硬邊)
單Ramp(軟邊)
多Ramp通道上色
補充一下Ramp貼圖的做法:
1.R通道:先在圖層使用漸層工具刷出這樣的圖:

然後crtl+a -> crtl+c 接著開一個新的檔案 在該檔案的色板的紅色通道 crtl+v即可

接著G通道:同樣使用漸層工具 數值如圖(黑40 白60)
然後在圖的偏下方由上往下拉(記得換模式)

接著crtl+A->crtl+C 到新圖層的G通道crtl+v
B通道 把剛剛的圖 高斯模糊一下(濾鏡裡面有) 然後同樣複製到新圖層的B通道即可
最後如圖:
另外從以上也可以得知 對R通道而言越白R的數值就越高 越黑R的數值就越低 所以才會出現這樣的圖 這也就是shader的重要原理之一 把RGB轉換成數值再來計算大部分的事情

下一個是頭髮高光了(這個更複雜難懂 =   =)

11
-
LV. 15
GP 265
4 樓 eddy21709
GP15 BP-
3.頭髮高光:頭髮高光的部分可說是很複雜也可以說很簡單 因為他有一套很複雜的公式 這邊就以崩壞3給的資料來做:
相信看到這公式一定一堆問號 很難搞清楚這到底是啥東西 在這邊我也必須說我本身也不懂這公式的原理 但是我知道它裡面需要用到的變數及資料等等 這邊會一一講解

從第一行會看到 float T,V,L,exponent,strength 這5個變數
T的部分就是Tangent(切線) 那Tangent是什麼呢? 前面很常提到Normal(法線) Normal就是物體的每一個點他所朝向的方向 而Tangent就是跟Normal垂直的另一條線 下圖可以很清楚的表示:
V的部分就是攝影機的方向(Z方向) 也就是視角方向(View Dir.)
L的部分是燈光的方向(Light Dir.)
Tangemt , View Dir. , Light Dir. 在shaderforge裡面是可以直接獲取的
exponent是用來控制頭髮高光出現範圍用的一個數值 就我經驗而言大概0-1000之間差不多
strength很簡單 就是高光的強度而已
接著來看第一行程式碼: H = normalize(L+V); 這一行代表的是要求出Half Dir.(折半方向) 算法就是燈光方向+視角方向後進行歸一化  而我們貼心的shaderforge已經幫我們準備好了 所以連算都不必~
接著來看下一行:dotTH = dot(T,H); 這一行很簡單 就是Tangent與剛剛計算出來的Half Dir.進行點乘:
再看下一行: sinTH = sqrt(1.0-dotTH*dotTH); 這一行原理說實在我自己也不懂 就是拿我們剛剛計算出的dotTH做平方 再拿1去減 最後再做sqrt 會像下圖:
再看下一行:dirAtten = smoothstep(-1.0,0.0,dotTH);  smoothstep(平滑階梯函數)就我目前使用的經驗來看 這個函數跟step出來的效果有點像 都會出現比較實的效果 希望有大佬科普下><  下圖是節點:
最後dirAtten * pow(sinTH,exponent)*strength 把結果合併起來 其中pow是指數(幾次方的意思)
然後我們把最後的結果加上我們前面的效果裡 (為何是加不是乘 因為他是高光 用加的顏色會變亮 用乘的會變暗)
這時候出現問題了 感覺方向好像怪怪的 一般來說頭髮高光方向應該是
查找一下文章發現 問題在這邊:
原來是切線要改方向 那要如何改? 上圖有給方法 cross(Tangent,Normal)即可 所以要改成:
此時效果就變正常了 同時利用exponent控制高光的粗細 strength控制強度 調整好如下圖:
感覺還不錯~但是總少了一些東西 那我們來看看崩壞3所實現的效果:
看來他們2層高光 一個exponent數值較低 一個exponent數值較高 2個進行疊加做出高質量的頭髮高光 所以我們要把剛剛的節點全部複製過來 並且再給新的自訂義數值:
效果圖(這邊稍稍改一下Ramp的UV 讓陰影明顯一點):
但是又有2個問題點 第一:應該要給個顏色 方便控制高光的顏色 那麼我們只要分別乘不同的顏色即可 記得顏色要設置HDR(在顏色節點上面點右鍵即可看到)讓Post-Processing作Bloom
第二個問題:高頻高光的形狀不好看 於是我們讓他跟一張貼圖做相乘 這張貼圖是網上找來的
並且再調整他的tiling數值  目前節點及效果:
最後再給予一個偏移植 讓2層高光可以有不同的偏移效果
這邊我有參考這個做法 直接看節點吧(記得要做Normalize歸一化)~
至此頭髮高光的部分結束 另外也推薦會寫shader的人可以看這個 我的做法基本上都有參考他的做法 https://www.bilibili.com/video/av10590298/?p=3
最後附上圖源及參考資料:https://blog.csdn.net/OnafioO/article/details/79319480  
                                        https://www.jianshu.com/p/c6a94d3b64bc
                                        https://blog.csdn.net/sdqq1234/article/details/61437045
            

15
-
LV. 30
GP 1k
5 樓 ~XD hjdmeury
GP3 BP-

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

※ 引述《eddy21709 (捷 )》之銘言
> 這張圖有什麼特點嗎? 我們主要看他的RGB通道的3張圖 其實就是3張不同的Ramp圖所組合的! 我們再分別使用RGB通道的各個Ramp 與3個顏色分別作混合 最後再全部相乘 就可以達成多Ramp通道上色 另外R通道的效果會是比較虛的陰影 G通道是很硬很實的陰影 B通道介於兩者之間 同時還能做到3個通道的上色顏色都不同 做出非常豐富的層次感! 以下為節點(有點複雜了...)

我的理解是這張RGB Ramp圖的R和B是純一維
G就很特別,看起來很像是以V為參數,0為最硬1為最軟的軟硬混合圖
G的亮色末端硬度看起來似乎和B差不多
有空再好好研究一下這種貼圖的獨到之處

> 再看下一行: sinTH = sqrt(1.0-dotTH*dotTH); 這一行原理說實在我自己也不懂 就是拿我們剛剛計算出的dotTH做平方 再拿1去減 最後再做sqrt 會像下圖:

這一行高大上一點的說法就是三角恆等式
sin2 = 1 - cos2
sin = sqrt(1 - cos2)   --- dotTH = cosθ
sin = sqrt(1 - dotTH * dotTH)

直觀一點的說法大概是反相吧?XDXD

> 再看下一行:dirAtten = smoothstep(-1.0,0.0,dotTH);  smoothstep(平滑階梯函數)就我目前使用的經驗來看 這個函數跟step出來的效果有點像 都會出現比較實的效果 希望有大佬科普下><  下圖是節點:
不是大佬,不過資料是查得到的

smoothstep(edge0, edge1, x);
Parameters
edge0
Specifies the value of the lower edge of the Hermite function.
edge1
Specifies the value of the upper edge of the Hermite function.
x
Specifies the source value for interpolation.

行為等價於:
genType t;  /* Or genDType t; */
t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
return t * t * (3.0 - 2.0 * t);

將內積值加1然後開立方,用途是修飾高光使高光趨於完美


我用blender實作的簡易版效果



貪多嚼不爛,其他部分有空再研究


超棒的主題串,期待後續的解析^^
3
-
LV. 15
GP 298
6 樓 eddy21709
GP2 BP-
邊緣光部分:一般來說邊緣光會使用菲尼爾效果 菲尼爾是一個蠻萬用的效果 基本上隨便一個模型 給個菲尼爾再加個bloom就蠻好看的了~ 這邊簡單解釋一下菲尼爾的原理 先看一下圖:  基本上就是物體的邊緣光 計算原理也不算複雜 視角方向 dot 物體法線方向 取絕對值後反轉即可  
先把效果加上去看一下:
感覺範圍有點太大 那要如何控制範圍呢? 我們這邊要使用power(乘方)  可以思考一下 假設一個點他目前的數值是0.3讓他做0.3的10次方 那麼這個數值就會很接近0 越接近0我們加上去就越沒有影響 因此可以做到控制範圍 如下圖(FRange的數值給4的狀況):
然後我們目前的節點 就已經是Fresnel(菲尼爾)效果 並且可以找到此節點:
(此圖跟剛剛的效果是一樣的)

現在我們理解了菲尼爾的效果 我們要開始做一系列加工 這邊先再看一下崩壞3的做法:
在文章中出現3個關鍵 1.IBL環境貼圖  2.菲尼爾   3.AO Mask
何謂IBL貼圖? IBL貼圖是一個CubeTexture 也就是由6方體所組成的貼圖 先看貼圖:
可以想像這張圖是一個6面體 然後將模型包覆在這6面體當中 並且把顏色賦予上去 可以造成好像是被環境顏色所影響的感覺 而左邊的貼圖是實際攝影所拍出來的圖 然後再經過一連串計算 變成右邊的圖 來模擬在該環境下所對應的顏色 下圖是節點:
我們將剛剛做好的菲尼爾效果與現在的IBL貼圖進行相乘 其中節點名稱叫做Cubemap 其中要記得所對應的DIR代表方向 也就是要把它對應到物體的法線上 並且貼圖記得改成Cube屬性
至於此貼圖該如何製作 可以到這個網站去找圖:http://www.hdrlabs.com/sibl/archive.html
但是要進行轉換 這一部分我就不會了ORZ 不知道有沒有懂這一塊的高手?
2.菲尼爾目前是比較虛的效果 有的部份我們會希望它是比較硬比較實(看起來會比較平面) 於是我們要再進行加工 這時候就要使用一個很好用的節點:step節點 這邊看一下文檔:

簡單來說此節點 可以設定一個數值 大於這個數值就是1 小於就是0 可以很好的做到化虛為實  於是我們使用這個節點跟一個自定義的數值來調整範圍 然後乘以一個顏色(有設定HDR) 再乘一個自定義的數值控制強度:
從上圖可以感覺到效果還蠻不錯的 但是有2個問題:1.邊緣光應該是再受光面才會有 沒受光的部分有感覺有點怪 2.有的部分用原本的菲尼爾效果好像比較好看(絲襪部分)
1.因此我們要讓背光面沒有邊緣光 只要拿出我們的 物體法線 dot 燈光方向 (記得要改成Prostive)再把數值乘上去 就可以達到背光面沒有邊緣光的效果~
2.我們使用switch節點來控制我們要使用那一種風格的邊緣光(虛或實)  節點與目前效果如下:
3.AO貼圖:這個部份其實很簡單 把當前模型去烘焙一張AO貼圖 然後拿這張貼圖與效果相乘即可 但是因為我烘焙出來之後使用 我覺得效果不太好 於是我這邊沒有做這部分的效果 有興趣的人可以試試~

接著來到背光的邊緣光 這部分基本上全部都是參考一個大神的薩爾達的效果節點:https://ref.gamer.com.tw/redir.php?url=https%3A%2F%2Fconnect.unity.com%2Fp%2Fzelda-inspired-toon-shading-in-shadergraph
那我這邊先附上我自己修改的節點:
基本上主要也是使用菲尼爾效果 並且將燈光*-1 來模擬背光的效果 使用step做出比較硬的光 至於下面的部分 目前比較不了解 有空再來好好消化一下ORZ  當前效果(背光時):
可以看出邊緣光的效果還是蠻酷的~
2
-
LV. 30
GP 1k
7 樓 ~XD hjdmeury
GP1 BP-

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

※ 引述《eddy21709 (捷 )》之銘言

> 至於此貼圖該如何製作 可以到這個網站去找圖:http://www.hdrlabs.com/sibl/archive.html

那個網站提供的貼圖要用equirectangular來投影
用blender載入圖片貼到場景上再烘焙成cubemap就行了

還有我覺得要稍微想一想崩3這樣做的意圖
崩3的做法是︰環境貼圖 * fresnel * lightmap(AO?)

AO的作用是遮蔽不該反光的部位
fresnel的作用算是PBR的原理之一,做出合理的反光表現
以上兩者最終所要呈現的就是那個環境貼圖
他的表現其實更接近PBR一些,離NBR更遠一些
然後那個賽爾達荒野氣息的toon shader風格則更接近純粹的NBR
兩邊的取向其實是不一樣的
這幾點我覺得是可以好好思考的地方
看想要的效果到底是更偏向於哪一邊

> 接著來到背光的邊緣光 這部分基本上全部都是參考一個大神的薩爾達的效果節點:https://ref.gamer.com.tw/redir.php?url=https%3A%2F%2Fconnect.unity.com%2Fp%2Fzelda-inspired-toon-shading-in-shadergraph
> 基本上主要也是使用菲尼爾效果 並且將燈光*-1 來模擬背光的效果 使用step做出比較硬的光 至於下面的部分 目前比較不了解 有空再來好好消化一下ORZ  當前效果(背光時):

下圖是我參考賽爾達風格node用blender做出來的部分實現
賽爾達風格刻意增加背光時的緣光,但又不是所有時候都有明顯的緣光
效果個人覺得還不錯

1
-
LV. 15
GP 305
8 樓 eddy21709
GP5 BP-
接下來講解面部補光+物體投影

首先先講物體投影的部分:
經過我們前面的效果做下來之後會發現有一個很重要的效果沒有出來 那就是物體之間的投影 那什麼是物體之間的投影呢? 簡單舉例來說就是頭髮應該要有陰影投影的臉上 這樣才會比較有真實感 很多動漫都有畫出頭髮的投影 被物體擋住的陰影等等 會顯得更加生動 但是~ 我們前面所做出來的多ramp上色 它的原理是物體的面向dot燈光的面向 就算被物體遮擋住還是不會有效果~ 我們先看目前效果圖:
很明顯的目前就只有物體自己的陰影 而沒有投影 那要如何製作出物體的投影呢?
這邊就要使用非常著名的shadowmap來計算渲染陰影 它的原理我做一個概略的解釋 首先我們把燈光當作我們的眼睛 我們眼睛所不能看到物體的部分(例如頭髮擋住臉的部分)就渲染上陰影即可 但是如果我們把所有的陰影的渲染上去 對效能很不友好 因此會使用屏幕空間 也就是攝影機的畫面裡才渲染陰影  這邊附上講解 有興趣的大大們可以深入研究:
如果有看過上面的文章 會發現要實現他好像很困難... 但是~~~我們有強大的Unity!!!  Unity裡面就已經有內建的shadowmap可以給我們使用了! 那要如何使用呢? 首先我們先看一下當前的場景
很明顯可以看到地板有接受陰影 為什麼我們的模型沒有? 於是我們先看一下物體的屬性:
左邊是地板的屬性 Cast shadows就是 是否接受陰影 但是明顯看到我們自己的模型也有打開這選項 但是卻不起作用 於是我們看材質 地板的材質是standard 有就是說問題是出在材質上面! Unity預設的standard材質其實是一個高級的材質 他有計算很多真實光照的效果 這也是為何一般會不建議使用這個材質 因為他是基於物理渲染的效果(PBR) 而我們要做的是非真實感渲染(NBR) 於是我們把地板材質換個試試:
我們把材質換成最乾淨的Unlit 很明顯發現陰影不見了 爾且場景整個變亮了 這是為什麼呢? 因為Unlit就是把貼圖上的顏色貼上去 任何光影都不起作用 之前的材質因為有被燈光影響 因此如果燈光的強度較弱 就會比較暗 並且會有區域性的不同 簡單說就是Unlit不受光
而我們目前所做的效果其實就是以Unlit為基礎進行變化的 前面解釋了一大堆 終於要告訴大家要如何獲取投影 這邊要獲取一個資訊: Light Attenuation 也就是燈光的衰減程度
他會計算前面提到的以燈光為眼睛所看到的物體 看的越清楚的就越接近1 越看不到的就越接近0 那麼我們使用此節點與我們效果相乘看看效果:
這邊我稍微改變一下燈光方向 可以看到燈光的方向是正上方大概45度左右照下來的效果 明顯可以看到 披風的部份以及頭髮已經有效果出現了 但是臉部的投影卻沒有 這是因為我們有數值沒有調整到
這邊簡單介紹比較重要的參數(這個地方在場景的主燈光的屬性裡有)
1.Shadow Type: 這邊有2種可以選 基本上我們就選Soft Shadows(軟陰影)效果會比較好 但是相對耗效能(應該是)
2.Strength: 就是陰影強度
3.Resolution: 陰影的品質 看需求要低或高 我這邊調最高
4.Bias: 這部分我目前的感覺是採樣陰影的遠近 但是看文章是斜度 希望有大大可以補充~ 把這個數值調低就會出現頭髮投影的臉上的陰影了~
但是~陰影加上去看起來好詭異= = 這是為什麼呢? 我們先看一下我老婆的圖:
上圖是3D所做出來的(之後我可能會考慮做做看這風格的效果) 可以看出來他的陰影其實是有顏色的 並且陰影是實的 不是前面那種虛的陰影 如果可以控制強度與範圍就再好不過 因此接下來要開始實踐這3種效果來控制陰影

那麼我們開始思考 現在的Light Attenuation(燈光衰減) 他的數值基本上是0~1之間 因此會有過渡也就是說過於寫實 我們要將它變成卡通風格這種比較實的效果 也就是說只有1或0 那麼有前面的經驗就很簡單了 做法跟邊緣光的改進基本上大同小異 使用step節點 自定義一個數值(假設0.5) 大於0.5的數值都是1 小於0.5都為0 就可以做到畫虛為實的效果! 以下為節點:
呃....感覺更嚇人了 因為顏色無法控制 我直接把顏色乘上去還是沒有辦法解決 因此這邊要用一個比較複雜的作法
首先我們先把經過step計算過後的分成2塊 一個會是像上圖那樣全黑我們叫他陰影黑 一個會是全白我們叫他正常白(因為只有1或0)  因為陰影黑他的數值都是0 因此無法改變它的顏色(任何色乘0都是0) 那麼我們用1減去陰影黑不就OK了嗎? 於是這邊就要使用節點One Minus
現在我們陰影黑的數值已經變成1了 我就可以使用一個顏色跟他做相乘 來做到改變陰影黑的顏色 並且把我們原本的顏色乘陰影黑原本的數值 最後加起來
恩...看起來還是很奇怪 因為我們的陰影沒有跟貼圖以及多ramp的效果合併 於是我們要再進行一波加工
這邊簡單講解一下 我們將我們原本的主顏色 也就是貼圖+多Ramp上色的最終效果 分成2個區塊 第一個區塊我們乘上陰影黑原本的數值(沒經過One Minus) 也就會變成前面那樣 陰影的部分全黑 第二個區塊 就是陰影黑經過One Minus之後 乘上一個陰影顏色 最後再把2個區塊相加 其實原理跟https://forum.gamer.com.tw/Co.php?bsn=60602&sn=5078是一樣的 都是分成2個區塊最後相加 最後效果如下:
從上圖可以明顯的看到加入物體投影的陰影(好饒口)之後 效果也提升許多 接著快速介紹一下面部補光:
還是同樣拿這張圖來做講解 但是何謂面部補光? 這邊又要提到物體法線的問題了 因為我們模型的臉部 當遇到光照之後 他的陰影呈現 並不會是像動漫那樣的陰影 因為我們為了美觀 2D繪師在畫陰影的部分會為了美觀而刻意去進行改變 但在現實上陰影卻不會是這樣呈現 但是動漫角色最重要的是在臉部 於是我們要進行一項加工 也就是改變模型的法線  那要如何改變呢?
經過我幾次的嘗試 我最後使用Blender這項很棒的3D建模工具 他可以將我們模型的法線方向 轉換成幾何體的法線方向 就可以做到面部補光的效果 順帶一提的是Maya也可以做到 3dmax貌似是無法 他只能一條一條的改.....
並且來看一下處理前後的效果差距吧!
以上面部補光+物體投影陰影完畢!
5
-
未登入的勇者,要加入 10 樓的討論嗎?
板務人員:

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


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

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