創作內容

8 GP

在Unity當中製作《底特律:變人》的掃描特效3——基礎後製(Blit)

作者:pudding│2020-07-10 01:57:22│巴幣:114│人氣:546
哈囉,這裡是布丁,抱歉這一篇拖了比較久一些>< (話說我們成功數到3了)
這次要分享的筆記是接續自先前的那一篇,不過在我們進到掃描特效的區域上色(Color Area)前,我們要先來看一下Blit,也就是將原本的畫面扔給Shader處理的後製動作

(雖然我不確定具體流程是不是這樣就是了)

首先為了要將Camera看到的畫面交給我們自己寫的Shader處理,我們會需要去使用MonoBehaviour當中的OnRenderImage
這個函式在上一篇筆記當中也有提到,那時候寫說請GL繪製圖形的部分需要被放在OnPostRender或OnRenderImage當中,在這一篇筆記裡我們一樣也會請GL繪製圖形,但這次我們就會改用後者。

這兩個函式究竟差在哪?
基本上他們倆個的呼叫順序都是在整個基本的畫面渲染結束之後,並且都是用來額外再繪製東西的。 (而且都必須附加在Camera物件上才會被呼叫)

(截圖自官方說明)

但是OnRenderImage卻會將最後渲染出來的整個畫面以RenderTexture的資料型態傳給你,讓你用Shader(或著該說Material)去做調整後再輸出,形成我們最終在螢幕上看到的後製結果。

特別注意,如果你覆寫了該函式,那你就一定要去進行一次Graphics.Blit(該函式會把帶入的RenderTexture拿去給Shader調整後再輸出到新的RenderTexture上),或著繪製一個涵蓋整個畫面的四邊形(quad,同時後者也是我們這次要用的方法)。

(截圖自官方說明,如果你兩個都不做的話,你的畫面會變的一片黑)

這裡我們就先簡單寫一個Shader並使用Graphics.blit的方式來進行後製一下吧。
(新增一個Unlit Shader並對原本的內容稍作調整)

接著我們再新增一個用來使用該後製Shader的C#檔。

寫完後把這個script掛到我們原本的MainCamera上
(記得要建立一個採用上述範例Shader的Material並拖拉進來)

接著我們就可以來看看執行效果了。

不過到這裡的話大家可能會有個疑問,前面提到我們這次要使用GL.Quad來進行畫面後製,這個方法跟我們現在寫的Graphics.Blit範例有什麼差異嗎?

Unity裡面實際怎麼運作的我不確定,但單純就撰寫上來說的話,我自己覺得GL.Quad的用法麻煩許多,但同時也能為我們提供更多在後製上調整的方法,這裡我們就先來看看剛才的程式碼如果要改成GL.Quad的形式的話該怎麼改寫吧。

(喔對,記得如果要改用GL繪製的方法做後製的話,我們會需要把Shader調為Cull Off)


官方文件中有提到,由於我們不知道遊戲在其他地方跑的時候,其圖形API是怎麼運作的,因此為了避免後製結果顯示不出來,最保險的方式就是直接把Cull(汰除)給關掉。
(所以其實之前用來繪製網格的Shader可能也設定成Cull Off會比較保險)

(這裡我們先改用自己寫的Blit函式)



然後再看到函式裡的部分,這裡我想特別提幾個部分,首先是記得要先去設定現在你要渲染的RenderTexture(設成source的話結果會是全黑的,因為最後顯示在畫面上的應該是destination)
另外則是下面的GL.PushMatrix()和GL.LoadOrtho()兩個函式(雖然我都看不太懂QQ),前者PushMatrix官方解釋為儲存模型和投影矩陣等資訊,我自己測試的時候把那行拿掉好像不會發生什麼問題,但Unity官方還是提醒說在後製時最好養成習慣去呼叫。
(我後來有看到一些圖學相關的教學,要這麼做的原因好像是因為GL原本實作的方式會一直把物體位置的資訊疊加上去,所以你要每次渲染前都先把這些資訊暫存起來,之後再還原)

另一個函式GL.LoadOrtho(),官方說明可以幫忙建立正投影(Orthographic projection)以及他的矩陣等資料,雖然我看不太懂這是什麼意思,不過測試的時候一但拿掉的話,畫面會變的很詭異(他好像會把這裡的Quad認定為繪製在遊戲場景中的0,0~0,1座標,而非整個畫面的邊角)

(拿掉的結果,攝影機往右的時候,繪製的方格會往左拖動)
(題外話,Orthographic Projection也是一般狀況下2D遊戲會使用的投影方式,在該模式下,物體不會因為遠近而影響外觀大小)

講完比較不確定的部分後,我們來看看該函式的下半段吧,GL.MultiTexCoord2,這個函式會去修改Shader的紋理座標(TEXCOORD),第一個參數代表你要去修改哪一組,雖然他寫MultiTexCoord2,但不表示他是去動第2組紋理座標,而是代表他會帶入2個數字(剩下的2個參數)。
並且通常Shader的第一(0)組座標都會用來儲存他們的UV座標。

(也就是說上面的那段程式碼會來調整Shader此處的資料)

你可以試著把這段座標顛倒過來
(你會發現畫面跟著顛倒過來了)


基本上後製時幫Shader設定紋理座標的順序都是從左下開始繞到左上(圖中藍色部分),而中間的數值則會取頂點之間的插值(圖中紫紅色的部分)。

接著我們則可以看到剛才那行指令下方的GL.Vertex3 (其實跟之前DrawLine的GL.Vertex.Vertex差不多),這個函式是用來設定頂點,以這邊來說的話就是設定GL.Quads的繪製頂點,你可以稍微調整一下這裡的座標來修改後製顯示的圖形範圍。

(這邊我們故意把座標全部砍半,最終渲染的結果也會只剩下一半的部分……或著說四分之一)


好啦,這次的筆記分享就先寫到這裡,在了解了用Shader進行後製的基本方法後,下一篇我們就要來看看怎麼製作掃描特效中的區域上色(Color Area)了,希望目前大家還覺得喜歡W。
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4844144
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 1 篇留言

⊰⊱求出處學術用⊰⊱
感謝教學

05-16 00:00

我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:在Unity當中製作《底... 後一篇:在Unity當中製作《底...

追蹤私訊切換新版閱覽

作品資料夾

as0000026MINASAN
DC教學不知不覺就1萬了,送上遲來的感謝!看更多我要大聲說昨天21:21


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

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