はるのゲーム開発メモ

自分の勉強の成果などをメモ代わりにします

UnityのShader勉強5 TagsとBlend

はい、今回は僕もまだまだ勉強中のTagsなどを書いていきます。

透過処理なども今回の記事で書きます。

 

まずはさくっと透過させてみます。

前回のコードを書き換えます

Shader "Unlit/TestShader"
{
	Properties{
		_Texture("Texture",2D)="white"{}
		_Float("float",float) = 1
		_Color("Color",Color) = (1,1,1,1)
		_Range("Range",Range(-10,10))=0.5
		_Vector("ector",Vector)=(0,0,0,0)
	}
	SubShader
	{
		Tags{
			"RenderType"="Transparent"
			"Queue"="Transparent"
		}
		Pass
		{
			Blend SrcAlpha OneMinusSrcAlpha
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"

			sampler2D _Texture;
			float4 _Texture_ST;

			fixed _Float;
			fixed4 _Color;
			fixed _Range;
			fixed4 _Vector;
			struct appdata
			{
				float4 vertex : POSITION;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex : SV_POSITION;
				float2 uv : TEXCOORD0;
			};

			
			v2f vert (appdata v)
			{
				v2f o;
				float4 vec = v.vertex;
				o.vertex = UnityObjectToClipPos(vec);
				//o.uv = v.texcoord;
				o.uv = TRANSFORM_TEX(v.texcoord, _Texture);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 tex = tex2D(_Texture,i.uv)*_Color;
				return tex;
			}
			ENDCG
		}
	}
}

結果は

f:id:Haru_android:20171218163218p:plain

 

_Colorのアルファを減らすと透明になるのがわかりました。

 

 

 

新しいことはふたつです。

 

まずはTagsです。

Tags{
	"RenderType"="Transparent"
	"Queue"="Transparent"
}

Tagsではシェーダーのレンダリング順などを記述します。

”RanderType”は公式を読むと定義済みのいくつかのグループに分類し、カメラの深度テクスチャを生成するのに使うよと書いてあります。

僕のイメージではUnityのオブジェクトのタグ付けやレイヤーなどと同じと思っています。

かかなくても何も変化はおきません。

 

重要なのは

”Queue”です。レンダリング順を決めています。不透明であれば奥に何があろうと距離に応じて描画するかしないか決めるので意識しませんが、透明なものは奥が描画される前に描画してしまうと、透過した後ろには背景色が描画されてしまいます。

レンダリング順は整数で決まっていて

Background 1000
Geometry 2000
AlphaTest 2450
Transparent 3000
Overlay 4000

これらから数字が少ない順にレンダリングします。

記述を省略した場合はGeometryが使用され、デフォルトのStandardマテリアルもGeometryです。

つまりデフォルトで用意したオブジェクトを描画したあとに透過オブジェクトを描画するという意味です。

詳しくは

docs.unity3d.com

 


次にBlendです。

Blend SrcAlpha OneMinusSrcAlpha

こちらは実際にアルファチャンネルを使用することを宣言?しています。

基本的には上記のものを使ってよいと思いますが、他にも色々なブレンド方法があります。

詳しくは

docs.unity3d.com

 

 

 

あとはtexに_Colorをかけているだけです。

fixed4 tex = tex2D(_Texture,i.uv)*_Color;

 

 

 

 

さて無事に透過しましたが、先ほどのレンダリング順について少しためしてみます。

Tags{
	"RenderType"="Transparent"
	"Queue"="Geometry-1"
}

”Geometry”の値を-1してみます。

そして_Colorのアルファを0にしてみると...

f:id:Haru_android:20171218163625p:plain

完全に透過されたオブジェクトの背景にはSolidColorが描画されました。

先に透明なオブジェクトが表示された後に地面が描画されたのがわかります。

 

UIのImageは背景の地面が描画されています。

まだ検証していませんがUIの描画順は普通のオブジェクトと違うのかもしれません。

 

ちなみにSolidColorではなくSkyBoxにすると真っ黒になります。

SkyBoxの描画っていつやってるんですかね...

 

まぁ特に問題ないのでいいでしょう。

 

終わりに

今回短かったのは僕の理解が追いついていない部分があったからです。

 

次回は時間によって動作を変えるシェーダーを書きます。