最近在社群看到美術同學

fkkssj

的 shader 學習筆記，集美術與程式於一身，強得不可思議，搬來分享給大家，建議戰略性 mark~

之前是一枚每天快快樂樂的原畫，偶然一天在專案中接觸到了 shader 這個東西，從此便走上了一條不歸路。

其實做的專案基本也不怎麼需要 shader 這種東西，但是感覺還挺好玩的，現在比較喜歡在 blender 裡面連一些效果，然後看能不能移植到 Cocos 中實現。

想記錄一下自己做的一些陰間的東西，萬一以後會用上也方便查詢找尋思路。

其實從一個什麼程式碼都不懂的美術開始學 shader 這種東西，剛開始的階段是很痛苦的，自學的過程中也踩了很多坑，但是隻要把基本的東西學清楚了，後面就是一個好玩的創造的過程了，也歡迎美術同學和我一起學。

翻出了自己 N 年前畫的一個披風圖示，給它+點陰間特效。

加完shader：

這個 shader 非常簡單，演算法也很基礎，儘量寫的詳細，方便一些新手能看懂。

第一步，在 PS 給圖示繪製特效遮罩圖 紅色的部分準備做流光，然後綠色的部分衣襬就是一點飄火的效果，背景的藍色準備做火焰，這裡使用通道也可以使用圖層用線性減淡模式也可以。

PS 線性減淡的原理是將圖層之間的 RGB 值簡單粗暴的相加，和 Cocos 中的粒子預設的混合模式是一樣的效果。

然後把背景去掉最後得到兩張這樣的圖。

此外還用了兩張特效貼圖。

是這種比較輕的紋理，適合做一些 uv 的偏移。

對比度比較高的這種波紋圖，適合做火焰或者流光一類的東西。通道圖和流光圖加起來不到 100Kb，可以說是非常省資源了，關鍵是還可以複用啊！

第二步製作流光的效果新建一個 shader，製作流光的效果，需要一個沿著我畫出來的金屬遮罩走。

這裡因為 uv 的x分量，是從左往右從 0-1，所以使用一個這樣的函式，讓他產生 0-1-0 的效果 。

再呼叫我們遮罩圖的 r 通道，相乘就得到了一個流光的效果：

結果：

然後流光的大小範圍（用 pow 函式控制）和顏色透過 property 在外部進行調整。

第二步是製作衣襬那裡的火焰流光。

然後這裡詳細解釋一下 uv 取樣的原理。

然後知道了這個原理，我們來做火焰流光的效果。

首先有這樣一張流光貼圖：

我們現在要讓他產生躁動感。使用給的 uv 偏移的紋理，乘以一個比較小的值，再與引擎本身的 uv 相加。

得到了這樣一個新的 uv，使用這個 uv 對原來的流光圖取樣。

會取樣出一些具有扭曲感的效果：

然後如果我們讓那個 uv 偏移的紋理隨著時間動起來取樣的結果是不是就有一種動態的扭曲感覺：

現在在 property 裡面定義幾個引數方便調控。（這裡我習慣於用一個 vec4 來調控圖片的 uv，xy 分量調控貼圖的縮放，zw 分量調控 uv 的偏移）

別忘了在片段著色器裡面宣告一下：

最後再進行計算：

最後把流光和火焰的結果和原圖加起來：

就獲得了一個基本的流光效果了，顏色也可以在外部進行調整。

然後最後背景的火焰我比較懶，就直接用剛剛衣服上的火焰把 uv 的縮放值和偏移值調整一下，再乘以遮罩的 b 通道，就可以了。

最後衣服上的符文和寶石上的呼吸燈也都是畫遮罩做的，這裡就不加上去了。完整程式碼如下：

再隨便加一點陰間的粒子，敷衍一下趕快結束

具體我就不細調了，這個是我之前做的，原始檔已經不見了，現在重做一遍也不太好調的跟之前一摸一樣 。

貼圖和程式碼上面都給了，想試試可以直接複製貼上大法。自己調整一些 tile 的引數可以實現一些不同的效果。

另外通道圖也可以自己擦除一部分割槽域，比如衣襬被上面肩甲遮住的投影那裡應該暗一些。總體來說是個很基礎的東西了，剛學習 shader 的同學可以試一試。

可以看到最後取樣了 5 次貼圖，雖然貼圖大小可以壓縮到 256*256，但是能省還是儘量省，自己做著玩就無所謂了，實際專案中貼圖的取樣次數還是儘量減少，尤其是1024以上解析度的貼圖。

TAG: 流光uv貼圖shader遮罩