從頭學ShaderGraph ：UV與基礎材質

寫在前面

由於本人美術出身，加上不會寫程式碼，，無奈成為連連看玩家，從最早的Shader Forge，Amplify Shdaer Editor，到現在的Shader Graph，Substance Designer，都有所涉及。 Shader Graph早期版本，節點貧瘠，問題眾多，所以棄坑了許久，偶然聽聞近期更新之頻繁，群友哀嚎學習資源之匱乏，遂重新開坑Shader Graph，望大家多多捧場。 我會找些有意思的shader案例，在Shader Graph中重現出來，主要講解 製作思路 與 基礎原理，要學習軟體操作的請自己加油。 提前宣告：除部分常見shader效果實現外，本人文章將多以Youtube的Shader Graph案例為主。或把Forge/ASE的shader，在Shader Graph重現，如果是別人的案例，我會貼出連結地址或原始出處。本人能力有限，如過看到有任何地方寫的不對，請告之，我會改正。

正文開始


現有Shader Graph節點被分為8類，每個節點的詳細資訊可以看官方文件

Node Library | Shader Graph | 7.1.6

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

也可以對著節點右鍵，點Open Documentation，檢視指定節點的文件。


所有節點用處，其實可以總結為3大類：輸入→運算→輸出

• 輸入：圖片，數字等一些列外部能取到的資訊
• 運算：加減乘除平方開方等，將上述輸入內容進行處理，生成新的影像
• 輸出：將運算後的圖片或資料，餵給各種光照模型的Master節點，完成著色。
  

這就是著色器（Shader）


他一共做了4件事

• 以圖中UV方式對映一張圖
• 外部輸入一張彩圖
• 外部輸入一個顏色，顏色與上圖相乘
• 該圖輸出到 Unlit Master 的 Color
  

可見，輸入有2個：圖片 與 顏色，運算也有2個：UV 與 乘法（運算）。如果要做文章，自然在UV和運算上。

UV

可能某些程式，天天能看到模型貼圖，但至今不知道UV是起什麼作用。

UV是什麼？他其實是一種規則，告訴貼圖應該怎麼貼在模型上。模型做完後，需要手動展開UV，再製作貼圖。之後貼圖便能以該UV的規則，貼在模型上。


*Split:分離通道 / Combine：合併通道

基礎的UV看似一張彩圖，其實是用兩個通道來記錄貼圖的上下左右位置。拆開UV，可以看到UV的U記錄左右資訊，UV的V記錄上下資訊。

所以，改變UV也會改變圖片對映方式


*OneMinus：用一減去輸入（即1-x）

我將U左右翻轉，最終圖片也會左右翻轉


UV乘以一個數值，就是縮放(Tiling)，UV加減一個值，就是移動（Offset）。當然你也可以直接用Tiling And Offset這個節點。


UV大類中還有很多節點，都可以試試，還挺好玩的。


理解了UV含義後，現在回頭再看看。並非只有製作模型時的UV，能當作圖片對映規則，只要是能再畫面中變化的數值，均可當作UV。

舉個例子，以世界座標的XZ來當作UV



這個可以用來做地面重複的瓷磚材質，模型都不用展UV。（或者你可以用Triplanar節點，做三面對映）

鋪墊結束，下篇開始說實際案例。節奏大概是 簡單節點，一篇介紹兩個；複雜節點，一篇說一個。

基礎材質



這次來做連連看案例，基礎的PBR材質，剛入門shadergraph的可以來看看，案例檔案會放在文章底部。

為了顯示效果，我選擇HDRP來做演示專案的管線，ShaderGraph做的內容可以通用，但數值上會有稍許不同。

基礎材質，也就是Standard材質，是我們使用unity過程中最常見的一種著色器，相信大家對基礎材質的每項引數都很熟悉。

所以把這個作為第一章，不會有技術門檻（主要是熟悉節點操作）。當然，如果覺得這篇內容都會，可以跳後面文章。


PBR材質，自然要以PBR Master作為輸出節點

先來分析下Standard材質球的貼圖和控制引數

Metallic工作流：

貼圖

• 顏色：Albdeo(RGB)+Alpha(A)
• 材質：Metallic(R)+AO(G)+Smoothness(A)
• 法線：Normal（RGB/OpenGL）
• 自發光：Emission(RGB)
  

控制元件

• 所有貼圖的UV位移和縮放
• 與Albedo相乘的顏色
• 法線強度
• 金屬度/光滑度/AO強度滑塊（0-1）
• 與自發光相乘的顏色（可以是HDR）
• 自發光強度
  

把貼圖貼好

首先是UV


建立一個Vector4，取名叫Tiling And Offset，RG做Tiling，BA做Offset，這個在上篇也寫過。

將所有貼圖位放入Graph中，並將對應線條都連好。


注意法線要選擇Type為Normal。以及每種貼圖位在缺少貼圖時的預設顏色，比如法線要選為Bump，自發光選為Black等。


接下來是控制元件

普通的強度控制，就直接是一個數值乘上去。強度數值可以設定為滑塊，比如金屬度/光滑度/AO這種，只能在0到1之間變化，可以用滑塊來控制。而法線強度這種就無需用滑塊。


可以在左邊Properties，切換引數的模式為滑塊Slider。

但不是所有強度都是用乘，AO和Normal不同。要用Lerp和Normal Strength


*Lerp：線性插值 / Normal Strength：法線強度

AO這個很好理解。你希望AO強度是0的時候，顏色應該是白色，也就是1。強度是1的時候，顏色應該是貼圖。

如果用乘法，任何數乘0都是黑。所有行不通，要用插值來切換AO強度。

除此之外

HDRP是用的物理單位的燈光，一個10000Lux的平行光作為太陽光，再用後期調整曝光值，強行把顏色壓下來。

這會導致，同一個Emission的強度，所產生的Bloom效果，在HDRP與URP(LWRP)中差很多。

Unity預設的HDR顏色選項，範圍只有-10到10。

而我為了達到圖中Bloom效果，強度乘了10w倍。

tql



當然，具體數值，你可以自己調整。

下面是我的檔案

檔案分享

https://share.weiyun.com/5fg7YEG

share.weiyun.com

密碼：7rdabm

使用方法：找個HDRP或著URP(LWRP)，拖進去。我的資料夾下有預製體。記得調自發光強度。

下面是我的artstation地址：https://www.artstation.com/luteli


作者：Lute Li
專欄地址：https://zhuanlan.zhihu.com/p/98052762