シェーダの形式

• シェーダ: ShaderLab と固定関数シェーダ / Shaders: ShaderLab & Fixed Function shaders
• ShaderLab文法：シェーダ / ShaderLab syntax: Shader
• ShaderLab文法: Fallback / ShaderLab syntax: Fallback

冒頭でも触れましたが、ドキュメントからシェーダの構造の説明を抜粋すると、以下の形になります（一部改変しています）。

Shader "Structure Example" {
    Properties {
    	// インスペクタに表示されるプロパティ（色やテクスチャ等）
    }
    SubShader {
    	// ...頂点/断片プログラムを使用するサブシェーダ...
    }
    SubShader {
    	// ...パスごとに 4 つのテクスチャを使用するサブシェーダ...
    }
    SubShader {
    	// ...パスごとに 2 つのテクスチャを使用するサブシェーダ...
    }
    SubShader {
    	// ...見た目は悪いが、いずれでも実行するサブシェーダ :)
    }
    Fallback "Other Shader Name" // SubShader がいずれもダメだったときに試す別のシェーダ
} 

Properties と Fallback は省略可能で、結果的に、Shader "name" { [Properties] Subshaders [Fallback] } がシェーダの文法になります。ちなみに、"name" 部はスラッシュ（"/"）で区切ると、カテゴリで分類することが出来ます。

固定関数シェーダ（Fixed Function Shader）

• シェーダ: ShaderLab と固定関数シェーダ / Shaders: ShaderLab & Fixed Function shaders
• ShaderLab文法: Color、Material、Lighting / ShaderLab syntax: Color, Material, Lighting

固定関数シェーダはプログラマブルシェーダをサポートしない GPU のために記述します。なのでスゴイことが出来るわけではないので、この項はあまり面白く無いかもしれません。文法は ShaderLab で記述します。

まず、シンプルなコードを見てみます。

Shader "Solid Red" {
    SubShader {
        Pass { Color (1,0,0,0) }
    }
} 

Pass ブロックの中には色々な命令を記述でき、ここでは Color の指定を行っています。そして、固定関数シェーダは Pass のみからなるシェーダになります。インスペクタを見ると、Vertex shader / Fragment shader ともに「Fixed function」になっているのが見て取れます。このコードでは色をつけるだけなので、ライティングも関係なく真っ赤になります。

ではライティングを反映させてみます。

Shader "VertexLit White" {
    SubShader {
        Pass {
            Material {
                Diffuse (1,1,1,1)
                Ambient (1,1,1,1)
            }
            Lighting On
        }
    }
} 

今度は Lighting On にして、Material ブロック内で Diffuse と Ambient を設定しています。Diffuse はオブジェクトのベースカラー（拡散色）、Ambient は Render Settings から変更できる、Ambient Light（環境光）の色です（指定しなければ影響を受けない形になります）。

続いて、色をインスペクタから設定できるようにしてみます。

Shader "VertexLit Simple" {
    Properties {
        _Color ("Main Color", COLOR) = (1,1,1,1)
    }
    SubShader {
        Pass {
            Material {
                Diffuse [_Color]
                Ambient [_Color]
            }
            Lighting On
        }
    }
} 

Shader を適用した Material のインスペクタにプロパティで記述した Main Color が表示されるようになりました。これで色々と外部からシェーダへ情報を与えることが出来るようになります。

そして最後に、VertexLit 相当のシェーダを見てみます。

Shader "VertexLit" {
    Properties {
        _Color ("Main Color", Color) = (1,1,1,0)
        _SpecColor ("Spec Color", Color) = (1,1,1,1)
        _Emission ("Emmisive Color", Color) = (0,0,0,0)
        _Shininess ("Shininess", Range (0.01, 1)) = 0.7
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Pass {
            Material {
                Diffuse [_Color]
                Ambient [_Color]
                Shininess [_Shininess]
                Specular [_SpecColor]
                Emission [_Emission]
            }
            Lighting On
            SeparateSpecular On
            SetTexture [_MainTex] {
                Combine texture * primary DOUBLE, texture * primary
            }
        }
    }
} 

色々と新しい命令が出てきました。これらを覚えるのは大変ですが、すべてドキュメントに載っていますのでだいたい何をやってそうか把握できれば後は調べれば解決できると思います。

