渋谷ほととぎす通信

新しいこと、枯れたこと問わずサムザップ大庭が興味を持ったものを調査、生活の効率を求める完全趣味の技術ブログ。基礎を大事にしています。※あくまで個人ブログであり所属組織とは関係ありません

uGUIのCanvasGroupがしている事とは何か?


全子要素のアルファを一括で操作できるため、uGUIのCanvasGroupコンポーネントはUnityでUIを作る上で重宝しています。

ところCanvasGroupはどのようにしてアルファを適用しているのかを確認しました。 というのもuGUI用のシェーダを開発する上でCanvasGroupが効かないという現象に遭遇しました。 その調査結果となります。


結論から書くとCanvasGroupは頂点カラーを操作しています。


厳密に書くと、自分自身と子階層の頂点を取得し、その頂点カラーのアルファに値を突っ込んでいると思われます。


以下はUI-Default.shaderのフラグメントシェーダの冒頭です。

fixed4 frag(v2f IN) : SV_Target
{
    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

以下のようにIN.colorという頂点シェーダから送られる頂点カラーの乗算を外してみます。

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

するとCanvasGroupが適用されなくなります。
よってCanvasGroupが頂点カラーを操作しているという事が分かります。

環境

  • Unity2019.2.8f1