Glitch Shader 製作紀錄

Glitch，這是關鍵字，其實 Google 也可以找到一些佛心原始碼。
這篇純記錄自己開始學寫 Shader，目的導向學習如何實踐 Glitch 的過程。

* 首先看一下最終的成像:

這三個圖片都是 Glith 效果，只是數值不太一樣，感受就不太一樣。

* 分析成像的組成:

        1. 切割出一個區塊
        2. 將區塊做水平方向的位移

1+2 的步驟就可以產生一張錯位的圖，如上圖 A, B, C，不斷重複步驟即可達到如動畫連續播放 "畫面錯位" 的效果。

* 最終成果 = 1 * 2

* 1. 

可以使用 Step(a, b) 來計算出來，Step(a, b) 比較 b < a 回傳 0，反之 b >= a 回傳 1

使用 Step 取出兩個範圍相減即可獲得一個如下圖右的區域範圍

Step(random, b)，我們需要亂數來幫助我們取得不同的區域範圍

random:

可以使用寫程式算出來

-- 這篇文章有講解 Noise 原理與 C#, Shader 端實做程式碼 → Introduction of Noise – 淺談雜訊

-- 這篇有提供日本Unity工程師實做的 Noise Shader 程式碼 → keijiro/NoiseShader

也可以使用一張 2冪次方*1px (e.q 64*1px) 的 Noise 貼圖，隨時間取貼圖上顏色數值

* 2. 

這部分相對單純簡單，就是對 UV 的 U 方向進行位移，唯一要注意的是貼圖設定格式中的 Wrap Mode 設定，Repeat 或 Clamp 對程式寫法有點差異而已

將 1. 想成 mask，只有白色的地方要移動，就會得到最終成果囉

代碼大概長這樣→ i.uv.x += mask *sin(_Time.y)