最近有在研究怎麼做出效果出眾的卡通外描邊 也算是有研究出一些東西 這邊就來分享一下吧~
首先說到卡通外描邊有非常多種作法 這篇文章有作挺不錯的解析: https://blog.csdn.net/candycat1992/article/details/45577749 而其中最常見的2種作法 不外乎就是模型擠出法線或者後處理描邊 今天會使用2個描邊的方式去製作 也其他想法或者錯誤也歡迎指正
一.vertex normal(模型擠出法線的做法)
這個作法是最常見 效能最好的做法 需要2個Pass(2次繪製的意思) 第一次先將模型往外擠出 並且將正面剃除並上色 接著在畫原模型 這是最快速的作法 之前我有分享過原理以及在新管線怎麼使用 這邊附上連結 有興趣的朋友可以看過一遍
https://forum.gamer.com.tw/Co.php?bsn=60602&sn=5376&subbsn=5&bPage=0(shaderforge外描邊作法)
這邊也附上一下當前效果(沒有描邊):
(使用一般描邊):![]()
但是使用一般描邊會有遠近問題 因此之前的文章有提過用攝影機的遠近去作計算 但是這次有更好的做法 那就是使用屏幕空間去做計算 這樣不管遠近 外描邊的大小就不會有問題了~ 詳細作法就是把外描邊的程式碼改一改即可 這邊附上程式碼 ![]()
如此一來就不會因為遠近造成描邊大小不一致了
原本外描邊
基於屏幕空間外描邊:
不過目前可以看到旁邊的正方形 會有破裂的問題 那是因為正方體的每個頂點的法線不一致 我們擠出模型的計算是使用法線去作的 所以會出現破裂 那麼該如何解決此問題 我們可以先看max裡面模型的法線:![]()
從圖中可以看到每一個頂點的法線方向都不同 那麼我們只要把每一個頂點都變一致即可 作法如圖:
接著看一下對比 上面的方形為處理過法線 下面的為原本的(明顯看到破裂被改善了):
但是又有一個比較大的問題 有的部分我們希望有邊線 但是卻沒有 先看圖:![]()
右邊模型的鈕扣明顯沒有邊線 左邊模型鈕扣的邊線也很怪 為何會這樣呢? 主要原因是這個作法是擠出法線 但是鈕扣所擠出的法線 只要正面都會被剃除 因此在很多角度會看不到邊線 甚至我今天想要在裙子的部分加邊線 也沒有辦法 只能用畫的或者使用另一個要介紹的作法:後處理描邊
二.後處理描邊
後處理描邊的概念基本上就是類似後製 比較常見的做法就是 SobelFilter 利用邊緣檢測來畫邊線 這邊我只講原理 詳細的計算方式請看其他文章: https://blog.csdn.net/e295166319/article/details/79021317
簡單來說就是去檢測相近的像素顏色是否相同 如果不相同則畫上邊線 相同則不做處理 比較高深的還會用到深度去檢測來做到描邊 缺點就是開銷挺大的 並且很不可控 因此一般來說要作角色的外描邊還是會用第一種作法 但是這邊可以看這張圖(CGWorld的內容) 這是二之國的做法 ![]()
他的做法就是藉由頂點色 來讓unity知道哪邊需要畫邊線 前面有提到SobelFilter是檢測像素之間的顏色作比較後再畫上描邊 那麼如果我們今天把模型的部分刷上頂點色 接著給SobelFilter去做檢測會變怎麼樣呢? 這邊可以看一下效果
畫上頂點色+後處理描邊:
後處理描邊:
可以明顯看到一但有刷上頂點色 SobelFilter 會幫你檢測並且加上外描邊 因此我們只要在想要的地方刷上頂點色 讓SobelFilter 檢測再把結果畫到我們的原本畫面上即可 因此接著要介紹unity新管線的特殊功能:RenderFeature
三:RenderFeature
RenderFeature這個功能是在Unity2019.1之後新推出的功能 詳細的功能可以看影片 或者去影片的連結下載demo來使用:
不論在LWRP或者URP都可以使用 先簡單介紹一下怎麼使用~
首先我們先把模型加上外描邊 我們要先創建一個Forward Renderer的文件 直接右鍵在rendering裡面可以看到 ![]()
接著會看到這樣的文件 並選擇+新增一個新的pass(要選擇render object) ![]()
然後我們創建一個材質球 並且使用描邊的shader 在把這個材質球放入materials的選項裡面 並且還要在設置一個Layer來過濾你要加上描邊的物件:
設置好之後我們將這個檔案指定給我們的piplepline ![]()
這時候我們把模型設置好對應的Layer 並且在我們的主攝影機裡面加入這個renderdata就會出現外描邊了!![]()
![]()
這是此時的效果(使用屏幕空間外描邊):![]()
現在我們想要把前面說的後處理shader也加入 那麼我們需要一個新的攝影機 並且使用只畫vertex color的shader 將所照到的角色使用vertex color畫一遍 vertex color的shader用shadergraph很簡單就可以連出來 並且我們只使用R通道來進行區分 shader圖![]()
vertex color camera所照到的圖:![]()
接著我們將這個camera所照到的圖轉成一張rendertexture(我邊我是轉成暫存的圖) 然後改寫SobelFliter的shader 讓他可以獲取這張vertex color的圖去作比對 再把邊線加到我們的圖上
VCTex就是我們上面所獲取的vertexcolor的圖(這張圖是rendertexture) 並且再增加一個新renderpass如圖:
但是要使用這個blit功能 必須要去官方的範例裡面把腳本拿出來使用 前面有給一個官方範例 那邊就可以獲取這些:![]()
有了這些腳本就可以輕鬆製作後處理功能了~ 我們把使用SobelFliter的材質放入並且改變一下渲染順序 就大功告成了!
四.總結
外描邊有2種比較常用的方案 第1種是用在模型上的擠出法線 效率好又很可控 但是要處理的好必須要加很多工 例如:刷頂點色控制粗細 模型的頂點法線要一致避免破裂 使用屏幕空間的計算來解決遠近問題等等
第2種方式是使用後處理 藉由像素的比對如果顏色值差很多就畫邊線 優點:適合大量物件(例如整個場景) 缺點:很不可控且效能不太好
使用頂點色的比對去畫描邊:先在模型上刷上頂點色來區分哪邊需要邊線 接著使用另一台攝影機獲取只有頂點色的圖 再把該圖傳入SobelFliter去做檢測把邊線畫上 如此一來就可以解決單靠法線擠出有些地方沒有邊線的問題了~ 並且在最後作一個比對:
1.只有原模型:
2.原模型加上屏幕空間描邊:![]()
3.後處理描邊:![]()
4.原模型+屏幕描邊+後處理描邊:
以上就是最近研究的一些東西 之後有機會的話會再分享一些卡通渲染的細節 以及怎麼在新管線達到 如果有任何問題或者錯誤指正等等歡迎留言發問
