【Unity】UIの加算シェーダー

環境

• Unity 2021.2.11f1
• Build-in Rendering Pipline

Unity のデフォルト UI シェーダーの取得

Unity の UI シェーダーを 1から作るのは大変なので、ベースとなるシェーダーを改造します。
ベースとなる UIシェーダーはUnityのダウンロードアーカイブ からダウンロードできます。

https://unity3d.com/jp/get-unity/download/archive

解凍した zip 内の DefaultResourcesExtra > UI > UI-Default.shader
がデフォルト UI シェーダーになります。

それでは、このシェーダーを改造していきます。

乗算処理を加算処理に変更する

Unity のデフォルト UI
シェーダーでカラーを設定すると、乗算処理になります。
これを加算処理に変更していきます。

乗算処理と加算処理の違いについては、p5js
で解説したカラーのブレンドモード記事をご確認ください

今回はこちらの画像を使って、加算処理の確認を行います。

UI-Default.shader を紐解く

Image コンポーネントのカラーと SourceImage がどのように処理されているのかが分かれば、
乗算処理を加算処理に変更できそうです。

// ImageコンポーネントのSourceImage
 sampler2D _MainTex;

v2f vert(appdata_t v){
    v2f OUT;
    // 省略

    // Imageコンポーネントのカラー
    OUT.color = v.color;

    // 省略
}

vertex シェーダーに入ってくるカラーが Image コンポーネントのカラーです。
また、 _MainTex に入ってくるテクスチャは、SourceImage になります。

ということは、以下の処理がカラーの乗算しているところになりそうです。

fixed4 frag(v2f IN) : SV_Target
{
   // 省略

   half4 color = IN.color * (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);

   // 省略
}

乗算処理を加算処理に変える

v2f vert(appdata_t v){
    v2f OUT;
    // 省略
    v.color.rgb *= v.color.a;
    OUT.color = v.color;
    return OUT;
}

fixed4 frag(v2f IN) : SV_Target
{
     // 省略
     half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
     color.rgb += IN.color.rgb;
     // 省略
}

vertex シェーダーでは、加算するカラーの αをかけることで、加算側のアルファを反映します。
つまり、アルファを0に近づけるほどrgbも0に近づき、 加算しても色の変化が起こらないということです。

fragment シェーダーでは、乗算処理を加算処理に変更しました。
In.color.a まで足さないように注意してください。足してしまうと元の画像の透明部分がおかしくなります。

このシェーダーをマテリアル化して、青い四角に緑を加算させた結果が以下の画像になります。