從零開始獨立游戲開發(fā)學習筆記（三十九）--Unity學習筆記 19-- Creative Core2（下）
書接上篇，所以標題數(shù)字也跟著，直接從 1.8 開始計數(shù)。
本篇主要是 shader graph 的使用。
1.8 Shader Graph 起步
之前我們只是使用 Unity 提供的 Shaders。但是實際上我們完全可以通過寫代碼創(chuàng)建自己的 Shaders。不過就像該系列第一篇文章里開頭就說的一樣，本系列教程不會用到任何代碼。因此我們使用的是 Unity 提供的一個可視化創(chuàng)建 Shaders 的工具--Shader Graph。
Shader Graph 提供了無需代碼來創(chuàng)建 Shader 的方式。我們可以組合 textures，在 fragment shader 里移動紋理，或者在 vertex shader 里改變 vertices 的位置。專業(yè)的 TA 會創(chuàng)建 shader 來完成各種特殊的藝術風格，比如巖漿，風暴云等等。
本教程將會教你像一個 TA 一樣創(chuàng)建 shader，來讓其他藝術家用在 materials 上。
1.8.1 查看 shader graph
示例項目中已經(jīng)有兩個創(chuàng)建好的 shder graph。雙擊打開，或者點擊 material 右邊的 edit 按鈕。
不過示例項目的 shader 看起來有些可怕，我們還是從一個簡單的 shader 開始慢慢 build。
在 project window 里創(chuàng)建一個 shader graph -> URP -> Lit Shader Graph。便可見如下內(nèi)容。
2. 左邊的框框里將會是以后暴露出來的屬性，TA 會在這里添加想要暴露給藝術家的屬性（如果有的話）。藝術家給 materials 更換該 Shader 的時候，就可以調整這些屬性。 3. 右下角則是一個實時監(jiān)測 shader 效果的 preview。 4. 右上角的 graph inspector 正如其名，就是個 graph 里的 inspector，用于顯示選中東西的設置。 5. 中央的這兩個版塊比較特殊。叫做 master stack。定義了這個 graph 的最終效果，可以看到分別叫做 vertex 和 fragment，分別包含著一些節(jié)點，這些節(jié)點是最終的節(jié)點，經(jīng)過前面的處理之后，在這里顯現(xiàn)效果。
操作
一些常見的有用操作：
鼠標中鍵移動。滾輪縮放，
選中某個節(jié)點，按 F 會聚焦過去（雙擊沒用）。
按 A 會顯示適應屏幕的布局。
1.8.2 添加程序生成貼圖
本教程將會教你制作一個自發(fā)光，透明，閃爍的效果。
為了制作閃爍效果，我們需要使用程序生成噪聲貼圖（procedural noise map）。使用 procedural 來修飾，是為了區(qū)分于其他 texture，表示該貼圖是通過算法生成的，而不是來源于某個圖片或者什么實際來源。
很幸運地，unity shader graph 提供了一些 noise 效果。
添加 node
如果你喜歡亂按，那么肯定已經(jīng)發(fā)現(xiàn)鼠標右鍵可以創(chuàng)建節(jié)點。但實際上，有更方便的快捷鍵，按空格鍵即可快速喚出創(chuàng)建菜單。
這里我們先添加一個 gradient noise。
1.8.3 隨時間移動
想要創(chuàng)建閃爍效果，我們需要讓 noise 移動。但怎么移動呢？我們之前在講 texture 的時候，就已經(jīng)提到過 offset 的使用。那么我們只要在 shader graph 中讓其改變就行了。
創(chuàng)建一個 tiling and offset 的 node。
把該 node 的 output 連到 noise map 節(jié)點的 UV input 中。之前我們也是提到過 UV 只是為了區(qū)分于 XYZ 的二維坐標系。
調整一些 tiling 和 offset，可以很直觀地看到變化。
為了讓這個變化能夠自主持續(xù)地變化，我們創(chuàng)建一個 time 節(jié)點。
自己拖動下分別到 tiling 和 offset input 上試試，可以看到已經(jīng)可以自動變化了。
將 grdient noise 的 output 連到 fragment 的 base map 節(jié)點上。現(xiàn)在就可以在右下角的 preview 中看到效果了。
點左上角的 save asset 來保存，ctrl+s 沒用
1.8.4 添加 material 輸入?yún)?shù)
為了讓藝術家來調節(jié) shader 效果，比如說閃爍速度，我們會想把時間參數(shù)暴露出來。
為了達到這一效果，我們需要使用 input nodes。而 input nodes 則是由剛剛提到過的，左邊的框框來創(chuàng)建。
因此我們創(chuàng)建一個 float 類型的節(jié)點來控制速度。
將該節(jié)點拖到圖上，這時我們遇到了一個情況。我們想讓這個節(jié)點和 time 一起使用。但是 time 節(jié)點根本沒有輸入點。
因此，我們創(chuàng)建一個 multiply 節(jié)點，將速度節(jié)點和time連在輸入上。multiply 的輸出節(jié)點連在 offset input 上。
但是，發(fā)現(xiàn) noise 突然停下來了。這是因為我們的速度節(jié)點初始化后為 0。
在 inspector 里便可以輕松調整。
1.8.5 組合貼圖
為了讓結果看起來閃爍效果更強，我們這次嘗試組合兩個貼圖。
比較簡單的是，第二張圖我們就用剛剛的圖，只不過將速度降為一半。復制一下剛才創(chuàng)建的幾個節(jié)點，然后稍加調整，比如說 timer 和速度節(jié)點可以復用。
noise map 正如所看到的一樣，就是個灰度圖。因此我們再創(chuàng)建一個 multiply 節(jié)點，將這兩個 noise map 連在一起，最后輸出到 base map 中。
1.8.6 分組
就是單純地分組，讓整個 graph 看起來 well organized。以及添加一些注釋，讓自己知道自己在干什么。
把想要放在同一組的節(jié)點選中，在任意節(jié)點上右鍵選擇 group selection 或者 ctrl+G 即可。
1.8.7 允許在 material 中調整 texture 的 scale
現(xiàn)在我們要允許調整 scale。因為我們的 noise map 在一些大型物體上會顯得像是一些小噪點（雖然本來就是噪點），因此我們需要讓 scale 能夠在 material 中進行調整。
1.8.8 調整對比度
現(xiàn)在的 map，對比度偏高，黑色和白色很明顯，沒什么灰色。因此我們希望能夠自主調整對比度。
而為了達到這種效果，我們可以使用 remap 節(jié)點，這個節(jié)點可以縮小灰度值的范圍，讓對比度更小一些。（不是說 remap 只能縮小范圍，而是我們要用 remap 來縮小范圍）
添加一個 Vector2 類型的 material property。
新建一個 remap 節(jié)點，把之前的 map 拖到 In 里。剛剛新建的 Vector2 類型拖到 out min max 里。把 In min max 改成 0 和 1。Vector2 的值改成 0 和 1，結果如下圖：
解釋幾個問題：
這是在干嘛？簡而言之，remap 把 In min max 范圍重新擴展（或縮?。┑?Out min max 的范圍。然后對 In 的輸入進行處理。
這里我們將 In min max 改成 0 和 1，正好對應我們殊途灰度圖的最小值和最大值。因此 remap 能夠對整個灰度圖進行擴展（或縮?。?。
然而，因為我們的 Vector2 類型值也剛好被我們設置成了 0 和 1，因此現(xiàn)在這個 remap 沒有任何效果。
因此，我們可以調整 vector2 的值，讓其大于 0-1 的范圍，則是增加對比度。小于 0-1 的范圍，則是減少對比度。
1.8.9 調整顏色和透明度
調整顏色
添加一個 color 類型的 material property，和上一步的結果 multiply 一下。
現(xiàn)在就已經(jīng)可以調整顏色了，但我們希望顏色更時髦一些，使用 HDR 效果。
其實在剛才創(chuàng)建的屬性中，可以在 inspector 里，調整為 HDR mode。
但是還不夠，我們還可以使用 emission map（準確來說，是 procedural emission map）。因此我們除了把輸出給 base color，還要給 emission。
調整透明度
現(xiàn)在所有的地方都是同一個透明度，但是如果我們讓不同亮度下透明度不同的話，很明顯，閃爍效果會更好。
在 graph inspector 中，這次我們切換到 graph settings。將 surface 調整 opaque 為 transparent。（仔細看看 graph settings，這其實就是在 material 里設置的那些東西）
回到 graph workspace，可以看到 fragment 里多了個 alpha 節(jié)點，我們把和顏色相乘前的 map 拖到 Alpha 節(jié)點上。
現(xiàn)在，我們就擁有了一個自發(fā)光的，閃爍的 shader 了。
回到 graph workspace，可以看到 fragment 里多了個 alpha 節(jié)點，我們把和顏色相乘前的 map 拖到 Alpha 節(jié)點上。
現(xiàn)在，我們就擁有了一個自發(fā)光的，閃爍的 shader 了。
1.8.10 最后調整
fragment 里還有一些別的參數(shù)，來都來了，就都暴露出來唄。
比如說 metallic 和 smoothness。
1.8.11 創(chuàng)建 material
創(chuàng)建一個 material，切換 shader。shader graph 創(chuàng)建的 shader，會在 shader graph->你起的名字里找到。
2. 使用 shadergraph 制作旗幟飄揚動畫
2.1 介紹一些其他 nodes
2.1.1 position
position 控制對 mesh 的節(jié)點或者片段的訪問。比如說把位置設置成 view，那么著色器將會從攝像機的角度來渲染。
輸入僅有一個 space 參數(shù)：輸出的位置的坐標空間。有 object，view，world，tangent，absolute world 五種模式。
object：著色器渲染位置和 object 位置相關的時候使用。
view：著色器渲染位置和攝像機位置相關的時候使用。
world：著色器渲染位置和整個場景位置相關的時候使用。
tangent：著色器渲染位置和 object 的切線位置相關的時候使用。
absolute world：返回 object 在世界中的絕對位置。
試著用一用：
賦予一個 material 用在某個 object 上，移動攝像頭，發(fā)現(xiàn)物體會跟著移動，紋理的正面始終朝向攝像機。
2.1.2 time
之前已經(jīng)用過，直接講每個參數(shù)的含義：
time：提供平滑的時間值。
sine timme：提供時間的正弦值。
cosine time：提供時間的余弦值。
delta time：提供當前幀的時間。
smooth delta：提供平滑的當前幀時間。
2.1.3 gradient
先看圖：
在 gradient 里定義漸變顏色，在 sample gradient 里使用：
time 指的是漸變的位置，從 0 到 1 就是漸變顏色從左到右。
2.1.4 Texture 2D
沒什么好說的，要使用 texture 的時候就會用到。相關的節(jié)點有 Texture 2D 和 Sample Texture 2D。
2.2 旗幟飄揚效果
這個教程講的極其敷衍，這里給出我自己的制作心路歷程：
2.2.1 位置的變化
首先我們應該這么想，我想讓旗幟進行形變，因此我需要獲取 object 每一點的位置。如下圖是一個簡單的圖表：
position 的 space 參數(shù)設置成 object。
time 和 multiply 只是為了現(xiàn)在看看效果。
2.2.2 形變
然后，我們就要仔細想一想旗幟飄揚形變的基本原理是什么。
把旗幟看成一個立體，其實要做的是，讓 object 的 x,y 軸保持不變，z 軸的位移會根據(jù)時間和位置進行變化。
那么，既然 x,y,z 軸的變化不一樣，那么，理所應當，我們要把 x,y,z 軸分離出來，然后再合并。如下圖：
split 里有 4 個參數(shù)，rgba，這是顏色通道，不過對于 position 來說，這其實就是 xyz。A 通道我們用不上。
這里只是簡單的，把 3 軸的參數(shù)分離出來，再合并，此時的效果就和什么都沒有是一樣的。
（這里需要說一聲，右下角的 preview 中，x 軸是左右，y 軸是上下，z 軸是里外）
因此接下來，我們要對 z 軸進行操作，因為仔細想想形變的方向其實就是是 z 軸，也就是面對屏幕的方向。
因此，一個基本想法就是，利用時間和 x 軸的位置，來改變 z 軸的位置，如下圖：
這個圖很復雜，我們一一細講：
首先 position，split，combine 就不講了，名字表示含義。
這里我們讓 x 軸的值和 time 相加，然后再經(jīng)過一個 sin() 函數(shù)。
sin 很好理解，畢竟飄揚效果就是一個正弦波。但是為什么是 x 軸和 time 相加呢？
其實如果我們不使用 time 和 add，直接把 x 軸的值經(jīng)過 sin 也可以。此時的效果就是 object 會變成一個曲線形狀，但是不會隨時間變化。
因此我們要引入時間值，想象一個 sin 函數(shù)，隨著橫軸不斷增加，縱軸就會在 -1 和 1 之間變化。而 time 節(jié)點就是為了讓橫軸不斷增加。
2.2.3 固定移動
雖然剛才我們已經(jīng)可以讓旗幟飄揚了，但是其實并不是我們想要的樣子。因為旗幟應該有一邊保持不動（因為被固定在柱子上）。因此這一小節(jié)就來解決這個問題：
這里只展示改動的部分:
從 multiply 里實時的效果可以看到，中間有一個地方始終保持不變。這個地方就是 0 的位置，也就是 object 的邊緣。
主要效果由 uv + split 實現(xiàn)，one minus 只是用于改變固定的邊緣。
這里的 uv 是四維的，我們選取其中的 U 軸的值，與 sin 函數(shù)的結果相乘。
但是現(xiàn)在的效果依然不夠好，因為旗幟飄揚的幅度太大了，頻率也不夠快：
2.2.4 調整
這一步不會細講，畢竟都是一些數(shù)值調整，用各種 add，multiply，divide 節(jié)點來調整數(shù)值即可。比如說把 time 值翻倍就可以提高飄揚頻率，把 sine 節(jié)點后的值除下去就可以讓幅度變小。
效果如下：
至此，紅旗飄揚效果制作完成
