INDEX
Unityシルエットシェーダー
Unityでシルエットシェーダー、画像を単一色のシルエットに変更する方法。
(Silhouette Shader for Unity uGUI to colorize image to a single color)
2024-01-14
2024-06-26
関連ページ
色相反転シェーダー並みに実装が簡単なシルエット化シェーダー。ただ実装が簡単なわりに結構恩恵が高いと思う。
このシェーダーがあれば、例えばユーザーが未取得のメダルをシルエットで表示したい時などに、デザイナーに新たに画像を発注する必要がなくなる。
ソシャゲでは割とあるあるな場面だと思う。
似たような機能の
グレースケール化シェーダー
もおすすめ。
マテリアルのBlendRateのスライダーで、シルエット率を0から1までのfloat値で指定できる。
またColorの値をいじるとシルエットの色を変更できる。
下がコード全文。uGUI Imageへの反映方法は
こちらの記事
参照。
フラグメントシェーダーだけ解説
colがその画像本来のピクセル色。_Colorがプロパティから指定したシルエットの色。
たとえばcolが(1, 0, 0, 1)の赤色だとして、_Colorが(0.5, 0.5, 0.5, 1)の灰色だとする。
さらに_BlendRateが1だとして、これを式に当てはめると、
となり、元のピクセル色を完全に無視して灰色になることが分かる。
またcolのrbgはいじっているがaは全く操作してないので、画像のアウトライン自体は維持される。
色相反転シェーダー並みに実装が簡単なシルエット化シェーダー。ただ実装が簡単なわりに結構恩恵が高いと思う。
このシェーダーがあれば、例えばユーザーが未取得のメダルをシルエットで表示したい時などに、デザイナーに新たに画像を発注する必要がなくなる。
ソシャゲでは割とあるあるな場面だと思う。
シルエットシェーダー、コード全文
またColorの値をいじるとシルエットの色を変更できる。
Shader "UI/SilhouetteColor"
{
Properties
{
_BlendRate ("BlendRate", Range(0.0, 1.0)) = 1
_Color("Color", Color) = (1,1,1,1)
}
SubShader
{
Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
Cull Off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
fixed2 uv : TEXCOORD0;
fixed4 color : COLOR;
fixed4 vertex : POSITION;
};
struct v2f
{
fixed2 uv : TEXCOORD0;
fixed4 color : COLOR;
fixed4 vertex : SV_POSITION;
};
sampler2D _MainTex;
fixed _BlendRate;
fixed4 _Color;
v2f vert (appdata v)
{
v2f o;
o.uv = v.uv;
o.color = v.color;
o.vertex = UnityObjectToClipPos(v.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = (col.r * (1 - _BlendRate)) + (_Color.r * _BlendRate);
col.g = (col.g * (1 - _BlendRate)) + (_Color.g * _BlendRate);
col.b = (col.b * (1 - _BlendRate)) + (_Color.b * _BlendRate);
return col;
}
ENDCG
}
}
}
{
Properties
{
_BlendRate ("BlendRate", Range(0.0, 1.0)) = 1
_Color("Color", Color) = (1,1,1,1)
}
SubShader
{
Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
Cull Off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
fixed2 uv : TEXCOORD0;
fixed4 color : COLOR;
fixed4 vertex : POSITION;
};
struct v2f
{
fixed2 uv : TEXCOORD0;
fixed4 color : COLOR;
fixed4 vertex : SV_POSITION;
};
sampler2D _MainTex;
fixed _BlendRate;
fixed4 _Color;
v2f vert (appdata v)
{
v2f o;
o.uv = v.uv;
o.color = v.color;
o.vertex = UnityObjectToClipPos(v.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
//Imageと_Colorの色を_BlendRateに応じてブレンド
col.r = (col.r * (1 - _BlendRate)) + (_Color.r * _BlendRate);
col.g = (col.g * (1 - _BlendRate)) + (_Color.g * _BlendRate);
col.b = (col.b * (1 - _BlendRate)) + (_Color.b * _BlendRate);
return col;
}
ENDCG
}
}
}
少し解説
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = (col.r * (1 - _BlendRate)) + (_Color.r * _BlendRate);
col.g = (col.g * (1 - _BlendRate)) + (_Color.g * _BlendRate);
col.b = (col.b * (1 - _BlendRate)) + (_Color.b * _BlendRate);
return col;
}
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
//Imageと_Colorの色を_BlendRateに応じてブレンド
col.r = (col.r * (1 - _BlendRate)) + (_Color.r * _BlendRate);
col.g = (col.g * (1 - _BlendRate)) + (_Color.g * _BlendRate);
col.b = (col.b * (1 - _BlendRate)) + (_Color.b * _BlendRate);
return col;
}
さらに_BlendRateが1だとして、これを式に当てはめると、
col.r = (1 * (1 - 1)) + (0.5 * 1) = (1 * 0) + 0.5 = 0.5;
col.g = (0 * (1 - 1)) + (0.5 * 1) = (0 * 0) + 0.5 = 0.5;
col.b = (0 * (1 - 1)) + (0.5 * 1) = (0 * 0) + 0.5 = 0.5;
col.g = (0 * (1 - 1)) + (0.5 * 1) = (0 * 0) + 0.5 = 0.5;
col.b = (0 * (1 - 1)) + (0.5 * 1) = (0 * 0) + 0.5 = 0.5;
またcolのrbgはいじっているがaは全く操作してないので、画像のアウトライン自体は維持される。
