創作內容

72 GP

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

作者:is樂小呈│2021-10-24 22:24:26│巴幣:3,432│人氣:699
我愛圖學!我愛圖學!

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

補充資料


晚安~
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5298650
All rights reserved. 版權所有,保留一切權利

相關創作

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

留言共 15 篇留言

艾拉廚
太佬了吧...

10-24 22:38

is樂小呈
嘻嘻[e7]10-24 23:11
果香海苔
很厲害耶
不曉得有沒興趣放Asset Store來賣 我想買來用[e12]
另外跪求HDRP/URP的版本(不要亂許願)

10-24 23:15

is樂小呈
沒打算賣,原始碼都在這裡,可以自己拿 XD10-25 09:34
is樂小呈
https://github.com/angus945/One-last-kiss-style-Rendering10-25 09:34
is樂小呈
HDRP 和 URP 可能不行,它們渲染管線和 SRP 有點差別,暫時沒空研究移植方法 :P10-25 10:16
is樂小呈
講錯,是和 build in 有些差別10-25 11:11
is樂小呈
你們覺得這種類型的文適合掛達人嗎,還在斟酌中[e15]

10-24 23:18

Hikari Yun
看起來超不錯的!

10-24 23:21

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

10-24 23:46

is樂小呈
诶嘿[e7]10-25 09:38
魔化鬼鬼
酷耶

10-24 23:50

is樂小呈
感謝分享教學的那位大佬[e19]10-25 09:40
NA-23
佬耶 可以申請看看日誌達人ㄌ 過ㄉ機會很大

10-25 00:34

is樂小呈
其實很早就有了,只是沒有在這種文掛過 :P10-25 09:41
在意你就輸了

10-25 01:31

is樂小呈
嘻嘻[e7]10-25 09:41
我哪知
太神...

10-25 02:44

is樂小呈
ㄋ是瑟圖大神[e5]10-25 09:41
kiwi(薇薇安)
是達人專欄!恭喜耶!!

10-25 07:51

is樂小呈
考慮之後我決定還是掛達人 [e1]10-25 09:42
彼得哈特利
佬...恭喜上達人 [e11]

10-25 08:13

is樂小呈
很早就拿到達人了拉,只是沒什麼在掛而已ww10-25 09:42
烏鴉
這是把影像處理的思路給代碼化了嗎
能看到不同專業的解決方式真有趣w

10-25 11:05

is樂小呈
應該說影像處理的運作過程本身就是程式碼運算的,只是大多編輯軟體都吧他們隱藏起來10-25 11:12
is樂小呈
所以我應該算是根據處理過程的思路,反推出隱藏的代碼才對 :D10-25 11:12
矮鵝
上達人真神耶~~eva的設計都很潮很有巧思,識貨喔~~

10-25 11:14

is樂小呈
辣個質感真的超漂亮[e16]10-25 11:16
果香海苔
謝謝分享~我有抓下來用Unity開來玩了一下
雖然大概知道就跟PS裡抓線稿的原理類似,不過叫我去看Shader程式碼算法我就想投降了,所以都在找別人寫好的…
可惜我問好幾個有研究寫Shader的人都說SRP和HDRP/URP差太多,結果想撿現成的也有難度
雖說我當初把自己的專案切到URP是為了玩Shader Graph就是了…(←只會看圖亂拉線的人)

10-25 11:30

is樂小呈
Shader 門檻真的不低,用數字算顏色超反直覺的,要花不少時間習慣10-25 11:36
is樂小呈
阿然後,SRP 就是 HDRP/URP 的統稱,我剛剛也搞錯了 XD10-25 11:36
is樂小呈
預設的是 build-in ,就是原始檔的專案10-25 11:37
is樂小呈
看圖拉線也不是不行,原理都通的,只是操作度就沒有自己寫來的高[e19]10-25 11:37
S彩S
恭喜小呈 超狂的((艸

10-25 12:23

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

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

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

追蹤私訊切換新版閱覽

作品資料夾

leo25127更新778回
穿越奇幻日常系小說『公爵家的獨生子』更新囉,來看看我們無厘頭的ㄎ一ㄤ少爺怎麼在異世界作威作福吧!看更多我要大聲說昨天20:04


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

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