🌈

そろそろShaderをやるパート12 線を描画してスクロールさせる

3 min read

そろそろShaderをやります

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

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

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

下準備

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

デモ

テクスチャを用いることなく縞模様をShaderで作成してスクロールさせてみました。

Shaderサンプル

Shader "Custom/StripeScroll"
{
    Properties
    {
        //色
        _StripeColor1("StripeColor1",Color) = (1,0,0,0)
        _StripeColor2("StripeColor2",Color) = (0,1,0,0)
        //スライスされる間隔
        _SliceSpace("SliceSpace",Range(0,1)) = 0.5
    }

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

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

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

            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 = v.uv + _Time.x * 2;
                o.pos = UnityObjectToClipPos(v.vertex);
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                //補間値の計算 と言っても0か1しか返ってこない
                //step関数:step(t, x)
                //xの値がtよりも小さい場合には0、大きい場合には1を返す
                half interpolation = step(frac(i.uv.y * 15), _SliceSpace);
                //Color1かColor2のどちらかを返す
                half4 color = lerp(_StripeColor1,_StripeColor2, interpolation);
                //計算し終わったピクセルの色を返す
                return color;
            }
            ENDCG
        }
    }
}

step関数

step関数はstep(t, x)という形で使用し、xの値がtよりも小さい場合には0、大きい場合には1を返します。

下記コードの箇所は計算結果に応じて必ず0か1が代入されるということです。
half interpolation = step(frac(i.uv.y * 15), _SliceSpace);

【参考リンク】:【Unityシェーダ入門】シェーダだけで描く図形10選

lerp関数

lerpはlerp(a,b,v)という形で使用します。vは0.0〜1.0で指定して、その割合によってaとbがブレンドされます。

【参考リンク】:【Unityシェーダ入門】シェーダだけで描く図形10選

step関数は0か1しか返さないので下記コードの箇所はinterpolationが0か1で固定されます。
half4 color = lerp(_StripeColor1,_StripeColor2, interpolation);

※frac関数についてはこちら→そろそろShaderをやるパート8 ピクセルのワールド座標を参照してスライスさせる

すなわち、戻り値はブレンドされた色ではなく
_StripeColor1_StripeColor2どちらかの色となります。

参考リンク

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