創作內容

6 GP

Unity 的鏡頭後處理

作者:甜在心饅頭│2021-02-06 16:14:46│贊助:12│人氣:134

她是 Lena ,影像處理課會出現的圖,被我臨摹成了大餅臉,真是抱歉。

來把這次 Game jam 接觸到有關 post processing 的部分做一個分享。

首先,想先回顧一下需求,

我們這次的遊戲是一個比較抽象的遊戲概念,

有點像是我 GMTK燒瓶亞人玩法,

原本是一個細胞,吃了血後移動進化,

長出耳朵,可以聽到聲音,

開眼,看到瓶外世界......等,這樣的設計。

所以放到 COMA 上就變成了,

( 更新了網頁版連結可以比對實際遊戲畫面效果 )

2D 3D 的移動變化,

黑白轉彩色的視覺震撼,

聽得到背景樂跟音效的能力開啟......等;

隊友很可靠的接走了移動功能跟運鏡功能實作,

所以我就來負責遊戲中怎麼讓畫面呈現,可以讓玩家眼睛一亮的這部分。

前言結束。



那麼,第一個要碰到的難題是,彩色跟灰階的轉換。

我最初在想這個功能的實作法時,是從 Shader 出發的( 雖然我根本是超弱的等級 )

腦海中浮現的是有個轉灰階的公式,寫一個偏計算型的材質球,

然後去代入公式,就能讓掛上這顆材質球的東西都會被渲染成灰階。( 理想 )

=> 這個想法提出後暫時被打退了,似乎在果醬中才開始寫 Shader 有點無謀@@

夥伴中有人提到,應該不用這麼麻煩,用 Unity 內建的 post processing 就可以了。

......我來試試看。

直接添加 post-process Layer 來用!


提幾個需要注意的點,給初次使用的人,包含我筆記一下。

預設的 Layer 沒有照任何東西,要記得選擇,

特別是專案做到中後期才準備加入更好畫面效果的( 你們可能開了很多層級 )。

選擇 Is Global 全域打勾,就可以讓全部需要透過渲染成像的都吃到這個效果,包含 UI

這些設定需要吃一個設定檔,生成後在 Profile 關連到那個檔案即可。

( 打到這的時候異想天開一件事,若是生成複數個,透過腳本動態切換是否可行待實驗 )


這個設定檔都是預設的標準數值,而我們想要的效果,

則是透過 Add effect 去複寫它,而之中跟灰階有關的功能就是 Color Grading


試著調整 Saturation 飽合度這項參數,去觀察之中的變化。


另一個則是 Contrast 對比,同樣隨便拉拉看,觀察之中的變化。

如此一來~~~想要的灰階效果,可以透過這兩個參數很簡單的實現。


要先看你們遊戲的表現方式,對比是用來加強靠近白一點還是黑一點,

對比拉強的效果也是很好的,很適合搭配漫畫型分鏡遊戲。

研究到此應該可以算這個功能可實行了吧?!

正準備進行下一步程式碼控制的時候,專案準備再升級一個部分......

由於我們這次是使用最新版 Unity 2020.2.2f1

而早從 2019.3 開始,就可以使用它們的一個新技術-URP


不要被上面那串文字嚇到,我簡單的說明一下,

這項技術是使用了預處理( 預先計算 )的方式,透過光照的表現,

去達到不使用 Shader 也可以看到的畫面效果。( 包含物理反光跟材質折射 )

同時,2D 也吃這個效果,簡單來說,開啟這個 URP 的專案,你就擁有很方便的光照效果。

原本要使用到這樣的表現,可能需要美術夥伴去雕這樣的效果,

可能需要撰寫很多 Shader 去達到同樣變化,不過現在有個方式可以省下時間,是這個意思。

就我感覺,這個效果,有點像之前母湯專案玩的 Light 2D -SRP 效果,進化版的感覺,

有機會的話應該會往 2D 的部分來試試。




在專案改成 URP 的渲染通道後,原本的後處理效果就失效了。

不確定是哪邊打架了,某一處設定有衝突但以 URP 為優先吧?!

只知道官網上有寫著,URP 也有它自己整合了後處理這塊,那就繼續研究下去。


升級了之後,原本 Camera Inspector 上多了很多東西,大部分都不用改,我們也沒改。

不過針對後處理的部分有個地方要注意喔!


使用後處理這塊要打勾,

不過就算勾了這個,原本掛的還是沒有效果,要走另外一條路。

官方文件上說不用使用 Post Processing,直接掛上 Volume 這個元件,


一樣別忘了,全域、新增一個設定檔存放這些變量,

以及添加我們需要的效果去複寫到原本的設定。

這次 COMA 中使用了上述五個效果,色調變化、朦朧、縮圈遮罩、雜訊跟景深。

以下直接用影片展示。


依序變化,灰階關掉、朦朧效果關掉、黑圈關掉、雜訊關掉和最後將景深關掉畫面清晰。

覺得怎麼樣才叫做好看或者搭配專案的遊戲風格,可以詢問一下美術的意見喔。


打開 Color Adjustments ,就會看到已經研究過的好朋友,

飽和度同學,一樣給它 -100 就是灰階了。

那麼下一步,我想要在程式中去控管這個值,在某個時機點去將它從 0 轉換為 -100

最直接的想法應該就是,去 Get 這個 Component,然後 SetValue 什麼的,對吧?!

