小功能丨Unity2018 Shader Graph——全息影像、物體消融
內容概要:
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、電視效果