• Unity - Unity Manual

ちなみに、Properties ですが、例でみた Color の他にも以下の様なものを与えることが出来ます。

• Unity - Unity Manual

Properties {
    _RangeTest ("Range Test", Range (0.0, 1.0)) = 0.5
    _FloatTest ("Float Test", Float) = 0.5
    _ColorTest ("Color Test", Color) = (0.5, 0.5, 0.5, 0.5)
    _VectorTest ("Vector Test", Vector) = (0.5, 0.5, 0.5)
    _2DTest ("2D Test", 2D) = "white" {}
    _RectTest ("Rect Test", Rect) = "white" {}
    _CubeTest ("Cube Test", Cube) = "white" {}
}

サーフェイスシェーダ（Surface Shader）

• サーフェイスシェーダの記述 / Writing Surface Shaders
• サーフェイスシェーダの例 / Surface Shader Examples

固定関数シェーダでは特に面白いことは出来ませんでしが、サーフェイスシェーダを使うと色々な表現が可能になります。シェーダは通常はライティングとの相互作用やレンダリングパスなど複雑なコードを書く必要があります。そこで Unity は、一段階抽象化されたコードを書くだけで、これをコンパイルして複雑なコードを自動生成してくれる仕組みとして、サーフェイスシェーダを提供してくれています。サーフェイスシェーダは Cg/HLSL で記述します。まず簡単なサンプルを見てみます。

Shader "Example/Diffuse Simple" {
    Properties {
        _MainColor("Color", Color) = (1,1,1)
    }
    SubShader {
        Tags { "RenderType" = "Opaque" }
        CGPROGRAM
        #pragma surface surf Lambert
        struct Input {
            float4 color : COLOR;
        };
        float4 _MainColor;
        void surf (Input IN, inout SurfaceOutput o) {
            o.Albedo = _MainColor.rgb;
        }
        ENDCG
    }
    Fallback "Diffuse"
}

色々新しいものが出てきましたので１つずつ見て行きたいと思います。まず、サーフェイスシェーダは、CGPROGRAM 〜 ENDCG ブロック内に記述します。その最初の行にある pragma 文は、サーフェイスシェーダをどのようにコンパイルするかを指示しています。この指示は以下の形式で記述します。

#pragma surface surfaceFunction lightModel [optionalparams]

「surfaceFunction」はエントリポイントで、サンプルでは「surf」という名前の関数がそれですよ、と指定しています。「lightModel」は組み込みライティングモデルの「Lambert」（ランバート反射）を指定しています。ランバート反射は理想的な拡散モデルで、どの方向から見ても輝度が一定になるモデルです。他には BlinnPhong（スペキュラ）があり、自作のカスタムライティングモデルも指定できます（ドキュメント参照）。「optionalparams」には透過させたいときは alpha、頂点の変形をしたい場合は vertex などの指定が行えます。

では、このエントリ関数の surf を見てみます。

void surf (Input IN, inout SurfaceOutput o) {
    o.Albedo = _MainColor.rgb;
}

形式としては、Input を受け取り、それをゴニョゴニョと処理を行って SurfaceOutput につめる、という形になっています。ちなみに何もしないと真っ黒になります。Input でどういう情報が渡ってくるかについては直前の構造体に書いてあります。

struct Input {
    float4 color : COLOR;
};

Input では UV 座標などが渡ってきます（Properties 等で設定した変数ではないです）。ここでは未だ例が微妙なので詳しくは後で見ていきます。

SurfaceOutput には Albedo を指定しています。アルベドは反射の割合を示していて 0 にすると真っ黒になります。Albedo は SurfaceOutput 構造体のメンバになっていて、他には以下の様なメンバを有しています。

struct SurfaceOutput {
    half3 Albedo;
    half3 Normal;
    half3 Emission;
    half Specular;
    half Gloss;
    half Alpha;
};

ここで色々と指定するとオブジェクトの見え方が変わってくるわけです。例では、Properties で与えられた _MainColor の rgb を参照しているので、インスペクタから赤を設定すればオブジェクトも赤くなります。なお、Properties で与えられた変数を参照するためには、その変数を CGPROGRAM 〜 ENDCG ブロック内で宣言しておく必要があります。例では、surf 直前の行で宣言しています。

