これは Unity Engine Challenge by mixi のShaderチュートリアルです。 Shaderの基礎的な知識や実装方法について、例題を元に理解深めていってください。
シェーダとは色、ライティング、頂点などのレンダリング命令をプログラマブルに記述することで、高度なグラフィック表現を描画処理できるプログラミング言語です。
シェーダ言語の中でも柔軟性の高くモデルの頂点や色をいじることができるのが頂点シェーダ(Vertex Shader)とフラグメントシェーダ(Fragment Shader)です。
頂点シェーダでは、メッシュの頂点に対して操作を行う命令を実装することができます。メッシュを変形させることで波紋などの表現ができたりします。
また、フラグメントシェーダでは、ピクセルのカラー値に対して操作を行う命令を実装することができます。グラデーションや特定のピクセルの色を変えたりできます。
UV座標とは、テクスチャ上の座標を表します。
左下が原点(0,0)として、0~1の座標系で表されます。
シェーダ内では、テクスチャのどの座標を扱うかという情報となるため、
頂点シェーダ内で頂点情報と一緒にUV座標を指定することで、フラグメントシェーダでそのピクセルのカラー値にアクセスすることができます。
シーン上に表示されているQuadの色を変えるようなShaderを実装してください。
Assets/Scenes/Tutorial01を開いてください。Assets/Shaders/Tutorial01を開いてください。- 頂点シェーダ
fragに実装を追加してください。
frag関数の返り値は各ピクセルのカラー値です。
tex2D関数はモデルのテクスチャ情報とUV座標情報をを渡すことでピクセルの色計算して返します。
float4 c = tex2D(_MainTex, i.uv);
float4というのは4要素をもつ型です。
各要素へはr,g,b,aもしくはx,y,z,wとしてアクセスできます。c.rgbなど組み合わせて扱うこともできます。
シーン上に表示されているQuadにグラデーションをかけるようなShaderを実装してください。 なお、グラデーションの実装にはUV座標を使用してください。
Assets/Scenes/Tutorial02を開いてください。Assets/Shaders/Tutorial02を開いてください。- 頂点シェーダ
fragに実装を追加してください。
モデルの色を変える方法は例題01で実装したとおりです。
グラデーションかける方法は色々ありますが、今回はUV座標を使った実装をしてください。
モデルのUV座標はfrag(v2f i)の引数iからi.uvとして得られます。
v2fとはshaderファイル内で定義されている構造体です。
struct v2f
{
float4 vertex : SV_POSITION;
float2 uv : TEXCOORD0;
};
float2は、x,yの2要素を持つ型です。float4と同様にi.uv.xのようにアクセスできます。
シーン上に表示されているPlaneの頂点座標を変更して波Shaderを実装してください。
Assets/Scenes/Tutorial03を開いてください。Assets/Shaders/Tutorial03を開いてください。- 頂点シェーダ
vertに実装を追加してください。
vert関数の返り値は各ピクセルの頂点情報です。
引数で渡されるappdata vはUnityから受け取るモデルの頂点情報で、それをUnityObjectToClipPos(v.vertex)でスクリーン上に描画する座標を計算して頂点情報を作成しています。
また、波を実装するには常時値が変わるような変数が必要ですが、組み込み変数として、時間_Timeを使用できます。
上述のUnityObjectToClipPos(float3 pos)や_TimeはUnityが用意している組み込みの関数や変数になります。
- https://docs.unity3d.com/2019.2/Documentation/Manual/SL-BuiltinFunctions.html
- https://docs.unity3d.com/2019.2/Documentation/Manual/SL-UnityShaderVariables.html
実際の問題では、実機ビルドをして解いてもらう問題があります。
そのため、実機ビルドの手順について確認しておいてください。
実機ビルドするのは例題01, 02, 03のどれでもよいです。
手順
File -> BuildSettingを選択。- iOS or Androidを選択して
Switch Platform。- iOSの場合は
Run In as XcodeをRelease → Debugに変えるとビルド時間が短くできます。
- iOSの場合は
Add Open Sceneを押して、確認したいSceneをScene In Buildに追加。- 実機を自身のPCに接続。
- 接続許可を聞くダイアログが出た場合は、「はい」を選択。
Build and Runを選択。
下記のような関数が組み込みで用意されてるため、実装のヒントに役立ててください。
fmod(x, y)
x / yの余剰を返す
floor(x)
xの少数を切り捨てて返す
step(x, y)
xとyの値を比較して、x>=yなら1、x<yなら0を返す
saturate(x)
xを0 <= x <= 1の範囲に留めて返す
clamp(x, a, b)
xをa <= x <= bの範囲に留めて返す
abs(x)
xの絶対値を返す
sin(x), cos(x)
sin,cosの値を返す
これ以外にも様々な関数があるので、調べてより知識を深めてみてください！