そろそろShaderをやるパート10 UVスクロールでテクスチャをスクロールさせる

4 min読了の目安(約4100字TECH技術記事

そろそろShaderをやります

そろそろShaderをやります。そろそろShaderをやりたいからです。
パート100までダラダラ頑張ります。10年かかってもいいのでやります。
100記事分くらい学べば私レベルの初心者でもまあまあ理解できるかなと思っています。

という感じでやってます。

※初心者がメモレベルで記録するので
 技術記事としてはお力になれないかもしれません。

下準備

下記参考
そろそろShaderをやるパート1 Unite 2017の動画を見る(基礎知識~フラグメントシェーダーで色を変える)

デモ

UVを時間変化させているのでテクスチャがスクロールします。

使用したテクスチャは下記です。
黒い画像に横1本の白い線が入っているだけです。

Shaderサンプル

Shader "Custom/Scroll"
{
    Properties
    {
        //スクロールさせるテクスチャ
        [NoScaleOffset] _MainTex ("Texture", 2D) = "white" {}
    }

    SubShader
    {
        Pass
        {
            Tags
            {
                "RenderType"="Opaque"
            }

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

            //変数の宣言 Propertiesで定義した名前と一致させる
            sampler2D _MainTex;
            half _SliceSpace;

            //GPUから頂点シェーダーに渡す構造体
            struct appdata
            {
                float4 vertex: POSITION;
                float2 uv : TEXCOORD0;
            };

            //頂点シェーダーからフラグメントシェーダーに渡す構造体
            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD1;
            };

            v2f vert(appdata v)
            {
                v2f o;
                //UVに時間を足してく
                o.uv.y = v.uv.y + _Time.y;
                o.pos = UnityObjectToClipPos(v.vertex);
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                //テクスチャとUV座標から色の計算を行う
                fixed4 col = tex2D(_MainTex, i.uv); //←頂点シェーダーから渡ってきたこのUVが時間で変化する
                return half4(col);
            }
            ENDCG
        }
    }
}

UVスクロール

o.uv.y = v.uv.y + _Time.y;の箇所がUVをスクロールさせている箇所です。
テクスチャはUVに基づいてオブジェクトに貼り付けられます。
すなわち、UVをスクロールさせればテクスチャもスクロールするというメカニズムです。

デモ2

前回の記事と組み合わせるとこのような感じになります。

【参考リンク】:そろそろShaderをやるパート9 ピクセルのローカル座標を参照してスライスさせる

Shaderサンプル2

Shader "Custom/SliceTextureScroll"
{
    Properties
    {
        //スクロールさせるテクスチャ
        [NoScaleOffset] _MainTex ("Texture", 2D) = "white" {}
        //色
        _Color("MainColor",Color) = (0,0,0,0)
        //スライスされる間隔
        _SliceSpace("SliceSpace",Range(0,30)) = 15
    }

    SubShader
    {
        Pass
        {
            Tags
            {
                "RenderType"="Opaque"
            }

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

            //変数の宣言 Propertiesで定義した名前と一致させる
            sampler2D _MainTex;
            half4 _Color;
            half _SliceSpace;

            struct appdata
            {
                float4 vertex: POSITION;
                float2 uv : TEXCOORD0;
            };
            
            struct v2f
            {
                float4 pos : SV_POSITION;
                float3 localPos : TEXCOORD0;
                float2 uv : TEXCOORD1;
            };

            v2f vert(appdata v)
            {
                v2f o;
                //描画しようとしているピクセル(ローカル座標)
                o.localPos = v.vertex.xyz;
                o.uv = v.uv + _Time;
                o.pos = UnityObjectToClipPos(v.vertex);
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                //ピクセルの色を計算
                fixed4 col = tex2D(_MainTex, i.uv);
                //各ピクセルのローカル座標(Y軸)それぞれに15をかけてfrac関数で少数だけ取り出す
                //そこから-0.5してclip関数で0を下回ったら描画しない
                clip(frac(i.localPos.y * _SliceSpace) - 0.5);
                //計算したピクセルとプロパティで設定した色を乗算する
                return half4(col * _Color);
            }
            ENDCG
        }
    }
}

参考リンク

【Unity】UVScroll(UVの処理)をやってみる【Shader : 2】