本日はShader枠です。
今回は透明度について紹介します。
〇透明度を持つシェーダーを実装する
透明度を持つシェーダーはガラスや水、エフェクトなど様々なシチュエーションで使用されます。
透明度を持つシェーダーを実装するには次の要件をクリアする必要があります。
・レンダリングキューが3000代(※正確には3000以外もあるが後述)
・AlphaBlendingを定義する。
・Shader内でアルファの出力値を設定する。
SubShader { Tags { "Queue"="Transparent" }//順番で物体を描画するか 低→高 順で描画 //Blend SrcAlpha OneMinusSrcAlpha//どのようにピクセル色を合成するか? Blend OneMinusSrcAlpha One BlendOp Add
〇レンダリングキューと描画順
レンダリングキューはGPU上での描画の実行順番を決める値になります。
透明度を持つシェーダーを説明する上で描画順というものが非常に重要になります。
シェーダーによって描画される際に基本的にはレンダリングに使用されるカメラに対して遠くにあるもの→手前あるものの順で描画が行われています。(ただしURPやその他の最適化の処理によって描画順は変わることがあります。)
レンダリングキューは奥行とは別に使用できる描画順に関するパラメータです。
通常はSubShaderの中でTagsブロック内にQueueとしてパラメータを定義しいます。
SubShader { Tags { "Queue"="Transparent" }
Transparentと記述した場合3000になります。
透明度を持たないシェーダーはOpaqueが使用されこれはデフォルトで2000台になります。
〇なぜ半透明な場合3000なのか?
不透明なオブジェクトは奥にあるオブジェクトから塗りつぶすように描画します。
しかし半透明なオブジェクトはすでに描画されている色に対してピクセルごとに重ね合わせるため、不透明なオブジェクトが描画終わった後に半透明なオブジェクトの計算が始まります。
このためグラフィックスパイプライン上では透明度を持つシェーダーは不透明なオブジェクトの後のレンダーキューで描画されています。
〇AlphaBlending
さて、ここまででRenderQuqueについての理解ができたと思いますが、半透明なオブジェクトの描画に際してすでに描画された不透明なオブジェクトの結果に、新たに描画した色をどのように重ね合わせるか?というパラメータがAlphaBlendingになります。
SubShader { ・・・ //Blend SrcAlpha OneMinusSrcAlpha//どのようにピクセル色を合成するか? Blend OneMinusSrcAlpha One
Blendは様々なパラメータがありますがこちらはまた次回に説明します。
〇サンプルコード
Shader "Unlit/Transparent" { Properties { _MainTex ("Texture", 2D) = "white" {} } SubShader { Tags { "Queue"="Transparent" }//順番で物体を描画するか 低→高 順で描画 //Blend SrcAlpha OneMinusSrcAlpha//どのようにピクセル色を合成するか? Blend OneMinusSrcAlpha One BlendOp Add Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag // make fog work #pragma multi_compile_fog #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; UNITY_FOG_COORDS(1) float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); UNITY_TRANSFER_FOG(o,o.vertex); return o; } fixed4 frag (v2f i) : SV_Target { // sample the texture fixed4 col = tex2D(_MainTex, i.uv); // apply fog UNITY_APPLY_FOG(i.fogCoord, col); col.a = 0.5f; return col; } ENDCG } } }