[Unity]sprite shape controllerでの、半透明の重なりを無くすマテリアルを作りたい

Question

実現したいこと・発生している問題

UnityのSprite Shape Controllerを使って、半透明のグラデーション画像で様々な形状を作ろうとしています。

ですが、下の画像の中央ノード部分のように、半透明が重なることでグラデーションが崩れてしまいます。
この半透明の重なりを消し、きれいなグラデーションを実現したいです。

試したこと

・「２度塗り防止」のシェーダ（URLの回答の「案１」）を使ってみたが、下の画像のように、不自然な線が見えてしまう。
https://teratail.com/questions/217117

・spriteを真っ黒な画像に変更し、縁をぼかすシェーダ（URLのもの）を使ってみたが、現状と同様に半透明が重なって線が出てしまう。
https://qiita.com/T_Tao/items/1005fe02490c552f7a54

Answer 1

Sprite Shape Rendererの「Edge Material」を、下記のようなシェーダーを使ったマテリアルにするというのはどうでしょうか。

Shader "Sprites/MinTransparency"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
        [HideInInspector] _RendererColor ("RendererColor", Color) = (1,1,1,1)
        [HideInInspector] _Flip ("Flip", Vector) = (1,1,1,1)
        [PerRendererData] _AlphaTex ("External Alpha", 2D) = "white" {}
        [PerRendererData] _EnableExternalAlpha ("Enable External Alpha", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Cull Off
        Lighting Off
        ZWrite Off

        // スプライト描画前の映像をキャプチャーしておく
        GrabPass {}
        
        // まずスプライト図形内をRGBAすべて白色で塗りつぶしておく
        Pass
        {
            Blend One Zero

            CGPROGRAM
            #pragma vertex SpriteVert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_instancing
            #pragma multi_compile_local _ PIXELSNAP_ON
            #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
            #include "UnitySprites.cginc"
            fixed4 frag(v2f IN) : SV_Target
            {
                return 1.0;
            }
            ENDCG
        }
        
        // ここにスプライトを重ね描きするが、重なったときは値が小さい方を採用する
        Pass
        {
            Blend One One
            BlendOp Min

            CGPROGRAM
            #pragma vertex SpriteVert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_instancing
            #pragma multi_compile_local _ PIXELSNAP_ON
            #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
            #include "UnitySprites.cginc"
            fixed4 frag(v2f IN) : SV_Target
            {
                return SampleSpriteTexture(IN.texcoord) * IN.color;
            }
            ENDCG
        }

        // 最初に保存しておいたスプライト描画前の映像を重ねることで透明にする
        // 通常のアルファブレンディングとは逆に、描画先の映像が描画元の映像に重ね合わさるような形にする
        Pass
        {
            Blend OneMinusDstAlpha DstAlpha, OneMinusDstAlpha One

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_instancing
            #pragma multi_compile_local _ PIXELSNAP_ON
            #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
            #include "UnitySprites.cginc"
            struct v2fGrab
            {
                float4 vertex : SV_POSITION;
                fixed4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                float4 grabCoord : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };
            v2fGrab vert(appdata_t IN)
            {
                v2fGrab OUT;
                UNITY_SETUP_INSTANCE_ID (IN);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                OUT.vertex = UnityFlipSprite(IN.vertex, _Flip);
                OUT.vertex = UnityObjectToClipPos(OUT.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color * _Color * _RendererColor;
                OUT.grabCoord = ComputeGrabScreenPos(OUT.vertex);
                #ifdef PIXELSNAP_ON
                OUT.vertex = UnityPixelSnap(OUT.vertex);
                #endif
                return OUT;
            }
            sampler2D _GrabTexture;
            fixed4 frag(v2fGrab IN) : SV_Target
            {
                return tex2Dproj(_GrabTexture, IN.grabCoord);
            }
            ENDCG
        }
    }
}

通常のSprites-Defaultだと下図のように見えるところ...

MinTransparencyの場合は下図のようになりました。

ただし、この方法はご質問者さんがご提示いただいた図のような「スプラインに近い部分ほど透明な単色グラデーション」みたいな形にしか通用しないだろうと思います。また、レンダリングパスもグラブパスを含めて合計4回もありますので、ちょっと非効率的かもしれません。
他には「なるべく皺が生じないようなメッシュを生成するSpriteShapeGeometryCreatorを作る」という手もありそうです。MinTransparencyのやり方だと不十分でしたら、まだ構想段階ではありますがこっちの方面での対処法も検討してみようかと思います。

Comments

[kurokurota]

迅速な回答ありがとうございました…！
２度塗りの際、アルファ値の小さいほうを採用するという手段は思いついたものの、自分の力では実装できずイチからシェーダの勉強をしているところでした。勉強させていただきます！
SpriteShapeGeometryCreatorも知らなかったので調べてみようと思います。本当にありがとうございました。