この記事は東京海洋大学NePPの Advent Calendar 2024の4日目です。
初めに
今回はUnityのシェーダーでディゾルブシェーダーを書いていきたいと思います（下動画）
こんな感じで徐々に消えていくような見た目になります
コード
Shader "Unlit/DissolveShader"
{
Properties
{
_StartTime("StartTime", Float) = 0.0
_MainTex ("Texture", 2D) = "white" {}
_NoiseTex ("Noise", 2D) = "white" {}
_Speed("Speed", float) = 0.0
_OutlineThickness("OutlineThickness", float) = 0.0
_OutlineStrength("OutlineStrength", float) = 0.0
_OutlineColor("OutLine", Color) = (1,1,1,1)
}
SubShader
{
Tags { "RenderType"="Opaque" "Queue" = "Transparent"}
Blend SrcAlpha OneMinusSrcAlpha
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
sampler2D _NoiseTex;
float4 _MainTex_ST;
fixed4 _OutlineColor;
float _OutlineStrength;
float _Speed;
float _OutlineThickness;
float _StartTime;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
float currentTime = _Time.y;
float passedTime = currentTime - _StartTime;
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 noise = tex2D(_NoiseTex, i.uv);
col.a *= step(passedTime/80 * _Speed, noise);
col.rgb += step(noise,(passedTime/80+_OutlineThickness) * _Speed)
* _OutlineColor *_OutlineStrength;
return col;
}
ENDCG
}
}
}
コードの解説
プロパティ
Properties
{
_StartTime("StartTime", Float) = 0.0
_MainTex ("Texture", 2D) = "white" {}
_NoiseTex ("Noise", 2D) = "white" {}
_Speed("Speed", float) = 0.0
_OutlineThickness("OutlineThickness", float) = 0.0
_OutlineStrength("OutlineStrength", float) = 0.0
_OutlineColor("OutLine", Color) = (1,1,1,1)
}
このようにプロパティを宣言することでUnityエディター上で各種変数の設定、調整が行えるようになります。今回必要だと思ったのは
・開始時刻
・メインテクスチャ
・ノイズテクスチャ
・消滅速度
・アウトラインの太さ
・アウトラインの発光の強さ
・アウトラインの色
以上７個です
SubShader
{
Tags { "RenderType"="Opaque" "Queue" = "Transparent"}
Blend SrcAlpha OneMinusSrcAlpha
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
sampler2D _NoiseTex;
float4 _MainTex_ST;
fixed4 _OutlineColor;
float _OutlineStrength;
float _Speed;
float _OutlineThickness;
float _StartTime;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
この辺はお約束のやつですね、頂点シェーダーは特にいじってません
fixed4 frag (v2f i) : SV_Target
{
float currentTime = _Time.y;
float passedTime = currentTime - _StartTime;
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 noise = tex2D(_NoiseTex, i.uv);
col.a *= step(passedTime/80 * _Speed, noise);
col.rgb += step(noise,(passedTime/80+_OutlineThickness) * _Speed)
* _OutlineColor *_OutlineStrength;
return col;
}
ピクセルシェーダーです
順を追って解説します
消滅するような見た目
float currentTime = _Time.y;
float passedTime = currentTime - _StartTime;
currentTime（現在の時刻）を取ります。_StartTimeにはこのシェーダーをつけたオブジェクトがゲームシーン上に出現した時刻が渡されます。これで出現したタイミングからの経過時間を計算できます。
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 noise = tex2D(_NoiseTex, i.uv);
メインテクスチャとノイズテクスチャはインスペクターからアタッチしてお好みの物を設定してください
col.a *= step(passedTime/80 * _Speed, noise);
col.aでメインテクスチャの透明度を指定して消滅する箇所を指定しています。
step関数は1つ目に指定した値が2つ目に指定した値よりも小さい場所では0、大きい場所では1を返す関数です。
今回の場合はnoiseのテクスチャの値（シェーダーでは白黒を0～1の値として扱う、黒に近い色ほど0に近い）を取得して、指定した閾値より大きい部分は透明度1（表示する）、小さい部分は透明度0にする（表示しない）とすることで消滅していくような見た目になるわけです。
さらに今回は閾値として時間を指定したので、時間が経つとじわじわと消えていくような見た目になってくれます。
ここまで書いて再生するとこんな感じになると思います。次は輪郭線を作っていきます。
輪郭線の描画
col.rgb += step(noise,(passedTime/80+_OutlineThickness) * _Speed)
* _OutlineColor *_OutlineStrength;
輪郭線の領域を指定して、色を指定し（_OutlineColor）、色の強さ（_OutlineStrength）を掛けるとその部分が発光します。
今度は逆に1つ目の引数としてnoiseを指定し、2つ目の引数として時間を指定しています。
こうすることで先ほどと逆になって経過時間の値がnoiseの値より大きい部分では0が返り、小さい部分では1が返るようになります。
passedTimeに_OutlineThicknessを足して少し値をずらすのがポイントです。
これで消えていく部分に輪郭線がついてよりカッコよくなります！
終わりに
恐らく一番簡単なディゾルブシェーダ―の作り方を解説しました。ただこうやってシェーダーを書くと影がなくなってしまうという問題に直面しています。シェーダーを極めたい…