Unity Shader 入門到改行8——序列幀動畫

不知道是啥

0.本文示例代碼地址

GitHub

1. Unity 內(nèi)置時間變量

動畫的本質(zhì)就是根據(jù)跟隨時間顯示不同畫面沛豌。我們要在 Shader 中來實現(xiàn)動畫,離不開時間變量的獲取赃额。目前 Unity Shader 提供了一系列內(nèi)置變量支持對于時間的訪問加派,所有與時間相關(guān)的內(nèi)置變量如下表:


Unity內(nèi)置時間變量

2. 序列幀動畫實現(xiàn)

2.1 Shader 中實現(xiàn)序列幀動畫的思路

在 Shader 中實現(xiàn)序列幀動畫,有以下幾個關(guān)鍵點:

  • 所有的幀都繪制在同一張圖片上跳芳,作為紋理傳遞給 Shader芍锦,實際采樣時采樣大圖中對應的小圖部分
  • 使用時間變量來計算當下應該展示的幀在紋理中的位置
  • 在片元著色器中針對紋理采樣時,計算新的 uv 坐標

2.2 代碼分析

在場景中新建一個 Quad飞盆,面朝攝像機娄琉,然后創(chuàng)建shader和材質(zhì),并將材質(zhì)賦給 Quad吓歇。我們先貼最終代碼

Shader "Shader_Examples/07_SequenceAnim"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Speed ("Speed", Range(1, 100)) = 30        
        _RowCount ("Row Count", float) = 8
        _ColumnCount ("Column Count", float) = 8
    }
    SubShader
    {
        Tags { "Queue"="Transparent" }
        LOD 100

        Pass
        {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;              
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _RowCount;
            float _ColumnCount;         
            int _Speed;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {               
                float time = floor(_Time.y * _Speed);               
                float row = floor(time / _ColumnCount);
                float column = time - row * _ColumnCount;
                
                half2 uv = float2(i.uv.x /_ColumnCount, i.uv.y / _RowCount);
                uv.x += column / _ColumnCount;
                uv.y -= row / _RowCount;

                fixed4 col = tex2D(_MainTex, uv);               
                return col;
            }
            ENDCG
        }
    }
}

  • 變量聲明中使用 Speed 來控制序列幀動畫播放的速度
  • _RowCount_ColumnCount聲明這大圖中小圖的排布方式
  • 序列幀動畫一般都是包含透明度的圖片孽水,所以這里的 Shader 中需要渲染半透明物體的標配Tags
Tags { "Queue"="Transparent" }

以及半透明物體的渲染開關(guān)

ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
  • 頂點著色器沒有什么好說的,只干最簡單的事:將頂點坐標從模型坐標轉(zhuǎn)換到裁剪坐標
  • 重點在片元著色器中城看,核心是如何計算當前應該渲染的小圖的實際 uv
float time = floor(_Time.y * _Speed);               
float row = floor(time / _ColumnCount);
float column = time - row * _ColumnCount;
                
half2 uv = float2(i.uv.x /_ColumnCount, i.uv.y / _RowCount);
uv.x += column / _ColumnCount;
uv.y -= row / _RowCount;

2.3 最終渲染效果

序列幀動畫效果

3. 無限滾動背景

實現(xiàn)比較簡單女气,直接上 shader 代碼吧

Shader "Shader_Examples/07_ScrollingBackground"
{
    Properties
    {
        _NearTex ("Near Texture", 2D) = "white" {}
        _FarText ("Far Texture", 2D) = "white" {}
        _Lightness ("Lightness", float) = 1.0
        _SpeedNear ("Near Speed", Range(0, 1)) = 0.05
        _SpeedFar ("Far Speed", Range(0, 1)) = 0.08
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag                       
            
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;              
                float4 vertex : SV_POSITION;
            };

            sampler2D _NearTex;
            float4 _NearTex_ST;
            
            sampler2D _FarText;
            float4 _FarText_ST;

            float _Lightness;
            float _SpeedNear;
            float _SpeedFar;            
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.uv, _NearTex) + frac(float2(_SpeedNear, 0.0) * _Time.y);              
                o.uv.zw = TRANSFORM_TEX(v.uv, _FarText) + frac(float2(_SpeedFar, 0.0) * _Time.y);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 nearColor = tex2D(_NearTex, i.uv.xy);
                fixed4 farColor = tex2D(_FarText, i.uv.zw);

                fixed4 color = lerp(nearColor, farColor, farColor.a);
                color.rgb *= _Lightness;

                return color;
            }
            ENDCG
        }
    }
}

幾個關(guān)鍵點:

  • 用于無限循環(huán)的圖片,設置中的WrapMode必須設置為 Repeat测柠,如圖所示:
    圖片的WrapMode設置
  • 核心思想和 uv 動畫一樣炼鞠,根據(jù)時間變量對 uv 進行水平坐標的偏移,得到動畫效果
  • 近層圖片和遠程圖片的速度不一樣
  • 使用近層圖片的 alpha 值來對兩個圖片的顏色進行插值
  • 可以把 uv 偏移值的計算放到 CPU 中計算轰胁,然后設置材質(zhì)參數(shù)谒主,可以得到完全一樣的效果
    最終得到的動畫效果


    滾動的雙層背景
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市赃阀,隨后出現(xiàn)的幾起案子瘩将,更是在濱河造成了極大的恐慌,老刑警劉巖凹耙,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件姿现,死亡現(xiàn)場離奇詭異,居然都是意外死亡肖抱,警方通過查閱死者的電腦和手機备典,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來意述,“玉大人提佣,你說我怎么就攤上這事吮蛹。” “怎么了拌屏?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵潮针,是天一觀的道長。 經(jīng)常有香客問我倚喂,道長每篷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任端圈,我火速辦了婚禮焦读,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘舱权。我一直安慰自己矗晃,他們只是感情好,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布宴倍。 她就那樣靜靜地躺著张症,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鸵贬。 梳的紋絲不亂的頭發(fā)上俗他,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機與錄音恭理,去河邊找鬼拯辙。 笑死,一個胖子當著我的面吹牛颜价,可吹牛的內(nèi)容都是我干的涯保。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼周伦,長吁一口氣:“原來是場噩夢啊……” “哼夕春!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起专挪,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤及志,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后寨腔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體速侈,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年迫卢,在試婚紗的時候發(fā)現(xiàn)自己被綠了倚搬。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡乾蛤,死狀恐怖每界,靈堂內(nèi)的尸體忽然破棺而出捅僵,到底是詐尸還是另有隱情,我是刑警寧澤眨层,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布庙楚,位于F島的核電站,受9級特大地震影響趴樱,放射性物質(zhì)發(fā)生泄漏馒闷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一伊佃、第九天 我趴在偏房一處隱蔽的房頂上張望窜司。 院中可真熱鬧沛善,春花似錦航揉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至尤蛮,卻和暖如春媳友,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背产捞。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工醇锚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人坯临。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓焊唬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親看靠。 傳聞我的和親對象是個殘疾皇子赶促,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容