Unity3D – Basic Shader Graph – 小綠人為例

簡介

Shader Graph是一種可視化製作Shader的編譯器,有點類似Unity之前很紅的Play Maker,在以往製作Shader是需要以程式來編譯,但在2018.1版之後,一切就大不同了。那有關這塊介紹就不贅述直接進入製作階段。

前置作業

在製作之前可以將你要先想一下這個Shader想要呈現怎樣的動態變化,影響的參數有哪些,是放在哪個物件上,最後再去準備材料。例如,在這案例中我想要控制小綠人號誌燈的速度,並且在人行號誌3D物件上,我需要準備的材料是一張小綠人連續動作拆解的圖片。

先了解

先在Asset中Create->Shader->Unlit Graph,點選剛新增好的Shader兩下就會開啟Graph Window。我們可以先新增一顆Material並選取剛剛新增好的Shader,雖然沒什麼東西但在之後一步一步做時可以在場景中看到此材質球的變化,就知道你的Shader Graph有沒有做好了。

下圖是打開Graph Window,在這我分成三個區塊,我先已完成功能後的圖來解說:
紅色區是可以從外部數入參數或是更換貼圖來改變整個材質球的運作效果。在左上角紅色框框中有個“”的按鈕,裡面有許多的資料型態可以新增,在這邊我僅需要控制它的速度(Speed)與材質 (Texture 2D)。新增好後也可以自行命名,我們也可在下圖右下角處看到剛剛新增的資料型態呈現在Material中。

青藍色區是我們將Node新增、串接的工作區塊。

橙色區是我們在工作區塊作動時會即時反應在材質預覽區塊中,但是假使你剛剛先照我說的步驟先放到場景中其實也是一樣。

開始弄“Node”

Unlit Master是所有Node交互後的最終成果,他也會顯示在預覽材質中顯示。這邊我們是新增Unlit Graph,所以Master會跟著你新增的Shader種類不同而他的Node也會長得不一樣,Input property也會不同。

外部輸入區塊我們小綠人號誌需要有速度跟貼圖,我們點選號新增一個Vector1,字面上的意思是(向量單位一)這邊就是一個數字的輸入,通常在Unity中Vector常會用在寫程式裡面。接著再新增Texture2D,最後把他們改成你想要的名稱。

新增Sample Texture 2D node,按滑鼠右鍵來新增,此Node的左邊是Input,即別的Node要輸入資料給此Node,而右邊是OutPut,在這Node處理完的資料傳給其他Node。

新增後我們可以看到紅色小框框處將它點著拉到空白處可以直接新增新的Node也會跟著你的拉的點新增相同的資料型態Node選項。這邊我們可以先新增一個Texture 2D Asset,先在工作區輸入一個材質來做Shader的調教,可以幫剛剛小綠人的Texture放在此。

接著我們看到Simple Texture 2D輸出端的RGBA(4),橙色區塊拖曳到Unlit Master的Color處即可。

我們要怎麼把一張貼圖拆成8份並讓他依照時間輪流播放呢?接下來先處理Texture分割的動作。

先選到Simple Texture 2D的UV拖拉到空白處新增Flipbook node,這個Node是在製作動畫的功能,先把紫色框框的勾取消。此Node左邊大紅匡處是設定要拆解貼圖的Width、Height與動畫跳格Time。這邊Width我們設定4,Height設定2,因為我們的Texture是做成4 * 2的圖樣,必須依照你的貼圖設定此處的值。

看到Flipbook的橙色框框UV(0)處,一樣點選多拉到空白處新增Tiling And Offset,這個Node功能照字面上的意思其實就可以知道了,將Texture依照時間做分割平移,依照Flipbook的寬高格式來依序平移。

做完了圖片的處理就要做動畫的時間軸了,將Flipbook的時間軸拉出來做簡單數學的運算,拉出Time新增Posterize,這node是在將量化的Input轉為值化的時間軸關鍵影格要呈現的圖。下方是Posterize的node code,每秒要進行幾個Step。這邊Step設定為1。

void Unity_Posterize_float4(float4 In, float4 Steps, out float4 Out)
{
    Out = floor(In / (1 / Steps)) * (1 / Steps);
}

接著將Posterize的In拉出去新增Multiply node,這個Node是乘法的數學公式,在以後做會很常用到。那我們的A就新增剛剛在外部輸入新增的Speed property,而B就新增單純的Time,如下圖2。

基本上小綠人大致上是完成了,可以看看Scene中的物件有沒有自己動起來。是不是漏了什麼?沒錯,就是我們在外部輸入還有新增一個Texture 2D,如下圖1,這邊我們就要新增一個Property Texture 2D,並替換掉剛剛新增的內部Texture 2D,如下圖2。

下圖3就是最終完成完成的Shader的Material,完成囉! 這邊放上檔案下載

Reference:https://docs.unity3d.com/Packages/com.unity.shadergraph@6.9/manual/Node-Library.html

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *