內容概要：

1、Shader Graph介紹

2、設定及工作流程介紹

3、Demo展示

4、自定義節點介紹

 

 

一、Shader Graph介紹

Shader分為Vertex Shader和Fragment Shader

Vertex Shader（頂點著色器）：位置、法線、UV。將CPU傳來的以上資訊轉換正確對映到螢幕座標裡面

Fragment Shader（片段著色器）：貼圖、光照、陰影。為螢幕上面片進行著色處理

 

 Shader Graph優點：不必程式設計除錯、視覺化編輯

 

 

二、基本設定

1、為Unity新增ShaderGraph元件

Window—Package Manager—All—Shader Graph、Lightweight Render Pipeline—Install

2、建立Lightweight的配置檔案

Assets中，右鍵Create—Rendering—LightweightAsset

3、將建立的配置檔案配置到U3D

Edit—Project Settings—Graphics—Scriptable Render Pipeline Settings，將2步建立的配置檔案拖拽到此

4、Assets新建Shader—UnlitGraph

雙擊開啟建立的UnlitGraph。該視窗可多開，可複製貼上

Unlit Master：節點中最後一個節點，有且僅有一個，是定義材質表面的一個節點

SkodeUnlitGraph：最終效果顯示視窗，可右鍵更改顯示預覽的模型/形狀

 

Save Asset：儲存結果

 

5、給要體現該shader的物體設定該shader

Material—graphs—Shader

6、更改ShaderGraph的Color，並且Save Asset，我們會發現SkodeUnlitGraph（最終效果顯示視窗）和scene視窗結果發生改變

7、在視窗內右鍵Create Node

Artistic：美術相關，飽和度等

Channel：RGB。。。

Input：從mesh可以獲取的一些資訊，法線、切線、位置、Matrix、貼圖等

Master：上面第4條有提到

Math：數學相關函式

Procedural：在ShaderGraph中程式化的生成噪音貼圖、形狀貼圖

Utility：邏輯與或等

UV：UV相關功能

 

三、利用ShaderGraph實現的特效

1、全息影像

1)、實現基本貼圖材樣

a、左上角graphs新增Texture

b、為Default新增logo

c、空白視窗右鍵Create Node搜尋“Sample Texture 2D”並建立

d、拖拽MainTexture，將生成的Property放到工作區成為屬性節點

e、將MainTexture屬性節點的輸出埠（小紅點）與Sample Texture 2D的Texture連起來

f、將Sample Texture 2D的RGBA賦給Unlit Master的Color

g、在最終顯示視窗UnlitGraph右鍵改為Quad形狀

h、Save Asset

2)、Scene視窗顯示

a、建立面片，並建立Material賦值給面片，Material選擇你建立的Shader：graphs—...

b、給面片Material的Shader—Main Texture賦值Logo

3)、增添color屬性

a、跟1)類似，在graphs/UnlitGraph新增Color，並將其作為屬性拖拽出來

b、上色：Create Node—Multiply節點（乘法操作），將Color屬性輸出給Multiply A(4)，Smaple Texture 2D的RGBA給Multiply  B(4)，Multiply  Out給Unlit Master的Color(3)

這時我們即可通過改變顏色屬性來控制最終顯示的顏色

注意：我們在Shader視窗設定的資料不能實時體現在Scene視窗，因為Material不能動態根據Shader改變。因此只能刪除Materiall重新賦值

4)、將條紋貼圖與logo混合

a、如3)所示，新增"HoloTexture"、“Sample Texture 2D”、“Multiply”

b、將Unlit Master的Surface改為Transparent，Blend改為Additive

5)、新增Tiling And Offset節點

Tiling And Offset實現UV偏移。將Tiling And Offset的輸出連至條紋貼圖的UV輸入埠。滾動Tiling And Offset—Offset的Y值，發現此時輸出顯示有了波紋的效果

6)、實現全息影像的滾動效果

