###### tags: `Unity 視覺效果`
# Unity Shader Graph (一)

本篇筆記不一定會寫第二篇 ! 因為寫起來很累人，但其實蠻好玩地所以看情況嘿嘿!

[toc]

## What is render pipelines?
render pipeline透過一系列對頂點、紋理以及其他的資訊，最終將這些資訊轉換成人能看的圖示呈現在螢幕上，在這個轉換的過程會使用到CPU與GPU來完成。


不同的render pipeline又有不同的功能以及效果，我們可以根據自身遊戲的需求來選擇適合的render pipeline，然而不同的render pipeline使用不同的shader，因此彼此之間無法隨意轉換。

以下為幾種shader pipelines介紹
- URP (Universal Render Pipeline)

是由 Unity 製作的預構建可編程渲染管線 (Scriptable Render Pipeline)。 URP 提供了對美術師友好的工作流程，可讓您在移動平台、高端遊戲主機和 PC 等各種平台上快速輕鬆地創建優化的圖形。

- HDRP

高清渲染管線 (HDRP) 是由 Unity 預先構建的可編程渲染管線。借助 HDRP 可以為高端平台創建出色的高保真圖形。

HDRP 可以用於 AAA 級高品質遊戲、汽車演示、建築應用以及任何需要高保真圖形的應用。 HDRP 使用基於物理的光照和材質，並且支持前向渲染和延遲渲染。 HDRP 使用計算著色器技術，因此需要兼容的 GPU 硬件。

- SRP

Unity 的可編程渲染管線 (Scriptable Render Pipeline, SRP) 是一項可以通過 C# 腳本來控制渲染的功能。 SRP 技術可以強化通用渲染管線 (URP) 和高清渲染管線 (HDRP)。

