卡通渲染Shader By Amplify Shader Editor part.1

寫在前面

由於興趣及個人規劃的關係，最近開始學習unity的shader，第一個想做出來的就是TOON(卡通) Shader了。

為了方便日後查詢資料及避免自己忘掉，所以把當初製作TOON Shader時相關的技術紀錄下來，使用的是Unity的外掛Amplify Shader Editor。

先列出製作時的參考資料
Recreating a Zelda-inspired toon shading in Shader Graph
Toon Shader
unity-卡通風格角色製作心得分享(shadergraph)
日式卡通渲染的效果的unity實現
3D日式卡通人物渲染的經驗分享
Toony Colors Pro 2

再來放個最終的效果圖

好了，可以開始進入正題了。




一、什麼是TOON(卡通) Shader?

先來歸納Toon Shader有什麼特色，不外乎有以下幾點：
1.銳利且明確的陰影分界
2.明顯的高光
3.外描邊
Toon Shader的特色

其餘的例如邊光(Rim)、頭髮高光、3S、等等的，都是一些額外加分用的效果了。

二、漫反射

漫反射是光線照射在物體表面後向四周反射的現象，用在這裡的話當然指的就是物體的陰影了。
在Unity裡面已經有預設好的光線計算公式，如果沒有特別指定的話，原則是都會去調用內建的光線公式。但內建的公式是用於模擬真實世界的光線的，既然目標是製作出卡通風格的話，那麼內建的公式顯然是不能使用的。

所以第一步，我們要停用內建的光線公式。


新增一個新的shader，將Light Model換成自定義光線(Custom Lighting)，確認右邊輸出框變成Custom Lighting模式。

接著來個基礎的光線公式：燈光方向(Light Dir)與物體法線方向(World Normal)互相點乘(dot)。
該公式基於蘭伯特(Lambert)光照模型加以簡化來的，這邊就不多提了(主要是我自己也搞不懂XD)。


我們的球體已經有影子，不過好像不太對，前面提到卡通Shader要的是明確的陰影，所以接下來進一步把影子銳利化。

這邊的作法有2種。

一是利用step運算式，把本來會隨著光線逐步遞增或遞減的數值加以規範，強制他只能以0或1的數值輸出。

二是利用(Ramp)漸層圖，來告訴Shader當計算出的漫反射數值小的時候使用左邊的顏色，數值大的時候使用右邊的顏色。

漸層圖(Ramp)

這邊我使用了第一種方法，理由純粹是我懶得想要修改陰影還得開PhotoShop。XD

加了step後，陰影區分出來了，但是怎麼黑成這樣呢?
理由很簡單，還記得上面說step會把數值強制規劃成0與1嗎?數值0在顏色表示是全黑色，既然我們把陰影的輸出強制歸0了，那麼影子會變全黑也是很正常的。

所以這時有人想出方法了，將計算出來的數值乘(multiply)0.5再加上(add)0.5，這就是半蘭伯特光照模型(Half Lambert)。

這樣基本上影子的部分就算完成了，接著就是根據自己的需求增加需要的功能。

為了能夠控制球體顏色，我加入了color節點。將step換成了smoothstep，理由是雖然卡通Shader要有明確的光影邊界，但太過銳利的光影也不太好，smoothstep可以將這個邊界給模糊掉。

為了控制陰影顏色，加入了另一個color來控制，並用濾色(Screen)模式覆蓋上去。

這邊應該會注意到上面的Half Lambert的算式被拿掉了，由於我加了顏色上去，因此光影強度也可以用顏色來控制了，這樣原本的算式就不需要了。

這樣整個漫反射的部分就差不多了。

剩下的下一篇再繼續吧.......


(希望我寫得完......)

                                                                                                                    >>>>>>>>>>to be continued

留言

張貼留言

這個網誌中的熱門文章

卡通渲染Shader By Amplify Shader Editor part.3

