淺談Unity中Canvas的三種渲染模式

Overview

UGUI通過 Canvas 組件渲染和管理UI元素。Canvas 是 UI 元素的容器，它決定了 UI 元素的渲染方式以及它們在屏幕上的顯示效果。Canvas 有三種主要的渲染模式，每種模式有不同的用途和特點。本文將介紹這三種渲染模式

1. Screen Space - Overlay 模式

1.1 渲染方式

在 Screen Space - Overlay 模式下，Canvas 會直接渲染到屏幕上，而不依賴于任何攝像機。這意味著 UI 元素會覆蓋在游戲畫面之上，始終位于屏幕的最前面。

1.2 特點

無需攝像機：不依賴場景中的任何攝像機，UI 會直接渲染到屏幕。
始終位于最上層：無論場景中是否有其他 Canvas，Screen Space - Overlay 模式下的 UI 始終顯示在最上面，其他 UI 元素都會被它覆蓋。例如場景中還存在一個Screen Space - Camera 模式的Canvas,它下面的UI元素只可能被前者的UI遮擋,而絕不可能遮擋前者的UI.
性能較高：由于 UI 渲染不需要經過攝像機的投影計算，因此其渲染效率較高，適合用于較為簡單和靜態的 UI。

1.3 適用場景

主要用于游戲中不需要與場景中的 3D 對象交互的 UI。例如：主菜單、游戲 HUD、游戲中顯示的分數等。
用于需要始終顯示在屏幕上并且不受場景攝像機影響的元素。

1.4 監視面板屬性

1.Pixel Perfect:

消除模糊和鋸齒：尤其是在低分辨率設備或縮放后的 UI 元素中，未啟用 Pixel Perfect 時，可能會看到 UI 元素的邊緣變得模糊或出現鋸齒。啟用該選項后，Unity 會強制元素的邊界對齊到像素網格，避免這些視覺問題。
精確顯示：它有助于確保 UI 元素在顯示器上以精確的像素值顯示，避免由于屏幕分辨率差異導致的模糊效果。
適用于像素藝術風格：如果你制作的是像素藝術風格的游戲或應用，啟用 Pixel Perfect 可以確保每個像素都完美對齊，保持像素風格的一致性和清晰度。

這是一個對比效果,前者沒打開導致了輸入框上下出現了色差,后者是打開該屬性,獲得了更好的顯示效果(但是更耗性能).

2.Sort Order

通常不會出現兩個同為Screen Space - Overlay 模式的Canvas,但是如果有的話,Sort Order屬性會影響渲染屬性,值越大越后渲染(即更不會被擋住).但是如果兩個Canvas的該屬性都為同一值渲染順序如何呢?筆者沒找到規律.

3.Target Display

Target Display 屬性決定了 Canvas 渲染到哪個顯示器。這個屬性適用于 Screen Space - Camera 和 World Space 渲染模式的 Canvas。當你有多個顯示器時，你可以指定 UI 渲染在哪個顯示器上。
Unity 支持將不同的攝像機渲染到不同的顯示器上，而 Target Display 就是控制每個 Canvas 的渲染目標，幫助你更好地在多個顯示器上分配渲染任務。

4.Additional Shader Channels

控制 Canvas 渲染時是否包含一些額外的頂點數據，以便提供給 Shader 進行更多的處理。這些額外的 Shader 通道提供了更多關于每個 UI 元素的信息，通常用于自定義 Shader 渲染效果。

在 Screen Space - Overlay 模式下，UI 渲染是直接繪制到屏幕上的，而不是依賴于相機的視圖，因此，通常不會涉及復雜的空間變換。但即使在這種模式下，你仍然可以啟用一些附加的 Shader 通道，以便在自定義 Shader 中使用。(通常不會使用)

可用的選項：

Vertex Streams (頂點流)：
- 頂點流允許傳遞更多與頂點相關的數據給 Shader。這通常是用于處理與頂點位置、顏色、紋理坐標等相關的額外數據流。
Normals (法線)：
- 啟用此選項會將法線信息傳遞給 Shader。對于 Screen Space - Overlay 渲染模式來說，通常并不需要法線數據，因為 UI 元素通常是平面上的。但是，如果你想為 UI 添加某種自定義效果（例如基于法線的光照），啟用法線數據就很有幫助。
Tangents (切線)：
- 切線通常與法線一起使用，主要用于法線貼圖的處理。如果你的 UI 需要進行復雜的材質效果，比如通過法線貼圖實現視覺效果，可以選擇啟用切線數據。
UV2 / UV3 / UV4 (額外的 UV 通道)：
- 這些額外的 UV 通道可以用于不同的紋理坐標。如果你想給 UI 使用多個紋理（例如多個層次的貼圖），你可以啟用這些額外的 UV 通道。
Color (顏色)：
- 此選項啟用后，Canvas 渲染的 UI 元素將包含顏色信息，這對于自定義 Shader 控制顏色或者透明度非常有用。
Lightmap (光照貼圖)：
- 如果你希望 UI 元素使用光照貼圖進行渲染（雖然在 Screen Space - Overlay 模式下較少見），你可以啟用光照貼圖通道。這個選項讓 Shader 能夠訪問相關的光照貼圖數據。

2. Screen Space - Camera 模式

2.1 渲染方式

