おもちゃラボ

Unityで遊びを作ってます

【Unityシェーダ入門】頂点カラーを表示するシェーダを作る

3Dモデルの表現には通常テクスチャを使いますが、3Dモデルの頂点ごとに色を設定したモデルを使用することもできます。

こちらの動画で使われているモデルは、テクスチャを使わずすべて頂点カラーで表現されています。たぶん、世界観に統一感をもたせるためのDavid Oreillyの工夫だと思います。

ちなみに、この動画は面白いです(笑)

vimeo.com

Unityでも頂点カラーを使用できるのですが、標準のシェーダは頂点カラーをサポートしていないので、自分でシェーダを書く必要があります。

頂点カラーの表現

頂点カラーとは、頂点ごとに設定された色情報のことです。3Dモデルの頂点には、座標や法線ベクトル以外に色情報も設定することができます。
設定にはBlenderやMaya、3DS Maxなどの3Dモデリングソフトを使用します。

f:id:nn_hokuson:20170329191941p:plain:w350

頂点情報を扱うためには頂点シェーダ(vertex shader)をフックし、頂点カラーを取り出す必要があります。取り出した頂点カラーは頂点シェーダからsurfシェーダに渡して表示します。

f:id:nn_hokuson:20170401080509p:plain:w500

頂点カラー用のシェーダを作る

Unityに頂点カラーを設定した3Dモデルをインポートした状態では、モデルはグレー色のままです。

f:id:nn_hokuson:20170328160857j:plain:w400

頂点カラーを表示するシェーダを作りましょう。シェーダファイル(VertexColor.shader)を作成し、作成したシェーダをアタッチしたマテリアルを作ってください。

f:id:nn_hokuson:20170329192004p:plain:w400

次にVertexColorに次のシェーダプログラムを入力してください。

Shader "Custom/VertexColor" {
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200
		
		CGPROGRAM
		#pragma surface surf Lambert vertex:vert
		#pragma target 3.0

		struct Input {
			float4 vertColor;
		};

		void vert(inout appdata_full v, out Input o){
			UNITY_INITIALIZE_OUTPUT(Input, o);
			o.vertColor = v.color;
		}

		void surf (Input IN, inout SurfaceOutput o) {
			o.Albedo = IN.vertColor.rgb;
		}
		ENDCG
	}
	FallBack "Diffuse"
}

トゥーンシェーダなどと比べると非常に単純なシェーダになります。

nn-hokuson.hatenablog.com

このプログラムでは上図にも書いたとおり、頂点シェーダ(vertex shader)をフックしています。頂点シェーダをフックするための手順は次の2つです。

  1. 頂点シェーダをフックすることをUnityに伝える
  2. 頂点シェーダのメソッドを作成する


#pragmaの行に「vertex:頂点シェーダのメソッド名」と書くことで、Unityに頂点シェーダをカスタムで作成することを伝えることができます。ここではvertという名前の頂点シェーダを作成しています。

続いて、頂点シェーダのメソッドを作成します。引数には頂点シェーダへの入力としてappdata_full型、頂点シェーダからの出力にInput型をとります。appdata_full型の詳細はこちらで説明されています。

docs.unity3d.com


頂点シェーダの中ではUNITY_INITIALIZE_OUTPUTを使って出力の値を初期化したあと、appdata_full型のcolor変数から頂点カラーの情報を取り出し、Input型のvertColor変数に値を詰めています。
surfシェーダではこのInput型の値を受け取り、Albedoとして表示しています。

f:id:nn_hokuson:20170401081230p:plain:w450

表示結果

頂点カラーを表示するシェーダをモデルにアタッチした結果がこちらになります。
ちゃんと緑色のカエルが表示できましたね!

f:id:nn_hokuson:20170329192709j:plain:w450

頂点カラーのモデルを使用することはまれかもしれませんが、頂点シェーダをフックする方法はよく使うので、ここで紹介しました。

今回のかえるのデータはこちらのものを使用させていただきましたm(_ _)m
f:id:nn_hokuson:20170329194931j:plain:w300
http://www.davidoreilly.com/downloads/www.davidoreilly.com