很遺憾,就算到了今天,我還是找不到直接取得這個元件的寫法,

它們一定是藏在某個 namespace 下,但找不出來不 using 一下,

就是永遠在跟編譯器雞同鴨講,所以我採取的是,就算我不知道它是誰也硬寫值進去的做法。

講一下我的思路,參考一下。


Volume 是一定抓得到的,它是原本就存在的 Component,

試著把我所掛上去的屬性印出來看看,到底有沒有辦法抓到。


五筆資料,顯然是可行的,有掛上的才有,其它我沒添加的就沒有。

抓得到就有希望,至少先談有這東西,再談修改。


可以用 parameters 這個接口往下抓裡面的參數,就是我們要的飽和度那些,

隱約嗅到不妙的感覺,居然是 ReadOnly 唯讀屬性......見招拆招吧@@


不是很有把握的時候,不知道抓出來的變數是什麼型態的情況,var 很好用。

遍歷內容物,並印出來,驗證一下這個路線有沒有問題。


分別對應到 Post Exposure, Contrast, Color Filter, Hue Shift 跟 我們要的 Saturation

目標只有最後一個值,找找看修改方法。


其實是有提供接口的,很好!只要能塞這個資料型態給它就好。

再回頭確認一遍。


我只有對飽和度這項變數打勾,這點可以利用。


那格欄位的變數是浮點數,又因為是參數型態,所以要用 floatParameter 去接,

接著提供一個開關,是否需要灰階 ←→ 彩色世界的切換,

就大功告成了。




延伸閱讀,直接變化很醜......

不論從 0 (彩色) 到 -100 (灰階),還是 -100 (灰階) 到 0 (彩色)。

夥伴說,可不可以在這個奇怪的寫法上,做出漸變的效果,不要直接變化可以嗎

在約莫 30 個人間界的時間單位過去後,

我露出了一個微笑說,我試試看QvQ

首先在 package manager 中安裝插件 Dotween

using DG.Tweening 後,使用一個隨著 update 變化的 sequence 演出寫法;


這樣就可以實現漂亮的轉換了。

嫌時間太長太短都能在參數上再做調整,我有開相關變數。

上述的寫法有興趣的可以自己實作看看,

但我要強調幾個注意事項喔。

1. 不論後處理還是 URP,都只是一個不想走 shader 的方式的另一種做法,

這些效果表演 shader 都做得到!根本小菜一碟( 雖然我不會寫 )


2. 我還是找不到直接取得這些 component 的寫法,已經問過 google 老師了,

若你有更好的寫法,請跟我說,這篇分享的相關問題也歡迎討論。


3. 哪種做法好?省校能?我沒有足夠的數據分析可以佐證,

但是就我經驗來談,越方便的東西背後潛藏的效能危機越大,

我的直覺是後處理很吃資源,但效果快又方便,

請依照團隊規模跟需求斟酌使用,或者兩個都用看狀況跟時機開關。


4. 漸變的方式還可以用 update,或者 coroutine,不是只有 dotween 這一條路,

我只是選擇最偷懶熟悉的方式來戰鬥而已XD


5. 除了顏色變化外,其它的也可以玩一下,景深效果很強,朦朧很美,

雜訊很突出,茶杯頭的雜訊我就很喜歡,但我不確定它是不是 shader 寫的,

歡迎自行更改延伸使用。






以上,這次果醬中學習到的東西,吸收消化後,再分享出來。

希望能給也想快速在畫面表現上求亮點的朋友一起互相成長。

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

相關創作

同標籤作品搜尋:Unity|Post Processing|URP

留言共 4 篇留言

矮鵝
區區一個幾小時果醬學到的東西也太強大了吧

02-06 17:26

甜在心饅頭
如果可以,真想當個吉祥物全場跑透透,別組有在研究 Fmod 音效模組跟 Spine2D 動畫的,好想偷學喔~希望明年有實體場可以湊熱鬧XD02-06 22:23
thenewguy
我們這組也有用彩色轉黑白,但我們是直接用post-process XD
URP抓變數我看GOOGLE很多人都是用tryget抓profile的資料,然後他每個資料項目的型態放在UnityEngine.Rendering.Universal裡面,比如要抓motion blur可能會像
'volume_profile.TryGet<MotionBlur>(out MotionBlur mb);'這樣
post-process就直接getsetting抓資料就好方便得多XD

02-08 08:38

甜在心饅頭
試了一下可行,真神奇@@
補上 using UnityEngine.Rendering.PostProcessing;就都抓得到,
不失為一個方式,剛好補上了直接用 post-processing 的狀況說明,謝啦 [e19]02-08 10:48
thenewguy
不過我沒用過Dotween呢XD
我們做漸進彩色轉黑白是直接用算的XDDDDD

02-08 08:40

甜在心饅頭
高手!很有概念才能用算的~下次我也會用別種方式試試~02-08 10:46
黑攻
這篇要筆記起來ww

03-12 14:24

甜在心饅頭
旁門左道而已QQ,別人的方式更好[e13]03-12 14:58
我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:里程碑... 後一篇:Code Sheep...

追蹤私訊切換新版閱覽

作品資料夾

yorkyoung各位巴友們
歡迎來我的小屋參觀~也歡迎追蹤我的IG喔!看更多我要大聲說11小時前


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

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