[更多SRP介紹](https://docs.unity3d.com/cn/2019.4/Manual/scriptable-render-pipeline-introduction.html)
## what is shader graph?
由於撰寫shader的程式碼需要龐大的數理知識，而這樣的知識並非一般人就能具備，尤其是美術部門根本不可能自行撰寫shader來為遊戲增添不同色彩以及效果。**Shader Graph則提供視覺化的介面來讓使用者能產生shader的效果。**

shader graph只相容於這三種Render pipelines，因此我們可以從以下三種render pipeline 做選擇來使用shader graph。
- SRPs
- HDRP
- LWRP(URP的延伸)

---
# 安裝package

前往Package Manager下載以下兩個package。


---
# Unity shader graph 環境設置

- 先建立一個URP渲染管線


- Edit / Project Setting


- 將剛剛所建立的URP放上去


## 常見問題:環境設置後全部的物件都變成粉紅色的!
因為場外的物件仍是使用預設的shader，因此當我們將render pipeline轉成URP時會變成粉紅色的!

- 解法一


- 解法二


- 將物件拉入project


- 點選project裡的物件，在右方選擇material，並將Location選成「Use External Materials (Legacy)」，最後點選Apply。



---

## 常見問題:物體本身沒有掛著Mesh Render
==如果物件本身有Mesh Render且底下有Material則可以跳過此步驟。==

- 主動為物體加上Mesh Render


- 並將物體原始的material主動掛上Mesh Render



## 常見問題: Shader Graph 的 Main Preview太大


---

# 正常流程添加shader

## 添加shader
在Project / 右鍵 / Create / Shader / PBR Graph ，並將其命名為highlight


目前版本很可能找不到PBR Graph，他被更名為Lit Shader Graph


- 滑鼠左鍵雙擊highlight shader


- shader打開後會看到PBR Master


| 屬性 | 效果 |
| --------------- | ---------------------------------------- |
| Vertex Position | 每個頂點在模型空間中座標 |
| Vertex Normal | 頂點的法線 |
| Vertex Tangent | 頂點的法線切線 |
| Albedo | 定義Material的反射率 |
| Normal | 定義Material的法線，法線最好在切線空間中 |
| Emission | 定義Material的發散效果 |
| Metallic | 定義Material的金屬效果 |
| Smoothness | 定義Material的光滑程度 |
| Occlusion | 定義Material的環境光遮擋值 |
|Alpha | 定義Material的alpha值，被用於透明材質或者alpha裁剪|
|AlphaClipThreshold| alpha低於該值的片段會被丟棄|

---
## 複製原本材質的顏色

預先複製材質的顏色是因為下一步驟要將我們剛建立的shader，套用給該物件的材質，如果我們沒有把顏色複製給shader，他預設是灰色的，會讓我們的御守變成灰色的。


沒預先複製的後果!


- 預先複製要留著的材質


- 把材質貼到highlight shader裡


- 一定要按 Save Asset

沒按就不會產生變更後的樣子


## or 加入材質

如果我們的物件的材質是貼圖來的，那就打開我們自己建的shader

- 新增一個 Node : Sample Texture 2D


- 將材質新增到 Texture裡

這邊我手上沒材質，就不新增材質了。


- 將此Node拉到Albedo


---

## properties

之後這個shader做完後，要可以套用到每個物件才行，但是每個物件的材質都不一樣，總不能為了材質不同就建立一大堆效果一樣只是材質不一樣的shader吧! 所以我們接下來要做的就是把個別需要調整的屬性拉出來到Inspector的面板。

- shader 打開後看到左上角的面板


- 這邊以color為例，新增一個color properties


- 取名

預設的顏色就自己調吧，上一節才教過應該不會忘吧


- 把這個color properties拖移到shader上，再把他跟albedo(顏色材質)做連結


- 一定要Save Asset

- before and after

**before**


**after**


現在可以自由在Inspector上編輯顏色， 並可以看到顏色的轉換


==想在Inspector上直接**新增貼圖材質** 也是一樣的做法，舉一反三一下!==

---

## **!!超重要!!將材質的shader改為我們剛剛所建立的highlight shader**


你可以發現透過上一步驟優先複製材質後，當我們將材質的shader更換成我們自己建立的highlight shader，就不會有材質跑掉!


---

## Node

- Create Node

根據上面的屬性選擇需要的Node來連連看

滑鼠右鍵 / Create Node


- 眾多的node可以選擇

這些Node可以參考這些資料來了解個別的功用，這篇筆記主要是透過其他youtuber實作時會使用哪些Node來一步一步了解Shader Graph。
[Unity](https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Node-Library.html)
[台部落:Shader Graph學習（一）](https://www.twblogs.net/a/5f0463a35352062f754edb05)


---

# 實作highlight物體的效果

## 新增一個 Fresnel Effect Node

[Fresnel Effect Node](https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Fresnel-Effect-Node.html)

簡單來說依據照射角度不同，產生不同強度的邊緣光。

右鍵 / Create Node / 搜尋 Fresnel Effect Node


==**將此 node 調整參數後連接到 Emission 並儲存**==

透過修改參數讓邊緣光符合你心中所想的樣子

- 修改參數


- 將node拉到Emission即可看到Main Preview的變化



- **儲存!! 沒有儲存就看不到效果**


- 回到 Scene 查看物件目前的呈現的效果

可看到物件的外圍都被白光圍繞

## 幫邊緣光換個顏色

- 新增一個Color Node


緊接著你會發現，Fresnel Effect Node 無法跟 Color Node 做結合，因此不管我們怎麼調整Color Node的顏色都無法改變 Fresnel Effect Node(邊緣光)的顏色。

- 新增一個 Multiply Node

Multiply Node 可以將A跟B相乘，out則為相乘後輸出，因為我們希望邊緣光可以透過color node來換顏色，因此我們把Fresnel Effect跟color node個別放上A、B，兩個相乘後Fresnel Effect會受到color的影響，Fresnel Effect的顏色可以隨著color改變。



- 將 Fresnel Effect Node 跟 Color Node 連上 Multiply Node

記得先將 Fresnel Effect Node 原本的線刪掉!!

- 將 Multiply 的輸出連上Emission

連上後即可以看到Main Preview的變化，記得按儲存!



接著回到Scene視窗，看看現在的御守套上邊緣橘光的效果怎麼樣


## 讓邊緣光閃爍不停

shader 當然是看個人的喜好以及遊戲需求製作的，像我就覺得只是橘色邊緣光不夠華麗 !

我 ! 要 ! 讓 ! 它 ! 閃 ! 閃 ! 發 ! 亮

我們觀察一下目前有使用到的 Fresnel Effect Node ，根據我們調動power屬性，會發現邊緣光的強度不同。


把 power 的值在 1~4 的範圍間調動會發現，有種閃爍的feeling ~


- 新增 Remap Node

Remap的In Min Max 區間的值會對應到Out Min Max區間的值。


根據以下這張圖來解釋，輸入 -1~1 區間的值，會輸出 1 ~ 4 這個區間裡的值。


讓我們先新增Remap Node!


- 將Remap Node的**輸出** 範圍調整至 1 ~ 4


- 將 Remap Node 的輸出連接上 Fresnel Effect Power


接上之後你會發現Main Preview上預覽的效果跟沒放Remap時一模一樣 ! 而這是因為我們只是設定了輸出的範圍是1 ~ 4，然而我們根本沒有給他-1~1之間的輸入值(就是沒給輸入值拉)，因此預設它的**輸入** 範圍是-1，而得到**輸出** 範圍絕對是1。

Fresnel Effect 的 Power值其實只得到1。

- 新增 Time Node


- Time 當前的時間值
- Sine Time 當前時間的sin值
- Cosine Time 當前時間的cos值
- Delta Time 當前幀時間，前一幀到後一幀的時間
- Smooth Delta 平滑後的當前幀時間


因為我們希望隨著時間，Fresnel Effect 的 Power 值可以在 1 ~ 4 之間來回，所以我們將time Node 的 sine time 屬性連接到Remap的In裡。

為何要選擇sine time呢? 因為 sine 的值 介於-1 ~ 1之間，恰好符合我們 Remap 的輸入範圍。


放上後我們可以從 Main Preview 看到 Fresnel Effect 的邊緣光開始閃爍了!

只是... 它閃爍的速度好慢

- 再添加一個 Multiply Node

先把time node 跟remap node的連結砍斷!


再把 multiply node 的 A (B也可)，連上time node 的 sine time 屬性


最後將multiply node 的輸出連結到Remap的輸入


可以調整B屬性的參數值，因為multiply node可以讓A跟B相乘，所以B的值越大閃爍的越快


不過你會發現，呈現的結果確實有快一些，但是在邊緣光極大跟邊緣光極小的效果呈現的特別久，可是我們要的是快速閃爍呀 !

- 新增一個sine node

把 multiply node 跟remap node的連結砍斷 !

其實做到這一步驟我很開心，大家也很開心，只可惜在新增sine node的原因我也不確定。

我只能猜測是因為time node的sine time 屬性 乘上 multiply 的 B屬性的輸出可能超過 -1 ~ 1 之間，才會讓邊緣光閃爍得很奇怪，因此我們需要使用sine node，sine node會把輸入的值轉換成正弦值輸出。


新增一個sine node


將multiply node的**輸出** 跟sine node**輸入** 連結，將multiply輸出結果轉換成正弦值。

最後再把sine node的**輸出** 跟remap的**輸入** in連結，轉換成正弦值的範圍恰好是remap輸入的範圍
-1 ~ 1 之間 。


記得最後一定要儲存!!!

完成啦!


---

# 參考影片做法

[KM Unity Shader Graph 教學 01 EdgeGlow / 邊緣發光 作者 : Kai-Ming Yang](https://www.youtube.com/watch?v=7hpaVDivGDc)
# 參考資料

[一文读懂什么是渲染管线(7k字)](https://www.cnblogs.com/forever-Ys/p/15520028.html)

[Unity Documentation](https://docs.unity3d.com/cn/2019.4/Manual/render-pipelines.html)

[Unity Node Library](https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Math-Nodes.html)

[台部落:Shader Graph學習（二）](https://www.twblogs.net/a/5f0463a141b2036d5096116f)