【Unity3D】Shader Graph簡介

1 Shader Graph 簡介

Shader Graph 是 Unity 官方在 2018 年推出的 Shader 製作外掛，是圖形化的 Shader 製作工具，類似於 Blender 中的 Shader Editor 和 UE 中的 Material Editor，它使用流程圖的形式表達頂點變換和片元著色的流程，通過節點（Node）的連線實現各種複雜的特效，關於節點的介紹詳見→Shader Graph節點。

Shader Graph 支援的渲染管線有：built-in（Forward 和 Deffered）、URP（Universal Render Pipeline）和 HDRP（High Definition Render Pipeline）。

除了 Shader Graph 外，Shader Forge 也是一個圖形化 Shader 製作工具，前者是 Unity 官方外掛，後者是三方外掛。

2 Shader Graph 環境搭建

2.1 built-in 管線中 Shader Graph 環境搭建

built-in 管線是指渲染路徑為 Forward 或 Deffered 的渲染管線，一般通過 3D 模板建立專案。

依次點選【Window → Package Manager】開啟包管理器，下載 Shader Graph 外掛，如下。

2.2 URP 管線中 Shader Graph 環境搭建

對於 URP 模板和 HDRP 模板建立的專案，在建立完專案後，會自動安裝 Universal RP 外掛、Shader Graph 外掛，並設定 Universal Render Pipeline Asset，不需要進行額外的設定。

對於 3D 模板建立的專案，在建立完專案後，需要手動安裝 Universal RP 外掛，並設定 Universal Render Pipeline Asset。

1）下載 Universal RP 外掛

依次點選【Window → Package Manager】開啟包管理器，下載 Universal RP 外掛，如下。

說明：在安裝 Universal RP 外掛時，會自動安裝 Shader Graph 外掛。

2）設定 Universal Render Pipeline Asset

在 Assets 目錄下建立 URP Settings 目錄，在該目錄下右鍵，彈出選單欄，依次點選【Create → Rendering → URP Asset (with Universal Renderer)】，會生成以下兩個檔案，如下。

依次點選【Edit → Project Settings → Graphics】，將上述建立的 Universal Render Pipeline Asset 檔案拖拽到 Scriptable Render Pipline Settings 中，如下。

設定完後，Main Camera 物件下面會自動新增 UniversalAddtionalCameraData 元件，Directional Light 物件下面會自動新增 UniversalAddtionalLightData 元件。

3 Shader Graph 視窗介紹

3.1 Shader Graph 的建立

1）built-in 管線中建立 Shader Graph

在 Assets 視窗右鍵，彈出選單欄，依次選擇【Create → Shader Graph → Builtin】，再選擇 Lit Shader Graph 或 Unlit Shader Graph，建立 Shader Graph。

2）URP 管線中建立 Shader Graph

在 Assets 視窗右鍵，彈出選單欄，依次選擇【Create → Shader Graph → URP】，再選擇 Lit Shader Graph 或 Unlit Shader Graph，建立 Shader Graph。

3）Lit Shader Graph 和 Unlit Shader Graph 的區別

Lit Shader Graph 和 Unlit Shader Graph 的區別是：前者帶有光照模型，並且是基於物理的光照模型（PBR），用法類似於表面著色器；後者不帶光照模型，需要自己寫光照計算流程。

3.2 Shader Graph 視窗組成

Shader Graph 由 Blackboard、Graph Inspector、Main Preview、Vertex、Fragment、Node 等模組組成（前 3 個模組可以通過右上角的按鈕控制顯示和隱藏），如下。編輯好 Shader Graph 後，點選左上角的 Save Asset 按鈕儲存。滑動滑鼠滑輪可以放大和縮小節點，按中鍵拖拽可以平移場景。

Blackboard：用於建立外部屬性，相當於 Shader 中的 Properties，可以建立 Float、Vector2~4、Color、Boolean、Gradient、Texture2D、Texture2D Array、Texture3D、Cubemap、Matrix2~4 等型別變數。
Graph Inspector：包含節點設定和圖設定兩個索引標籤，節點設定中可以設定節點命名、引數值域、預設值等資訊；圖設定中可以設定著色器數值計算精度、支援的渲染管線（Built-in 或 Universal）、管線引數等。
Main Preview：用於預覽著色器渲染效果，在該視窗右鍵，可以選擇預覽的模型。
Vertex：頂點著色器，頂點變換、法線變換、切線變換在這裡進行。
Fragment：片元著色器，光照計算、貼圖在這裡進行，在 Graph Inspector 視窗的 Graph Settings 索引標籤裡的 Material 中可以選擇 Lit（PBR 光照模型）或 Unlit（無光照模型）的片元著色器。
Node：節點，在 Shader Graph 視窗的空白區域右鍵，選擇 Create Node，建立相應節點，節點型別主要有 Artistic（對比度、飽和度、白平衡等美術調整）、Channel（合併和分離通道等）、Input（頂點位置、顏色、法線、時間等輸入）、Math（加減乘除等數學運算）、Procedural（噪聲、圓形、多邊形等程式紋理）、Utility（邏輯判斷、自定義函數等實用工具）、UV（球形扭曲、旋轉貼圖等 uv 變換），詳見→Shader Graph節點。

4 Shader Graph 簡單案例

4.1 純色著色

建立 Unlit Shader Graph，重新命名為 My Unlit Shader Graph。雙擊開啟 My Unlit Shader Graph 檔案，在 Blackboard 視窗新建 Color 變數，並重新命名為 _Color。

將 _Color 變數拖拽到空白區域，並與 Base Color 相連，選中 _Color 後，在 Node Settings 中設定預設顏色，如下。點選左上角的 Save Asset 按鈕儲存編輯。

在 Assets 視窗建立材質，重新命名為 UnlitMat，將 My Unlit Shader Graph 檔案拖拽到 UnlitMat 中，並設定顏色為綠色，如下。

在場景中建立 Cube 和 Sphere，修改其材質為 UnlitMat，顯示如下。

4.2 漫反射著色

在 4.1 節的基礎上，修改 My Unlit Shader Graph 檔案如下。

其中 MainLight 是自定義函數（通過 Custom Function 節點建立），選中 MainLight，在 Node Settings 中設定如下，SHADERGRAPH_PREVIEW 用來判斷是否是預覽視窗。

#if SHADERGRAPH_PREVIEW
    Direction = half3(0.5, 0.5, 0);
    Color = half4(1, 0, 0, 1);
#else
    Light light = GetMainLight();
    Direction = light.direction;
    Color = light.color;
#endif

顯示效果如下。

4.3 貼圖