シェーダを使って円の枠の色を変えたい

Question

前提・実現したいこと

シェーダを使って円の枠の色を変えたい
↓実現したいこと
![

↓現状
![

該当のソースコード

Shader "Unlit/Circle"
{
    Properties
    {
        _Color("Color", Color) = (1,0.5,0,1) // 円の内側の色
        _BackgroundColor("Background Color", Color) = (1,1,1,1) // 円の外側の色
        _FrameColor("Frame Color",Color)=(1,0.5,0.1) //円の枠の色
        _MainTex("Texture", 2D) = "white" {}
    }
        SubShader
    {
        Tags {"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent"}
        LOD 100

        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            // プロパティで設定された色を受け取るユニフォーム変数を用意する
            fixed4 _Color;
            fixed4 _BackgroundColor;
            fixed4 _FrameColor;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed radius = 0.4;
                fixed r = distance(i.uv, fixed2(0.5,0.5));

                // lerpで色を選択する
                // stepの結果が0なら_Colorを、1なら_BackgroundColorを返させるようにする
                return lerp(_Color, _BackgroundColor, step(radius, r));
            }
            ENDCG
        }
    }
}

補足情報（FW/ツールのバージョンなど）

環境:Windows10、VisualStudio2019、Unity2020.1.0b13 Personal

Answer 1

シェーダー上で図形を描くのは、感覚的に理解しやすいであろう「位置を決めてピクセルを塗る」といった手順とは異なり「まずピクセルの位置が与えられ、そのピクセルの色を決める」とでも言うような逆向きの発想が要求されるでしょうから、ちょっととっつきにくいかもしれませんね。

枠を描くとなると、境界線上であるかどうかを判定する仕組みを考える必要があるでしょう。
現状では「現在描画しようとしているピクセルの位置が、円の中心からの距離が指定された半径値以上であるか」によって円の内外を判定しています。それを応用すると...

• まずこのピクセルの位置が円の境界線外側よりも遠いかを判定する。遠いなら背景色で塗り、近いなら境界線色で塗る。
• 次に円の境界線内側よりも遠いかを判定する。遠いなら色はそのままとし、近いなら塗りつぶし色で塗る。

という風に実装できないでしょうか?

Shader "Unlit/Circle"
{
    Properties
    {
        _Color("Color", Color) = (1,0.5,0,1) // 円の内側の色
        _BackgroundColor("Background Color", Color) = (1,1,1,1) // 円の外側の色
        _FrameColor("Frame Color",Color)=(1,0.5,0.1) //円の枠の色
        _FrameWidth("Frame Width", Range(0.0, 0.1)) = 0.01 // 円の枠の太さ
        _MainTex("Texture", 2D) = "white" {}
    }
        SubShader
    {
        Tags {"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent"}
        LOD 100

        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            // プロパティで設定された色を受け取るユニフォーム変数を用意する
            fixed4 _Color;
            fixed4 _BackgroundColor;
            fixed4 _FrameColor;
            float _FrameWidth;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed radius = 0.4;
                fixed r = distance(i.uv, fixed2(0.5,0.5));

                // まず境界線外側について内外判定を行い、色を決定する
                fixed4 color = lerp(_FrameColor, _BackgroundColor, step(radius, r));

                // 次に円の半径を境界線の太さの分だけ縮めて内外判定を行い、最終的な色を決定して返す
                return lerp(_Color, color, step(radius - _FrameWidth, r));
            }
            ENDCG
        }
    }
}

Comments

[futon03]

実装できました。回答ありがとうございます。
考え方から丁寧に教えていただき、非常に分かりやすいです。
勉強になります