創作內容

80 GP

[達人專欄] 【學習日誌】自己寫一個 One last kiss 的風格渲染 10/24

作者：樂小呈│2021-10-24 22:24:26│巴幣：3,546│人氣：1506

我愛圖學！我愛圖學！

參考資料【密技】教你做出香香的 One last kiss 專輯風濾鏡

之前在場外看到這篇文後我其實就想做了，但備審卡著我沒空研究。剛好備審寄完，專案堆的東西也清完一部分了，趁有一點點空閒，來研究被我放置了兩個月的 Shader。

專案原始碼和其他補充參考附在最下面。哭阿結果這篇也沒辦法加進備審了，希望審特選的教授會來翻我小屋QAQ

流量轟炸警告，照慣例先上成果～

(gif 會太大，所以我還是放影片

)

我用了兩種方式來實現這個效果。第一是邊緣檢測，用卷積矩陣做判斷，透過周圍像素的顏色、深度、方向差距來判斷物體邊緣，花了快半天；第二種則是參考資料中的線稿提取，透過清除色調和色塊膨脹的方式提取出線條，花幾個小時搞懂文章說到的那些濾鏡原理就成功了，而且 code 和邊緣檢測相比短超多的

其實我原本只打算做邊緣檢測的，因為我以為線稿提取只有賽路路的畫風會有效，但事實上任何圖像都行，然後複雜度和計算成本更低...效果也更好看。

不廢話，來解說原理和算法吧～

邊緣檢測 Edge Detection
去年我就有研究過邊緣檢測的算法了，但那時還沒完全懂。ㄅ過這一年花不少時間慢慢消化後總算弄清楚原理了。透過一個 3x3 的九宮格卷積矩陣 (Kernel Convolution) 進行計算，每個格子都有各自的權重，強度根據要計算的目標做調整。

邊緣檢測的 Kernel 叫做索伯算子 (Sobel operator)，水平的檢測長這樣，垂直的就是轉 90 度。

把原始圖片輸入進去，產生色差的部份就是不同色塊的邊緣。

單純色差產生的邊緣還不夠，有些相同顏色的交界會檢測不出來，所以我也用 Depth Buffer 的深度差和 Normal Buffer 法線方向差距檢測邊緣。

深度差就是相鄰像素的深度相減，基本上會產生生度差距就代表一定是物體邊緣。

方向差距就是和相鄰的像素法線做內積投影的結果數值。

因為各自算法的結果有些差異，所以最後要再把三種數值乘上權重，並用 Pow 把多餘的噪點線條抹除，完成混和的邊緣檢測。

做到這裡就完成線條的部份了，接下來就是漸層上色，為了不搞太複雜我就用兩種顏色的插值而已。基本上就是把畫面 uv 當插值參考，如果要旋轉的話，弄出一個旋轉角度的向量，把 UV 投影上去就行了，拿投影結果當插值權重。

接著就把漸層顏色混上線條，剩下部份填上背景顏色。不過單純拿白色當背景有點刺眼，所以我去素材庫找了一張紙質的 Texture 當作背景，也提昇一點畫面質感。

邊緣檢測的成果

線稿提取 Line Capture
依照參考資料中的作法提取出現條，稱呼成線稿提取主要是我查資料的時候，其他人也是這樣叫的，所以就這樣吧

首先是去除飽和度和負片效果。去飽和，就是把畫面轉成灰階的意思，可以直接 RGB 值相加除三，至於負片就是 1 - RGB。

加亮顏色

參考教學中有這一步驟，但因為計算方法有些不同，在這裡沒有效我就跳過了。

濾鏡最小值
我花最多時間研究的步驟，這個濾鏡的效果是取周圍像素中的最小數值，會產生類似塗抹的效果，並讓色塊稍微膨脹。

然後！下一步是重點，處理過程主要就是從這步驟取出線條的，但因為 PS 裡濾鏡效果會自動運算的關係，所以我花了一點時間思考過程中發生的事。因為濾鏡本身的過濾算法，加上最小值的膨脹效果，如果用濾鏡把膨脹後的圖過濾掉原始圖片的話，就會剩下多餘膨脹出來的部份，取得線條。

而實現方式就只需要直接相減而已，搭拉～

但因為兩個值還是很接近，所以減出來的線條強度會很弱，要再另外乘上增強強度。

然後就是上色！

成果

沒有 PhotoShop 怎麼辦？自己寫一個畫面處理重現就好了 :P

最終結果我覺得比起一開始的邊緣檢測，線稿提取大勝，不只程式短很多，效果也更勝一籌。
邊緣檢測的線條太粗了，而且過程中產生的噪點線條很難看，用 pow 稀釋掉結果又讓線條感覺太銳利。

但線稿提取就沒這問題，透過色塊膨脹的方法取得線條，再用乘的增強強度，造點在遠處還產生意料之外的效果，不需要多修正。老實說我做到最後才想通原理，最小值那裡查不少資料才搞懂，之前完全沒想到能用這種方始提取線條，學到了學到了。