Screen Space - Camera 模式下，Canvas 會根據指定的攝像機進行渲染。UI 元素會被渲染到攝像機視野中的一個平面上，可以通過攝像機的視角和視野調整 UI 的顯示效果。此時Cube也被渲染到UI上了.

2.2 特點

依賴攝像機：渲染需要指定一個攝像機，UI 會根據攝像機的位置、視野以及投影設置進行渲染。
支持透視效果：如果攝像機使用透視投影，UI 元素也會受到透視效果的影響，顯示更具立體感。
自動適應分辨率：當屏幕分辨率發生變化時，Canvas 會自動調整大小，以適應新的屏幕尺寸。

2.3 適用場景

適用于需要3D 對象的情況。
用于需要根據攝像機視角進行動態渲染的場景，如虛擬現實中的 UI 或者 3D 游戲中的 HUD。

2.4 注意:

推薦改成這樣一個結構專門管理該模式的UI.同時這個攝像機這渲染UI層,而不做其他事.

經過測試雖然只渲染UI層,UI物體(比如一個Image),該Image即便改為別的層也能被渲染,但是3D物體卻不行.但是攝像機如果改為渲染Water層,則UI物體就不會被渲染,即便UI物體也改為Water層.

此時因為是依靠攝像機渲染我們可以通過旋轉UI獲得一些立體效果.

也可以考慮修改攝像機為正交相機,將攝像機從 透視（Perspective） 改為 正交（Orthographic） 有以下幾個優點和影響：

優點

UI 不受透視變形影響

透視相機會讓 UI 元素受到透視投影的影響，遠處的元素顯得更小，近處的更大，導致 UI 在屏幕上的顯示比例不均勻。
正交相機可以確保 UI 元素在屏幕上保持相同的大小，不會因為遠近發生縮放，使 UI 更加穩定。

更方便對齊 UI 元素
正交相機不會有透視縮放問題，因此在 UI 布局時可以更精確地對齊，不會因相機角度變化導致 UI 位置和大小發生意外變化。
減少 UI 失真
透視相機會導致 UI 組件的拉伸變形，特別是在 UI 組件較大或接近屏幕邊緣時，而正交相機可以避免這些問題，使 UI 顯示更清晰。
性能提升
正交投影不需要進行復雜的透視變換和深度計算，因此可以提高渲染效率，特別是在 UI 復雜的情況下能減少 GPU 負擔。

對比透視相機

特性	透視相機 (Perspective)	正交相機 (Orthographic)
UI 變形	UI 可能受透視影響變形	UI 保持原始比例，無變形
對齊	可能因透視造成 UI 位置變化	UI 位置更穩定，易對齊
視角變化	UI 受相機 FOV 影響	UI 不受相機 FOV 影響
深度感	具有透視深度感	無透視深度感
性能	需要透視投影計算	計算量較低，性能較優

適用場景

適合使用正交相機的情況

2D 游戲 UI，如按鈕、文本等不希望受到透視變形影響。
HUD（抬頭顯示），如血條、準星、迷你地圖等，應該保持固定尺寸和位置。
固定視角的游戲 UI，比如卡牌游戲、策略游戲等。

適合使用透視相機的情況

3D UI 設計，比如 VR UI 或帶有 3D 立體感的 UI。
需要 UI 深度感的場景，比如某些游戲的界面希望 UI 組件能隨距離發生變化。

總結

如果 UI 主要是 2D 組件，并希望它們在屏幕上保持穩定的尺寸和對齊方式，那么將 Screen Space - Camera 下的攝像機設置為 正交模式 是一個更好的選擇。而如果 UI 需要透視效果，比如 3D 交互界面或者 VR UI，則可以選擇透視相機。

2.5 監視面板屬性:

在 Unity 的 Screen Space - Camera 模式下，Canvas 組件Plane Distance 屬性的作用與攝像機的投影模式（透視或正交）有關。以下是詳細解析：

Plane Distance屬性

控制 UI 與攝像機的距離
- 在 Screen Space - Camera 模式下，Canvas 依附于一個攝像機，UI 會被渲染成 3D 物體。
- Plane Distance 代表 UI 畫布距離該攝像機的距離，單位是 世界單位（World Units）。
影響 UI 元素的縮放
- 如果使用的是 透視相機（Perspective），則 Plane Distance 越大，UI 組件會變得越小，因為透視投影會導致遠處的物體縮小，近處的物體放大。
- 如果使用的是 正交相機（Orthographic），Plane Distance 對 UI 組件大小沒有影響，因為正交相機不會有透視縮放效果。
影響 UI 的遮擋關系
- Canvas 作為一個 3D 物體，可能會與游戲場景中的其他 3D 物體發生遮擋。
- Plane Distance 距離過大 可能會讓 3D 物體遮擋UI。

Plane Distance 對比

投影模式	Plane Distance 影響	推薦值
透視相機（Perspective）	影響遮擋關系,同時影響 UI 大小	10-100，根據 UI 需求調整
正交相機（Orthographic）	不影響 UI 大小，僅影響遮擋關系	一般設為 1-10，避免過遠

Sorting Layer屬性和Order in Layer屬性

這兩者的設置只為了影響同為Screen Space - Camera 模式的Canvas的渲染順序.

首先兩個同為Screen Space - Camera 模式的Canvas,且Sorting Layer處于同一層級,這時Order in Layer的大小才有比較意義.那不同Sorting Layer的Canvas呢?