Unity uGUI用、虹色シェーダー。画像をレインボーに光らせる実装。
(Rainbow Shader for Unity uGUI)
関連ページ
参考URL
業務で画像を虹色に光らせる必要があり、その時はネットで拾った
こちらのシェーダー
を使わせて貰った。
そこから更に自分なりのアレンジを加えたものが完成したので共有。
虹色シェーダー、コード全文
下は虹色シェーダーのサンプル動画。
HueType.ToShinyとHueType.ToDarkで二種類の虹色グラデーションを用意している。
比較するとToShinyは白っぽくToDarkは黒っぽい。
以下コード全文。uGUI Imageへの反映方法は
こちらの記事
参照。
Shader
"UI/Rainbow"
{
Properties
{
_HueBlendRate("Hue
Blend
Rate",
Range(0.1,
5))
=
2
//RGBの重ね具合、虹色のグラデーションに影響
_OverrideRate("Override
Rate",
Range(0,
1))
=
1
//元々のピクセルの色にどれだけ虹色を被せるか
_HueOffset("Hue
Offset",
float)
=
0
//虹色の移動値
[Space]
//虹色の混合の仕方、ToShinyはHueBlendRateが高いほど真っ白に近づく。ToDarkは逆で真っ黒に近づく。
[KeywordEnum(ToShiny,
ToDark)]
_HUETYPE("HueType",
Int)
=
0
//虹色の染め上げ方。
[KeywordEnum(Circle,
Vertical,
Horizontal)]
_GRADATIONTYPE("GradationType",
Int)
=
0
}
SubShader
{
Tags
{
"Queue"
=
"Transparent"
}
Cull
Off
ZWrite
Off
Blend
SrcAlpha
OneMinusSrcAlpha
CGINCLUDE
#pragma
vertex
vert
#pragma
fragment
frag
struct
appdata
{
float4
vertex
:
POSITION;
float4
color
:
COLOR;
float2
uv
:
TEXCOORD0;
};
struct
v2f
{
float4
vertex
:
POSITION;
fixed4
color
:
COLOR;
float2
uv
:
TEXCOORD0;
};
sampler2D
_MainTex;
fixed
_HueBlendRate;
fixed
_OverrideRate;
fixed
_HueOffset;
#pragma
multi_compile
_HUETYPE_TOSHINY
_HUETYPE_TODARK
#pragma
multi_compile
_GRADATIONTYPE_CIRCLE
_GRADATIONTYPE_VERTICAL
_GRADATIONTYPE_HORIZONTAL
v2f
vert(appdata
v)
{
v2f
o;
o.vertex
=
UnityObjectToClipPos(v.vertex);
o.uv
=
v.uv;
o.color
=
v.color;
return
o;
}
ENDCG
//まず普通に画像を描画
Pass
{
CGPROGRAM
fixed4
frag
(v2f
i)
:
SV_Target
{
fixed4
col
=
tex2D(_MainTex,
i.uv);
col
*=
i.color;
return
col;
}
ENDCG
}
//続いて虹色に染め上げた画像を上に重ねる
Pass
{
CGPROGRAM
fixed3
HUEtoRGB(in
float
H)
{
float
R
=
abs(H
*
6
-
3)
-
1;
float
G
=
2
-
abs(H
*
6
-
2);
float
B
=
2
-
abs(H
*
6
-
4);
return
saturate(float3(R,
G,
B));
}
fixed4
frag(v2f
IN)
:
SV_Target
{
fixed4
color
=
(tex2D(_MainTex,
IN.uv))
*
IN.color;
fixed
hueOffset
=
max(0,
_HueOffset);
fixed3
hueColor;
#ifdef
_GRADATIONTYPE_CIRCLE
//中心から円状に虹色グラデーションが広がる
float
pi2
=
6.283184;
float
rad
=
(atan2(IN.uv.y
-
0.5,
IN.uv.x
-
0.5)
+
(hueOffset
/
2
*
pi2)
+
pi2)
%
pi2
/
pi2;
hueColor=
(HUEtoRGB(rad)
/
_HueBlendRate);
#elif
_GRADATIONTYPE_VERTICAL
//y軸に沿って虹色グラデーションに染める
hueColor=
(HUEtoRGB((IN.uv.y
+
hueOffset)
%
1)
/
_HueBlendRate);
#elif
_GRADATIONTYPE_HORIZONTAL
//x軸に沿って虹色グラデーションに染める
hueColor=
(HUEtoRGB((IN.uv.x
+
hueOffset)
%
1)
/
_HueBlendRate);
#endif
#ifdef
_HUETYPE_TOSHINY
//光り輝くように虹色を混合
color.xyz
*=
1
/
hueColor;
#elif
_HUETYPE_TODARK
//光を抑えて虹色を混合
color.xyz
*=
hueColor;
#endif
//_OverrideRateに応じて虹色画像の重ね具合を決める
color.a
*=
_OverrideRate;
return
color;
}
ENDCG
}
}
}
プロパティを解説
用意してあるプロパティは5つ。
選択するHueTypeによって適切なHueBlendRateが異なる。ToShinyなら2、ToDarkなら0.3辺りがおすすめ。
下はそれぞれのHueTypeでHueBlendRateを徐々に上げていった動画。
HueOffsetを上げていくことで虹色が移動するアニメーションが作れる。
この際、選択するGradationTypeにより演出が変わってくる。
1
1