Unity Shader2D 座標(v2f.uv)を用いた処理

使用した素材

前回と同様に使用した素材はベイツ・イメージズ様のものです。素材のリンクは以下の通りです。
スプラッシュペイントと黒背景の壁紙

これをアセット内に追加しておきます。

v2f.uv

「Create」⇒「Shader」⇒「Image Effect Shader」で作成したファイルを2DでのShaderの処理に利用しますが、ここでは構造体v2fが宣言されています。

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

この構造体のuvを利用することで座標を用いた処理が可能となるので本記事ではそれを紹介します。

画像の一部分を特定の色で塗りつぶす処理

前回と同様にShaderを使うためにまず次の2つを作成します。

1. Materialの作成(「Create」⇒「Material」)
2. Shaderの作成(「Create」⇒「Shader」⇒「Image Effect Shader」)

作成したら次のようになります。さらに、Test2Materialにドラッグ&ドロップでTest2を追加するのを忘れずに。

次に、Test2のプログラムを以下の様に変更します。frag関数を書き換えるだけで大丈夫だと思います。

Shader "Hidden/Test2"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
    }
        SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            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;
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f i) : SV_Target
            {
                if (i.uv.x > 0.5) {
                    return 1;
                }

                else {
                    fixed4 col = tex2D(_MainTex, i.uv);
                    return col;
                }
            }
            ENDCG
        }
    }
}

このプログラムでは

if (i.uv.x > 0.5) 

とすることで画像のx座標が0.5以上(右半分)に対しての処理を行うようにしています。

ここでシーン上に用意した素材を追加します。

これにTest2Materialを追加すると以下の様に右半分が白色になることが確認できます。

同様に先ほどのプログラムのif文の条件式を

i.uv.y > 0.5

と変更することで、上半分のみを白くすることも可能です。

v2f.uvの座標系

先ほどの結果よりv2f.uvの座標系は画像のようになっていると考えられます。

指定した範囲を任意の色で塗りつぶす

これまではif文を1つしか用いていませんでしたが、組み合わせることで右上を特定の色にするなどといったことも可能となります。
先ほどのプログラムのfrag関数を書き換えます。

fixed4 frag(v2f i) : SV_Target
{
    //右上を赤色に
    if (i.uv.x > 0.5 && i.uv.y > 0.5) {
        return fixed4(1, 0, 0, 1);
    }
    //右下を青色に
    else if (i.uv.x > 0.5) {
        return fixed4(0, 0, 1, 1);
    }
    //左上を黄色に
     else if (i.uv.x < 0.5 && i.uv.y > 0.5) {
        return fixed4(1, 1, 0, 1);
    }
    //左下は元のままで
    else {
        fixed4 col = tex2D(_MainTex, i.uv);
        return col;
    }
}

すると、画像のようになると思います。

関連記事

2DのShaderの基本についてはこちら
kiironomidori.hatenablog.com

Shaderについてのまとめ記事はこちら
kiironomidori.hatenablog.com