optionalparams について触れるためにちょっと上記コードを改良してみます。例えば、与えた色をちょっと赤くして透明度を 0.5 くらいにしたいとします。

Shader "Example/Diffuse Simple" {
    Properties {
        _MainColor("Color", Color) = (1,1,1)
    }
    SubShader {
        Tags { "RenderType" = "Transparent" }
        CGPROGRAM
        float4 _MainColor;
        #pragma surface surf Lambert alpha
        struct Input {
            float4 color : COLOR;
        };
        void surf (Input IN, inout SurfaceOutput o) {
            o.Albedo = _MainColor.rgb * half3(1, 0.5, 0.5);
            o.Alpha = 0.5;
        }
        ENDCG
    }
    Fallback "Diffuse"
}

pragma 文の後ろに alpha を追加しました。これは、シェーダがアルファブレンディングを行いますよ！ということを指示しているものです。この上で、surf の中で Alpha を 0.5 に設定しています。ついでに Albedo で、青と緑は 0.5 しか反射しないようにしています。optionalparams にどういうものが指定できるかについてはドキュメントを参照して下さい。

• サーフェイスシェーダの記述 / Writing Surface Shaders

あとまだ触れていないのが Tags です。

• ShaderLab文法：Passタグ / ShaderLab syntax: Pass Tags
• ShaderLab文法： SubShaderタグ / ShaderLab syntax: SubShader Tags

Tags ブロックでは「いつ」「どのように」レンダリングを行うかの指定を Key-Value の形式で与えます。最初の例では RenderType を Opaque （不透明）に指定しています。透明な方は Transparent を指定しています。が、あくまでタグ付けなので、透明なオブジェクトに Opaque を指定していても、透過自体は問題なく行われます。私もあまりよく分かっていないので...、詳細は下記エントリに丁寧にまとめられていましたのでご参照下さい。

• 参考：Unityシェーダ入門 #004 Replaced Shader - Unityシェーダ入門

他には、描画順の Queue などが指定できます。

• ShaderLab文法： SubShaderタグ / ShaderLab syntax: SubShader Tags

次に、飛ばしてしまった Input の話を見るために、テクスチャを適用したサンプルを見てみます。

Shader "Example/Diffuse Texture" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType" = "Opaque" }
        CGPROGRAM
        #pragma surface surf Lambert
        struct Input {
            float2 uv_MainTex;
        };
        sampler2D _MainTex;
        void surf (Input IN, inout SurfaceOutput o) {
            o.Albedo = tex2D (_MainTex, IN.uv_MainTex).rgb;
        }
        ENDCG
    }
    Fallback "Diffuse"
}

テクスチャの UV 座標を参照するためには Input 内で対象の変数の頭に uv プレフィックスを付加した変数を宣言します。これを Cg の組み込み関数の tex2D を使って、該当するテクスチャ座標の色を参照しています。Cg の組み込み関数については、ドキュメントをご参照下さい。

• Cg Standard Library Documentation（英語）
• Cgの「Cg Toolkit User's Manual」の日本語訳のPDFファイル - 強火で進め

後は、法線マップを入力として陰影をつけたりなどを組込み関数と組み合わせてもりもりしていけば所望の画が得られるといった形になります。どういうコードを書けばどういうことが起きるのかはドキュメントが詳しく分かりやすいのでそちらに譲ります。ここまで理解していれば何となく何をしているかは把握できると思います。

• http://docs-jp.unity3d.com/Documentation/Components/SL-SurfaceShaderExamples.html:サーフェイスシェーダの例 / Surface Shader Examples

面白そうなので、頂点の変形だけ試しにやってみます。球を Sin 関数で波打たせてみます。

Shader "Example/Transform Vertex" {
    SubShader {
        Tags { "RenderType" = "Opaque" }
        CGPROGRAM
        #pragma surface surf Lambert vertex:vert
        struct Input {
            float4 color : COLOR;
        };
        void vert (inout appdata_full v) {
            v.vertex.x += 0.2 * v.normal.x * sin(v.vertex.y * 3.14 * 16);
            v.vertex.z += 0.2 * v.normal.z * sin(v.vertex.y * 3.14 * 16);
        }
        void surf (Input IN, inout SurfaceOutput o) {
            o.Albedo = half3(1, 0.5, 0.5);
        }
        ENDCG
    }
    Fallback "Diffuse"
}

