#概要
AEにあるエフェクトのColoramaのようにグレースケールのテクスチャに対してグラデーションテクスチャの色をのせることができます。これをUnityで作ってみました。
GitHubはこちら。
#リファレンス
Editor拡張のインターフェースとしてはMaterialEditorになります。
下記画像のようにColorama/AdditiveなどColoramaのShaderを選択した際にGradientを4つ調整できるようになります。
それぞれのパラメーターについてですが下記のようになっておりRateをアニメーションさせることでグラデーションのアニメーションを実現します。
パラメーター名 | 説明 |
---|---|
Gradient0 | Rateが0のときのグラデーション |
Gradient1 | Rateが0.33のときのグラデーション |
Gradient2 | Rateが0.66のときのグラデーション |
Gradient3 | Rateが1のときのグラデーション |
Rate | グラデーションのどこを使うか |
Save | グラデーションの変更を保存するかどうか |
画像のようなパラメーター設定にすると自動的にこのようなグラデーションのテクスチャが生成されます。
内部的にはこちらを参照して色をのせるだけなので負荷も軽めです。
#実装
##Shaderについて
Shaderは非常にシンプルでCGPROGRAM ~ ENDCGのところを表示するとこれだけでグレースケールのテクスチャからとった値を元にグラデーションテクスチャをSampleしているだけです。
将来的にはグレースケールのほうのG,Bも何かに使いたいところです。
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _GradientTex;
float _Rate;
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
{
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 gradient = tex2D(_GradientTex, float2(col.r, _Rate));
return fixed4(gradient.rgb, col.a);
}
##Material Editorについて
Material Editorは非常に便利で特定のShaderのときにMaterialのInspectorをカスタムできます。
こんな感じのをShaderの下に各だけでColoramaInspectorというファイルを参照してくれます。
CustomEditor "ColoramaInspector"
ColoramaInspector.csではGradient EditorをUIに使うことでグラデーションテクスチャを直感的にUIで作ることができます・
Gradient Editorについての詳細はこちら
RuntimeでGradientのデータを使うと速度的に怪しかったのでEditorで編集された際にTextureを作っています。
Textureの生成処理は以下のようにしています。
void Gradient2Texture(GradientData data, ref Texture2D texture)
{
if (texture == null)
{
Debug.Assert(false, "[GradientData] Texture is missing!!!");
texture = CreateTemporaryTexture();
}
Gradient[] gradients = new Gradient[]
{
data.gradient0,
data.gradient1,
data.gradient2,
data.gradient3
};
for (int h = 0; h < texture.height; ++h)
{
Gradient gradient = gradients[h];
for (int w = 0; w < texture.width; ++w)
{
float rate = (float)w / (float)texture.width;
Color color = gradient.Evaluate(rate);
texture.SetPixel(w, h, color);
}
}
texture.Apply();
}