もりもりゲーム制作ブログ

それほどもりもりしてません。Unityの忘備録的ブログ。

【UnityShader】Shader自習メモ①

Unity Shader

わかんない！シェーダわかんない！

シェーダのやってることは１つもわかんないよ！
そもそも頂点シェーダって何！？頂点？だから何なの！？
Passって何？どこにあればいいの！？float2とfloat4だと何がいいの！？何でふたつでわけてるの？floatはfloatじゃないの！？

わかんないから牛歩学習する

目標はステンシルを利用？したアウトライン表現のできるシェーダ作りとモーショングラフィクスっぽいやつです。


まずは基本構造

とにもかくにも構造がわからない。
だからデフォルトのスクリプトも読めない。
結果お話にならない。
ので
UnityEditor上のCreate>Shader>どれかでシェーダーファイルを作成し、VSなりで開きます。
なんかゴチャゴチャ長いのが書いてありますが、要点だけ抜き出すとこういう構造になってるみたいです。

シェーダ基本構造のコード

//Shaderファイルの場所を指定
Shader "Custom/MonicaTest"
{
	//インスペクタから受け取るプロパティ
	Properties
	{
		//UnityEditorのInspectorウィンドウから変更できる
	}

	//SubShaderブロックはShaderブロックに必ず1つ以上存在する
	SubShader
	{
		//Passブロックは必ず１つ以上存在する
		//Passブロックが実際に見た目に影響を与える
		Pass
		{
			CGPROGRAM~に実際のシェーダコードを記述
			CGPROGRAM
			
				//ここに実際のシェーダコードを記述する
			
			ENDCG
			//~ENDCGに実際のシェーダコードを記述
		}
	}
}

こんな感じです。

Shaderの記述で最低限必要なブロックが以下のように構成されています。

  • Shaderブロック
    • Propertiesブロック
    • SubShaderブロック
      • Passブロック
        • CGPROGRAM~ENDCG

SubShaderブロックは１つ以上と書いてありますが基本レベルのシェーダーでは１つで十分です。

シェーダの内容部分って実は関数のように記述するらしくて
それらの処理をCGPROGRAM~ENDCG内に記述します。

Editorから作れて、入門できるシェーダ

StandardSurfaceShader

光の計算などをUnity側でやってくれるスグレモノ・・・らしい。
でも完全初心者にはむいてなさそうなんで、後回しにします。

UnlitShader

頂点・フラグメントシェーダのこと。らしい。
３Ｄモデルから頂点と、その頂点でできた図形のそれぞれで分けて、描画するみたいなシェーダ。
こっちを使って勉強していきたいと思います。

頂点・フラグメントシェーダの中身

結構ごちゃごちゃしてますがPassの中のCGPROGRAM～ENDCGにメイン処理がある感じです。
通常のC#スクリプトで言うClass｛｝に近いですかね？

CGPROGRAM～ENDCGの中身

さらにその中から要点だけザッと見てみます。

  • #programa ??? ?????

使う関数の宣言（？）の部分です。
vertex vert　は頂点関数の名前を「vert」に命名
fragment frag　はフラグメント関数の名前を「frag」に命名
そんなことを書く部分です。
vertとfragは任意の名前に変えられますが、一般的な命名らしいのでそのままでいきましょう。

  • #include "??????"

標準では"UnityCG.cginc"だけありますが、これがあるおかげでShader言語が使えるみたいな感じです。
C#スクリプトで言うusingです。自作のもの追加できるらしい・・・難しそうなのでスキップ。

  • struct ???{}

おなじみの構造体ですね。
appdata　はシェーダが適用されるモデルのデータっぽい。
v2f はvertex to fragmentの略だそうで、vert関数からfrag関数に値を受け渡すための架け橋。

  • v2f vert (appdata v){}

頂点関数。
戻り値はfrag関数へ渡すためv2f型。
引数はモデルデータらしきappdata。

  • fixed4 frag(v2f i) : SV_Target

フラグメント関数。
戻り値はfloat4型（いや何だそれ）
引数はvert関数から受け取るためv2f型。
SV_Targetは気にしなくていいと思う（ピクセルカラー的な意味）

なぞのワードと使い方

floatが何種類かあったと思います。
float,float2,float4,ですね。（float3もあるらしい）
floatは見ての通り普通のfloat。少数が入ります。
float2は配列です。２つまでfloat型の値が入ります。
float4も同じく。こちらは４つまで。
実際に使うときは

float a = 1.0;
float2 b = float2(0.0, 1.0);
float4 c = float4(1,1,1,1);

こんな感じです。
基本的に
float2はXY座標系で表される画像などの情報を受け取るために使います。
float4は色の値が多く、RGBA値として使うことが多いです。

vert関数やfrag関数の戻り値、引数は既に受け渡しができているので触らなくていいと思います。

色々あるけど・・・

初心者が最初に触るべきはfrag関数です。

  • 仕組みが単純
  • 処理の反映を確認しやすい

この2つが大きな理由ですね。
このfrag関数を学んでからいろんなShaderを勉強するとよさそうです。

とうわけでfrag関数をメインにやっていきます。
・・・・次回から。

次回できました

次回：
meganeunity.hateblo.jp

参考にさせていただいたサイト・スライド

・「楽しい！Unityシェーダー お絵描き入門！ 」
@setchiさんのスライド
ガチガチの初心者が始めるべき順番、知識量を適切に教えてくれる。受け身で始めるならこっち。
docs.google.com


・おもちゃラボさん
調べたいことに対しての情報が良い感じに載っていてスゴイ。自発的に始めるならこっち。
nn-hokuson.hatenablog.com