シェーダーのUV座標についておおまかに理解する

シェーダーでUV座標の扱いが良くわからなかったので調べてまとめる。

これはシェーダーの本などを読むと最初に載っているHelloWorld的なサンプル、「面に色のグラデーションを表示させる」を試してみると理解できた。

シェーダーでUV座標をレンダリングパイプラインから取得するには構造体にTEXCOORDセマンティクスを適用した変数を用意することで受け取れる。

struct appdata {
    float2 uv: TEXCOORD;
}

変数uvをfrag関数の中で各ピクセルの色を決める部分で使用すると、色をグラデーションさせることができる。

 fixed4 frag(v2f i): SV_Target {
     fixed4 color = fixed4( i.uv.x, i.uv.y, 0, 1);
     return color;
 }

このように書くとuv座標のxの値大きくなるにつれて黒から赤色に、yの座標が大きくなるにつれて黒から緑にグラデーションするので全体では左下が黒、右下が赤、左上が緑、右上が黄色になる。

全体では以下のコードになる。

Shader "Custom/Gradation"
{
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

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

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

            fixed4 frag(v2f i): SV_Target {
                fixed4 color = fixed4(i.uv.x, i.uv.y, 0, 1);
                return color;
            }

            ENDCG
        }
    }
    FallBack "Diffuse"
}