目錄
今天來學習如何在Unity中做出透視效果。 當然透視效果有許多做法,今天用的是最容易理解、步驟也相對較少的方法-Renderer Feature。
簡介
大致流程就是「當目標物件被其他物件遮住時,直接渲染出來並指定新的材質;沒被遮住時也渲染一次,使用原本材質」。
目標是讓這個Sphere能一直被看到,就算被牆擋住還是能渲染出來。

Renderer Feature
先了解一下什麼是Renderer Feature,它的功能在Unity官方網站中是這樣解釋的:在URP的Renderer上加上額外的渲染途徑。 能讓使用者自由設定渲染的對象、順序、材質……等,也就是說,可以指定「在渲染整個畫面之後,再將特定物件渲染一次特定材質」之類的指令。說得白話點,就是用來覆寫渲染的結果。
以下簡單介紹一下Renderer Feature中幾個重要的部分。
Event
這裡可以選擇渲染的順序,選單中的順序就是URP的Render Pass。
Filters
可以選擇目標渲染物件,Queue選擇是否為透明、Layer Mask指定對象Layer。
Overrides
選擇完渲染的時間點跟目標後,再來就是要對其進行的動作了。
Material:用來覆寫的材質。
Depth:決定如何影響深度緩衝區(Z-Write)。
Write Depth:決定是否更新深度緩衝區。
Depth Test:深度測試,畫面從離攝影機最遠處往攝影機移動,用碰到的先後順序來決定物件的前後。
Camera:覆寫攝影機的某些屬性。
實作
製作材質
透視時用來顯示的材質,這裡用什麼材質都能成功做出效果的,不過為求美觀,我用Shadergraph做了一個周圍發光的材質。


設定圖層
剛剛有說到Renderer Feature可以用圖層選擇目標,所以要新增一個圖層(Above)給這個Sphere。

Forward Renderer
Renderer Feature要在Forward Renderer中新增,Forward Renderer的路徑在Assets→Settings下。
Forward Renderer中有個重要功能就是過濾,可以用Layer選擇要渲染出來的圖層。 這裡先把剛剛的Above圖層取消打勾,取消後會看到Sphere就不會被渲染出來了。

第一個Renderer Feature:透視
先來做透視的效果,新增Renderer Feature,將Layer Mask改成Above就會渲染出Sphere了,打勾Depth,取消更新深度圖,將深度測試改成Greater,這樣代表「有任何不透明物件的深度值>在Above圖層中的任何物件,才會進行覆寫」。(最遠為0,最接近攝影機為1)
現在正面看不到Sphere了,但是被物件遮住時就會顯示(由於Queue中選擇不透明,如果將牆的材質改成透明體,同樣不會渲染出來)。




在Overrides的Material中指定剛剛做的材質,這樣透視時就能看到帶有這個材質的Sphere了。

第二個Renderer Feature:正常狀態
再來要處理正面的問題,方法跟剛剛一樣,新增一個Renderer Feature,開啟Write Depth,將Depth Test改成Less Equal。
也就是說,有任何不透明物件的深度值≤在Above圖層中的任何物件,才會進行渲染。
這樣常狀況下也能渲染出Sphere了。


這樣簡單的X-Ray效果就完成了!

It’s aaesome for me to have a website, which iis good designed for myy experience.
thanks admin
Sweet blog! I found it while surfing around on Yahoo News.
Do you have aany suggestions on how too get listed in Yahoo
News? I’ve beenn trying foor a while but I never sem to get there!
Many thanks
This article is in fact a pleasant onee iit assists new internet people, whoo arre wishing in fagor
of blogging.