6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UnityでグレースケールテクスチャにカラーをのせるEditor拡張

Posted at

#概要
AEにあるエフェクトのColoramaのようにグレースケールのテクスチャに対してグラデーションテクスチャの色をのせることができます。これをUnityで作ってみました。
GitHubはこちら

#リファレンス
Editor拡張のインターフェースとしてはMaterialEditorになります。
下記画像のようにColorama/AdditiveなどColoramaのShaderを選択した際にGradientを4つ調整できるようになります。
30335166-8c6dce8a-981c-11e7-9719-d31ef7c93cc5.PNG

それぞれのパラメーターについてですが下記のようになっておりRateをアニメーションさせることでグラデーションのアニメーションを実現します。

パラメーター名 説明
Gradient0 Rateが0のときのグラデーション
Gradient1 Rateが0.33のときのグラデーション
Gradient2 Rateが0.66のときのグラデーション
Gradient3 Rateが1のときのグラデーション
Rate グラデーションのどこを使うか
Save グラデーションの変更を保存するかどうか

画像のようなパラメーター設定にすると自動的にこのようなグラデーションのテクスチャが生成されます。
Additive.png

内部的にはこちらを参照して色をのせるだけなので負荷も軽めです。

#実装
##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();
}
6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?