Properties で変数を引っ張り出せばモーフィングとか出来ますね。ただし、上記例だと単に頂点位置をずらしてるだけなので、ライティングは球のままなので向きによっては変な感じに見えます。

ちなみに余談ですが、サーフェイスシェーダをインスペクタで見てみると以下のようになっています。

固定関数シェーダの時は Fixed function だったのが、SM2.0 となっています。これは「シェーダモデル2.0」を意味しています。

• プログラマブルシェーダ - Wikipedia

SM2.0 はマイクロソフトとインテルが両者の利点を活かして作ったスタンダードモデル（対応 GPU が多い）とのことです。

頂点シェーダ / フラグメントシェーダ（Vertex / Fragment Shader）

• 頂点シェーダとFragmentシェーダのプログラミング / Writing vertex and fragment shaders
• Vertex and Fragment Shader Examples（英語）

もっとも柔軟性の高いのが、この頂点シェーダ / フラグメントシェーダです。ライティングも行いたいならサーフェイスシェーダ、プログラマブルな形状やテクスチャを作成したいならこちら、みたいなイメージだと思います。
まずはコードから見てみましょう。

Shader "Custom/SolidColor" {
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            float4 vert(float4 v:POSITION) : SV_POSITION {
                return mul (UNITY_MATRIX_MVP, v);
            }
            fixed4 frag() : COLOR {
                return fixed4(1.0,0.0,0.0,1.0);
            }
            ENDCG
        }
    }
}

今度は Pass ブロックの中に記述します。pragma 文で頂点シェーダおよびフラグメントシェーダの関数名を指定し、指定された関数を実装します。サンプルはとてもシンプルで、vert は頂点シェーダで、すべての頂点に対して座標変換を行います。ここでは、引数で与えられた頂点座標に　UNITY_MATRIX_MVP という組み込み値である MVP 行列（モデル・ビュー・プロジェクション行列）をかけてモデルが２次元のディスプレイでどの位置に見えるかの計算を行っています。余談ですが組み込み値は以下の様なものがあります。

• ShaderLab built-in values

frag はフラグメントシェーダで、すべてのピクセルに対して計算を行います。ここでは不透明な赤を頂点に与えており、ライティングの計算は行っていないので、完全に真っ赤になっています。

ここまでは GLSL などに触れていた方は馴染みのある内容だと思いますが、「: POSITION」「: SV_POSITION」「: COLOR」となっている場所が気になりますね。これはセマンティクスと呼ばれるもので、グラフィックパイプラインの各ステージ間で伝達する変数が何なのかを伝えるタグの役割をします。GLSL の varying 変数みたいな感じですね。

• セマンティクス (DirectX HLSL)
• その６ HLSLの根っこ：最初の最初からやってみる

つまり、vert は float4 型の引数を受け取るよう指定されていますが、float4 の何を貰えばいいのか？というのを指定している形になり、ここでは POSITION、つまり頂点のモデルに対するローカル位置座標を取得しています。セマンティクスは、頂点シェーダの入出力とフラグメントシェーダの入出力で計４つ与える箇所があります。例ではフラグメントシェーダの入力は省略されているので３つになっています。vert の出力が POSITION でなく、SV_POSITION となっているのは DX11 への互換性確保のためのようです。

• what is the difference between "float4 pos:SV_POSITION"and "float4 pos;"

そして、frag の出力が COLOR となっている形になります。セマンティクスは以下の様なもの（まだあると思います）が事前に与えられています。

• Shader Code - Unify Community Wiki

頂点シェーダへの入力

フラグメントシェーダへの入力（頂点シェーダの出力）

これらのような Pre-defined なセマンティクスを引数と返り値に与える以外にも、必要なセマンティクスをパックしたユーザ定義型を引数として与えることも可能です。

