INDEX
Unity色相反転シェーダー
Unityで色相反転シェーダー。色相反転のしくみ。
(Invert Color Shader for Unity uGUI)
2023-10-27
2024-05-31
関連ページ
たぶんシェーダーで作るのが最も簡単な部類の色相反転シェーダー。
単純に反転するだけだとあまりに簡単なので、BlendRateという外出しのプロパティを用意して、その値に応じて反転率を調整できるようにする。
マテリアルのBlendRateのスライダーで、反転率を0から1までのfloat値で指定できる。
下が色相反転シェーダーの全文。uGUI Imageへの反映方法は
こちらの記事
参照。
まずshaderで色は0~255の値ではなく0~1のfloat値で管理している。
赤なら(1, 0, 0)、青なら(0, 0, 1)、紫なら(1, 0, 1)といった具合。 なのでそれぞれのピクセルのRGBを1から引けば完全な色相反転になる。
赤の反転色は（0, 1, 1)で水色に、青の反転色は（1, 1, 0)で黄色になる。
BlendRateを使用しないシンプルな色相反転の場合、フラグメントシェーダーのコードは次の通り。
今回のシェーダーの場合は1という固定値ではなく、ユーザーが指定するBlendRateを参照する。
ただ1より低い値からRGBの値を引くと、結果がマイナスになってしまう可能性がある。
なので逆にRGBからBlendRateを引き、それをabsによって絶対値にして対応してる。
たぶんシェーダーで作るのが最も簡単な部類の色相反転シェーダー。
単純に反転するだけだとあまりに簡単なので、BlendRateという外出しのプロパティを用意して、その値に応じて反転率を調整できるようにする。
色相反転シェーダー、コード全文
Shader "UI/ColorReversal"
{
Properties
{
_BlendRate ("BlendRate", Range(0.0, 1.0)) = 1
}
SubShader
{
Tags { "Queue" = "Transparent" }
Cull Off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
struct appdata
{
fixed2 uv : TEXCOORD0;
fixed4 vertex : POSITION;
fixed4 color : COLOR;
};
struct v2f
{
fixed2 uv : TEXCOORD0;
fixed4 vertex : SV_POSITION;
fixed4 color : COLOR;
};
sampler2D _MainTex;
fixed _BlendRate;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
o.color = v.color;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = abs(col.r - _BlendRate);
col.g = abs(col.g - _BlendRate);
col.b = abs(col.b - _BlendRate);
return col;
}
ENDCG
}
}
}
{
//Propertiesに_BlendRateを指定してInspectorからアクセスできるようにする
Properties
{
_BlendRate ("BlendRate", Range(0.0, 1.0)) = 1
}
SubShader
{
Tags { "Queue" = "Transparent" }
Cull Off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
struct appdata
{
fixed2 uv : TEXCOORD0;
fixed4 vertex : POSITION;
fixed4 color : COLOR;
};
struct v2f
{
fixed2 uv : TEXCOORD0;
fixed4 vertex : SV_POSITION;
fixed4 color : COLOR;
};
sampler2D _MainTex;
//_BlendRateの宣言
fixed _BlendRate;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
o.color = v.color;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = abs(col.r - _BlendRate);
col.g = abs(col.g - _BlendRate);
col.b = abs(col.b - _BlendRate);
return col;
}
ENDCG
}
}
}
少し解説
赤なら(1, 0, 0)、青なら(0, 0, 1)、紫なら(1, 0, 1)といった具合。 なのでそれぞれのピクセルのRGBを1から引けば完全な色相反転になる。
赤の反転色は（0, 1, 1)で水色に、青の反転色は（1, 1, 0)で黄色になる。
BlendRateを使用しないシンプルな色相反転の場合、フラグメントシェーダーのコードは次の通り。
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = 1 - col.r;
col.g = 1 - col.g;
col.b = 1 - col.b;
return col;
}
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = 1 - col.r;
col.g = 1 - col.g;
col.b = 1 - col.b;
return col;
}
ただ1より低い値からRGBの値を引くと、結果がマイナスになってしまう可能性がある。
なので逆にRGBからBlendRateを引き、それをabsによって絶対値にして対応してる。
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = abs(col.r - _BlendRate);
col.g = abs(col.g - _BlendRate);
col.b = abs(col.b - _BlendRate);
return col;
}
{
fixed4 col = tex2D(_MainTex, i.uv);
col *= i.color;
col.r = abs(col.r - _BlendRate);
col.g = abs(col.g - _BlendRate);
col.b = abs(col.b - _BlendRate);
return col;
}
