創作內容

79 GP

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

作者：樂小呈│2021-10-24 22:24:26│巴幣：3,446│人氣：1439
我愛圖學！我愛圖學！

參考資料【密技】教你做出香香的 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

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

補充資料


晚安～
喜歡79 收藏 20 引用 留言 推上首頁 檢舉
引用網址：https://home.gamer.com.tw/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
S彩S：
恭喜小呈 超狂的（（艸

10-25 12:23

樂小呈：
還好啦 >////<10-25 13:06
我要留言提醒：您尚未登入，請先登入再留言

79喜歡★angus945 可決定是否刪除您的留言，請勿發表違反站規文字。

前一篇：【專案日誌】山鴉行動 泛... 後一篇：【專案】山鴉行動 音效和...

追蹤私訊切換新版閱覽

作品資料夾

--- 重點文章 --- (0)
└學習、開發資源分享 (8)
└發佈的遊戲 (4)
└學習和教育 (2)
└關於樂小呈 (9)

--- 學習日誌 -- (0)
└綜合學習 (7)
└遊戲和程式 (63)
└數學和圖學 (56)
└網頁和前端 (25)
└技術和美術 (1)

--- 學習筆記 --- (0)
└零碎筆記 (27)
└複雜筆記 (5)

--- 美術相關 --- (0)
└畫圖大雜燴 (24)
└建模大雜燴 (23)

--- 專案相關 --- (1)
└山鴉行動 (150)
└投擲地牢 (23)
└學習專案大雜燴 (97)

--- 教學相關 --- (0)
└距離場數學函數 (22)
└遊戲程式教學 (1)
└著色器的教學 (1)
└分享一些東西 (1)
└我捨不得刪，別看 (8)

--- 其他文章 --- (0)
└近況和閒聊 (60)
└回顧和歷程 (26)
└遊戲和心得 (5)
└寫到一半的 (2)
└蛤 (1)

遊記 (1)

不知道分哪 (1)

未分類 (10)

wu19880217 給 大家：
《天界新語．劍石錄》更新～歡迎到小屋閱覽～看更多我要大聲說昨天10:40


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

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