Shader "Custom/WindowCoordinates/Base" {
    SubShader {
        Pass {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag
            #pragma target 3.0

            struct appdata_base {
                float4 vertex   : POSITION;
                float3 normal   : NORMAL;
                float4 texcoord : TEXCOORD0;
            };

            float4 vert(appdata_base v) : POSITION {
                return mul (UNITY_MATRIX_MVP, v.vertex);
            }

            fixed4 frag(float4 sp:WPOS) : COLOR {
                fixed2 red_green = sp.xy / _ScreenParams.xy;
                fixed  blue      = 0.0;
                fixed  alpha     = 1.0f;
                return fixed4(red_green, blue, alpha);
            }

            ENDCG
        }
    }
}

appdata_base という構造体を用意し、この中で vertex、normal、texcoord の3種類のメンバをそれぞれ POSITION、NORMAL、TEXCOORD0 のセマンティクスを与えて宣言しています。そして、これを vert の引数として利用している形になります（中では結局 vertex しか使ってませんが...）。ちなみに、appdata_base は UnityCG.cginc というファイル内で宣言されており、これをインクルードすると使えるようにもなります。

Shader "Custom/WindowCoordinates/Base" {
    SubShader {
        Pass {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag
            #pragma target 3.0

            #include "UnityCG.cginc"

            float4 vert(appdata_base v) : POSITION {
                return mul (UNITY_MATRIX_MVP, v.vertex);
            }

            fixed4 frag(float4 sp:WPOS) : COLOR {
                fixed2 red_green = sp.xy / _ScreenParams.xy;
                fixed  blue      = 0.0;
                fixed  alpha     = 1.0f;
                return fixed4(red_green, blue, alpha);
            }

            ENDCG
        }
    }
}

UnityCG.cginc の中には appdata_base のような構造体の他にも色々なヘルパ関数も用意してくれています。

• ビルトイン シェーダ includeファイル / Built-in shader include files

全文は以下に上げてあります。

• UnityCG.cginc@Unity 4.3.2f1

さて、もう一度シェーダのコードに戻ってみます。frag の引数を見てみると、WPOS というセマンティクスが与えられています。これはフラグメントシェーダでスクリーン座標を参照することが出来る変数になります。組み込み値の _ScreenParams.xy で割ってあげると、0 〜 1 でスクリーンの左下が (0, 0）、右上が (1, 1) になります。

なお、WPOS を使うためには、シェーダモデルを 3.0 にしないとならないため、pragma 文で target を 3.0 に指定しています。インスペクタを見ると SM3.0 になっているのがわかると思います。

余談ですが、シェーダを普段あまり使わない人は return 文であれ？と思うかもしれませんが、シェーダは以下の様な演算が可能です。

return fixed4(fixed2(1.0), 0.0, 1.0);

fixed2(1.0) で (1.0, 1.0) を作り、fixed4 はこれを展開して、(1.0, 1.0, 0.0, 1.0)、すなわち黄色にするといった形です。

さて、先程はスクリーン座標を参照しましたが、もっと一般的には UV 座標を参照したいことのほうが多いと思います。その際は、UnityCG.cginc で定義されている頂点シェーダの vert_img と、そこから渡ってくる v2f_img を利用すると楽です。

Shader "Custom/TextureCoordinates/UV" {
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag

            #include "UnityCG.cginc"

            float4 frag(v2f_img i) : COLOR {
                return float4(i.uv, 0.0, 1.0);
            }
            ENDCG
        }
    }
}

色がひとつの面で完結するようになりました。

最後に、Properties の値やテクスチャを使うには、以下のようにします。

Shader "Custom/TextureCoordinates/Hecomi" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
	}
	SubShader {
		Pass {
			CGPROGRAM
			#pragma vertex vert_img
			#pragma fragment frag

			#include "UnityCG.cginc"

			uniform sampler2D _MainTex;

			float4 frag(v2f_img i) : COLOR {
				return tex2D(_MainTex, i.uv);
			}
			ENDCG
		}
	}
}

Properties で記載した変数を、uniform 修飾子をつけて CGPROGRAM ブロック内で宣言すると、頂点シェーダ / フラグメントシェーダで使えるようになります。

これで、なんとなく頂点シェーダとフラグメントシェーダの概要は掴めたのではないでしょうか。