[Shader筆記]頂點動畫和紋理動畫

“ shader development using Unity” + Unity shader 入門精要筆記

詹閔翔
3 min readAug 12, 2019

p.s
1. 如果看不到程式碼,建議使用Chrom閱讀
2. 看這篇文章之前需要具備對shader的基本架構、渲染管線的理解,
你可以參考這篇文章

時間函數(float4)

_Time(t =遊戲自開始所經歷的時間):(t/20, t, 2t, 3t)
_SinTime(t = 時間的正弦值):(t/8, t/4, t/2, t)
_CosTime(t = 時間的餘弦值):(t/8, t/4, t/2, t)
unity_DeltaTIme (dt =每一幀時間間隔):(dt, 1/dt, smoothDt, 1/smoothDt)

圖案動畫(Pattern Animation)

Bokeh Effect 散景效果

作法:使用時間函數讓Alpha值可以規律的變化

既然我們已經有了圓形圖案的Shader(作法參考:連結),那麼這裡唯一要做的就只有製作一個隨時間變化的Alpha值,並加在fragment shader的輸出結果之前。

程式源碼:

與圓形圖案Shader唯一不一樣的地方只有

sin( _Time.y * _Speed)

頂點動畫(Vertex Animation)

飄動的旗幟效果

作法:修改模型空間的輸入頂點座標

製作一個函式並以uv、vertex為輸入參數,
輸出為旗頭不會飄動的遞減sin函數,並且加在Vertex shader的開頭

公式:

vertPosition.y +=

sin((uv.x + _Time.y *_Speed)* _Frequency ) * ( _Amplitude * uv.x);

uv.x :擺動會依照貼圖的x座標延伸
+_Time.y *_Speed:控制波動的速度
* _Frequency:控制波動的頻率
*_Amplitude :控制波動的振幅
* uv.x:為了製造旗幟頭不會擺動的效果(越接近旗頭晃動幅度越小)

程式碼:

p.s.如果套在Quad上的效果會非常不明顯,因為Quad只有4個頂點可以控制,而本範例是透過操控輸入頂點來製作擺動效果

Shader筆記系列:
[Shader筆記] 連你阿罵都能看得懂的Shader介紹

[Shader筆記]透明物體(Z-Test、Z-Write、Z-Buffer、Alpha Blending)
[Shader筆記] 程序化圖案 Procedural pattern

--

--

詹閔翔

專注於各種可能的技術解決方案,喜歡從技術的角度解決問題,也喜歡接觸各種新科技跟open source專案與時代一起進化,並樂於將所見所聞製作成人人都能輕鬆理解的教學文章分享於網路平台。https://studio-frontend-one.vercel.app/