建立Time節點、Vector2節點以及Multiply節點，Multiply節點將Time和Vector2乘起來的值賦值給Tiling And Offset的Offset輸入埠。

Vector2：X，0；Y，0.1

6)、Add

也可通過新增Split節點，將輸出至最後一步的顏色資訊通過它分離開，只輸出RGBA中想要的顏色

 

最終節點圖：

最終效果圖：

 

 

 

 

 

2、Fresnel Effect（邊緣光）

基本效果

1)、建立PBR Graph

2)、建立Fresnel Effect節點

    通過Power調節外發光區域

3)、新增外發光顏色Color、相乘節點Mutiply，相乘即可改變外發光的顏色，將相乘結果賦值給PBR Master的Emision輸入介面即可

4)、新增Sample Texture 2D，Ctrl+D複製第二個Sample Texture 2D

    這兩個節點用於得到輸入的Albedo、法線貼圖

5)、在左上角的graphs裡建立兩個Texture輸入介面，分別是材質貼圖、法線貼圖，將這兩個輸入點拖出來作為屬性，分別賦值給4)，將其中一個的Type改為Normal（Normal連線Normal介面），將Albedo節點、Normal節點的RGBA輸出埠分別連顯示節點的Albedo、Normal輸入埠

6)、將外發光的值作為屬性暴露出來

    在左上角的graph視窗建立Vector1，改名Power。將其作為屬性拖到工作區，連線至Fresnel Effect的Power埠。值暫設為3

7)、給模型設定該ShaderGraph：graphs—...

 

積雪效果

 

3、溶解效果

1)、選中2的法線和主貼圖的兩個節點，右鍵轉化成子圖：Convert To Sub-graph

    子圖儲存在資料夾中，後續其他ShaderGraph共享該子圖。

2)、工作視窗新增剛才建立的子圖（主貼圖、法線貼圖兩節點的子圖），graphs新增主貼圖、法線貼圖兩個屬性，將該兩個屬性賦值給子圖。將子圖輸出節點1給顯示節點的Albedo，2給Normal

3)、新增噪音貼圖Sample Noise，輸出賦值給顯示結果的Alpha，調整Scale的值，暫為100

4)、新增Vector1，賦給AlphaClipThreshold

這時，調整Vector1的值，便可看到消融效果的出現

5)、顯示邊緣，使消融效果更明顯

a、建立Subtract節點（減去）

    將Vector1的值給Subtract節點的A，噪音輸出的值給B埠，即Subtract值為Vector1值減去噪音值

b、增加Step節點：該節點通過Edge將輸入的值進行二元區分

    將Subtract結果賦給Step的In（輸入）埠，為使物體有邊緣效果，Edge值暫設為-0.05（Edge為0時，無邊緣效果。大於0的為1，小於的為0）

c、新增Color節點（調整Color的顏色。預設黑色，無法顯示邊緣），乘以Step輸出的值，將結果賦給顯示節點的Emission埠。

e、新增Time、Fraction節點（該節點使數值一直在0-1之間迴圈）

    Time的Time輸出埠連至Fraction節點輸入埠，輸出埠連至Subtract的A埠。

    刪除Vector1節點，將Faction的輸出值連至顯示結果的AlphaClipThreshold埠

 

 

4、傳送門效果

1)、建立Twirl節點、Sample Texture 2D

    Twirl節點：作為Sample Texture 2D的輸入屬性，旋轉Sample Texture 2D的UV

    Offset：控制明暗區域的改變

2)、建立Voronoi噪音，刪掉Sample Texture 2D，改連至Voronoi

    Angle Offset：控制噪音形狀的改變；Cell Density：細胞密度

3)、建立Ellipse

4)、將Ellipse和Voronoi用Mutiply相乘

5)、這時調整Twirl Offset的X、Y或Voronoi的X，即可實現傳送門效果

 

 

5、電視效果