シェーダー入門したくないけど書いてみたい その2 UV編

はじめに

　この記事ではシェーダに関して入門することができません。とりえあずUnityでシェーダを書いて見たい人向けのブログです。

事前準備

　事前準備が済んでいない方は、第一回目の事前準備の項目を参考に事前準備を行ってください。
シェーダー入門したくないけど書いてみたい その１ - 波打際のブログさん

02.UVShader

　早速ですが `02.UVShader/UVShader.unity` を開いてみてください。開くと何やらカラフルな箱が表示されていると思います。

　このCubeオブジェクトのマテリアルには次のようなシェーダーが適用されています。

Shader "ShaderLesson/02.UVShader/Question" {
	SubShader {
        Pass {
	    Tags { "RenderType" = "Opaque" }
        
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            struct appdata {
                float4 vertex   : POSITION;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float2 uv  : TEXCOORD0;
            };
        
            v2f vert (appdata v) {
                v2f o;
                o.pos = mul( UNITY_MATRIX_MVP, v.vertex );
                o.uv = v.texcoord.xy;
                return o;
            }

            fixed4 frag(v2f v) : SV_Target {
                return fixed4(v.uv.x, v.uv.y, 0, 1.0);
            }
            ENDCG
        }
    }
}

このシェーダのポイント

　このシェーダのポイントは、頂点シェーダからフラグメントシェーダにv2f構造体で値を渡していること、その値はメッシュに設定されたUV座標(テクスチャ座標)であるということです。

appdata構造体に関しては、なんかUnityが都合いい感じにいろいろデータくれて超便利だ〜程度に考えておけば良いと思います。

v2f構造体

　v2fという名前は慣例のようなもので Vertex To Fragmentの略です。頂点シェーダからフラグメントシェーダに複数の値を渡す時にはこのように構造体を定義してそれを利用します。ここでは頂点のスクリーン座標と、その座標のUV座標(テクスチャ座標)をフラグメントシェーダに渡しています。

UV座標(テクスチャ座標)

　テクスチャ座標と書いたほうがピンとくると思います(というか本質です)。モデルの頂点座標にテクスチャのどの部分を描画するかを0-1の値(UV座標)で表したものです。

上記のようなイメージです。今回はUV座標のu値を赤成分に、v値を緑成分として出力しています。

演習

　UVシェーダー書き換えて、下記の画像と同じ模様の箱がレンダリングされるシェーダを作ってください。
(演習問題の進め方は 第一回目の 事前準備->演習問題について を参照してください。)

今回はここまでです。UV座標(テクスチャ座標)の概念はシェーダを書く上で割と必要になるのでいろいろ試しておくと良いかもしれません。

次回はシェーダのプロパティについて解説と演習を行います。