圖片
五、光顏色、光強度、光衰弱 上一篇我們使用了 Lambert光照模型，得到了Toon Shader基礎的影子，同時也提到了這個Shader是有瑕疵存在的。 由於 Lambert光照模型只用來計算的方向性，但在一個遊戲場景裡面，光絕對不可能只有方向這個要素。最基本的來說，一般光線同時還具有顏色、強度及衰弱這3個要素。 光顏色跟光強度就不用提了，而光衰弱除了紀錄了點光和投射光的強弱訊息外，還影響了其他物件投射在該物體上影子的有無。 所以為了解決這個問題，我們得再從ASE導入光顏色及光衰弱這2個節點。 在ASE裡，光顏色和光衰弱都包含了光強度的資訊。 把這2個節點插入之前的漫反射的區塊內，為了讓畫面單純一點，先把Outline跟 Specular拿掉了。 那麼馬上就可以來看看效果如何。 看樣子該有的效果都出現了，那麼就可以把 Specular加回去了，但再加回去之前我希望 Specular也可以受到投射影子的影響。因此同樣要把光衰弱節點放進去 Specular的區塊內。 在 Specular裡面我沒有把插入光顏色的節點，是因為我認為高光不需要受到環境光的影響，當然如果認為有其必要性，只要在最後乘上光顏色的節點就好了。 到這裡為止，其實已經非常符合一般Toon Shader的使用需求了，只要加上邊光等等的效果其實就有模有樣了。如果我們還想再更進一步呢?例如場景裡還有除了定向光( Directional Light )以外的其他光源呢? 我們先來看一下，目前的節點碰上了點光源( Point Light) 會發生什麼事。 為什麼會這樣子?主要原因有2個： 1. 在上面的節點中我們將光衰弱接在 Lambert之後，smoothstep之前，step節點會把我們設定的數值為基準將數據只區分成0與1來輸出，所以就算光衰弱節點帶出了其他的訊息，經過step後也沒有意義了。 那為什麼上面要這麼接呢?因為上面的案例中，我們只用到了定向光 ( Directional Light ) ，定向光不會衰減，永遠只有固定的強度，我們用了光衰弱只為了偵測該物體有沒有受到其他投射物的影子所影響，有影響就是0沒影響就是1，無論有沒有...
閱讀完整內容

卡通渲染Shader By Amplify Shader Editor part.2

圖片
接續上篇..... 三、高光(Specular) 當完成漫反射陰影後，接下來就繼續高光的部分，那麼物體究竟是如何產生高光呢? 在光線射向物體時，由於物體通常不是完全光滑的表面，因此反射出來的光線會四處散射，這部份便是上篇提到的蘭伯特(Lambert)光照模型，但也是有部分光線會呈鏡向反射，當這個鏡向反射進入我們的眼睛後，就會形成高光。 所以在這邊Phong光照模型就登場了。 Phong光照模型屬於理論模型，他在Lambert光照模型的基礎上只考慮了物體對方向光的鏡面反射作用。 不過這邊就不談複雜的算式理論了，雖然前面講了一大串，但實際上Phong光照模型幾乎沒什麼再使用了，因為它耗費的運算資源相對較大。 於是效果更好，占用資源更少的 Blinn-Phong光照模型便出現了。 在這邊直接把算式列出來： Normalize (View Dir+ World Space Light Dir) dot World Normal 視線方向+光線方向 經過 標準化( Normalize) 後再 點乘(dot )物體法線向量( World Normal) 標準化的理由是預防參數產生負值 所以我們有一個高光了，但是它似乎太大了，所以我們需要縮小它，這邊使用的Remap節點來完成這個任務。 縮是縮小了，但高光應該要是銳利的光源才對啊，所以這邊又要請出上篇的好幫手：step節點了。 這樣我們就有一個基礎的高光了。 之後就是依照自己的需求客製化，例如加入數值控制高光範圍，加上顏色節點來指定顏色，不希望它這麼銳利化把step換成smoothstep之類的。 Tip. 在Amplify Shader Editor其實內建了許多現成的節點可供使用，尤其是比較常用跟有名的算式幾乎都內建了，例如這節提到的 Blinn-Phong光照模型便是其中之一。所以我們可以輕易地用單個節點完成複雜的運算。 例如就像這樣 四、描邊(Outline) 描邊在實作上有很多方法，舉一個最常見的做法便是將原始模型複製一個出來，稍微放大一點後再將它反轉，最後填上一個單色。 這邊要列出實際的算式跟做法的話，實在有點複雜。主要是因為在Shade...
閱讀完整內容