就醬，能量又回復了不少，感謝偉大的計算機圖形學

原始檔我上傳到這裡，對 code 有興趣或想自己在編輯器裡走走都可以載來玩，然後我把 FPS Controller 寫的好一點了，不然上次那個手感真的有夠糟www
https://github.com/angus945/One-last-kiss-style-Rendering

參考資料

主要參考【密技】教你做出香香的 One last kiss 專輯風濾鏡

卷積矩陣原理解說 https://www.youtube.com/watch?v=C_zFhWdM4ic

邊緣檢測原理解說 https://www.youtube.com/watch?v=uihBwtPIBxM

補充資料

五十六大大的補充，關於去飽和以及加亮顏色

放肆大大的補充，在 HDRP 中實現效果

晚安～

喜歡 80 收藏 20 引用留言推上首頁檢舉

引用網址：http://www.jamesdambrosio.com/TrackBack.php?sn=5298650
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：Unity|Shader|程式|著色器|程式設計

Unity C# | 狀態模式(State Diagram)

Unity C# | 建構式(constructor)

Unity C# | Design Pattern

Unity C# | UGUI 的介紹與程式控制座標

快樂學 Raymarching 從不會到還是不會

留言共 15 篇留言

舒潔艾拉：
太佬了吧...

10-24 22:38

樂小呈：
嘻嘻[e7]10-24 23:11

海苔：
很厲害耶
不曉得有沒興趣放Asset Store來賣我想買來用[e12]
另外跪求HDRP/URP的版本(不要亂許願)

10-24 23:15

樂小呈：
沒打算賣，原始碼都在這裡，可以自己拿 XD10-25 09:34

樂小呈：
https://github.com/angus945/One-last-kiss-style-Rendering10-25 09:34

樂小呈：
HDRP 和 URP 可能不行，它們渲染管線和 SRP 有點差別，暫時沒空研究移植方法 :P10-25 10:16

樂小呈：
講錯，是和 build in 有些差別10-25 11:11

樂小呈：
你們覺得這種類型的文適合掛達人嗎，還在斟酌中[e15]

10-24 23:18

Hikari：
看起來超不錯的！

10-24 23:21

樂小呈：
之前看到這漂亮的畫風就想嘗試了[e16]10-25 09:37

粉君：
太佬了[e16]

10-24 23:46

樂小呈：
誒嘿[e7]10-25 09:38

魔化鬼鬼：
酷耶

10-24 23:50

樂小呈：
感謝分享教學的那位大佬[e19]10-25 09:40

NA-23：
佬耶可以申請看看日誌達人ㄌ過ㄉ機會很大

10-25 00:34

樂小呈：
其實很早就有了，只是沒有在這種文掛過 :P10-25 09:41

在意你就輸了：
佬

10-25 01:31

樂小呈：
嘻嘻[e7]10-25 09:41

我哪知：
太神...

10-25 02:44

樂小呈：
ㄋ是瑟圖大神[e5]10-25 09:41

kiwi(薇薇安)：
是達人專欄！恭喜耶！！

10-25 07:51

樂小呈：
考慮之後我決定還是掛達人 [e1]10-25 09:42

彼得哈特利：
佬...恭喜上達人 [e11]

10-25 08:13

樂小呈：
很早就拿到達人了拉，只是沒什麼在掛而已ww10-25 09:42

烏鴉：
這是把影像處理的思路給代碼化了嗎
能看到不同專業的解決方式真有趣w

10-25 11:05

樂小呈：
應該說影像處理的運作過程本身就是程式碼運算的，只是大多編輯軟體都吧他們隱藏起來10-25 11:12

樂小呈：
所以我應該算是根據處理過程的思路，反推出隱藏的代碼才對 :D10-25 11:12

矮鵝：
上達人真神耶~~eva的設計都很潮很有巧思，識貨喔~~

10-25 11:14

樂小呈：
辣個質感真的超漂亮[e16]10-25 11:16

海苔：
謝謝分享～我有抓下來用Unity開來玩了一下
雖然大概知道就跟PS裡抓線稿的原理類似，不過叫我去看Shader程式碼算法我就想投降了，所以都在找別人寫好的…
可惜我問好幾個有研究寫Shader的人都說SRP和HDRP/URP差太多，結果想撿現成的也有難度
雖說我當初把自己的專案切到URP是為了玩Shader Graph就是了…(←只會看圖亂拉線的人)

10-25 11:30

樂小呈：
Shader 門檻真的不低，用數字算顏色超反直覺的，要花不少時間習慣10-25 11:36

樂小呈：
阿然後，SRP 就是 HDRP/URP 的統稱，我剛剛也搞錯了 XD10-25 11:36

樂小呈：
預設的是 build-in ，就是原始檔的專案10-25 11:37

樂小呈：
看圖拉線也不是不行，原理都通的，只是操作度就沒有自己寫來的高[e19]10-25 11:37