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

前提・実現したいこと

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

↓現状
![

該当のソースコード

Cg
1Shader "Unlit/Circle"
2{
3    Properties
4    {
5        _Color("Color", Color) = (1,0.5,0,1) // 円の内側の色
6        _BackgroundColor("Background Color", Color) = (1,1,1,1) // 円の外側の色
7        _FrameColor("Frame Color",Color)=(1,0.5,0.1) //円の枠の色
8        _MainTex("Texture", 2D) = "white" {}
9    }
10        SubShader
11    {
12        Tags {"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent"}
13        LOD 100
14
15        ZWrite Off
16        Blend SrcAlpha OneMinusSrcAlpha
17
18        Pass
19        {
20            CGPROGRAM
21            #pragma vertex vert
22            #pragma fragment frag
23            // make fog work
24            #pragma multi_compile_fog
25
26            #include "UnityCG.cginc"
27
28            struct appdata
29            {
30                float4 vertex : POSITION;
31                float2 uv : TEXCOORD0;
32            };
33
34            struct v2f
35            {
36                float2 uv : TEXCOORD0;
37                UNITY_FOG_COORDS(1)
38                float4 vertex : SV_POSITION;
39            };
40
41            sampler2D _MainTex;
42            float4 _MainTex_ST;
43
44            // プロパティで設定された色を受け取るユニフォーム変数を用意する
45            fixed4 _Color;
46            fixed4 _BackgroundColor;
47            fixed4 _FrameColor;
48
49            v2f vert(appdata v)
50            {
51                v2f o;
52                o.vertex = UnityObjectToClipPos(v.vertex);
53                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
54                UNITY_TRANSFER_FOG(o,o.vertex);
55                return o;
56            }
57
58            fixed4 frag(v2f i) : SV_Target
59            {
60                fixed radius = 0.4;
61                fixed r = distance(i.uv, fixed2(0.5,0.5));
62
63                // lerpで色を選択する
64                // stepの結果が0なら_Colorを、1なら_BackgroundColorを返させるようにする
65                return lerp(_Color, _BackgroundColor, step(radius, r));
66            }
67            ENDCG
68        }
69    }
70}

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

ShaderLab
1Shader "Unlit/Circle"
2{
3    Properties
4    {
5        _Color("Color", Color) = (1,0.5,0,1) // 円の内側の色
6        _BackgroundColor("Background Color", Color) = (1,1,1,1) // 円の外側の色
7        _FrameColor("Frame Color",Color)=(1,0.5,0.1) //円の枠の色
8        _FrameWidth("Frame Width", Range(0.0, 0.1)) = 0.01 // 円の枠の太さ
9        _MainTex("Texture", 2D) = "white" {}
10    }
11        SubShader
12    {
13        Tags {"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent"}
14        LOD 100
15
16        ZWrite Off
17        Blend SrcAlpha OneMinusSrcAlpha
18
19        Pass
20        {
21            CGPROGRAM
22            #pragma vertex vert
23            #pragma fragment frag
24            // make fog work
25            #pragma multi_compile_fog
26
27            #include "UnityCG.cginc"
28
29            struct appdata
30            {
31                float4 vertex : POSITION;
32                float2 uv : TEXCOORD0;
33            };
34
35            struct v2f
36            {
37                float2 uv : TEXCOORD0;
38                UNITY_FOG_COORDS(1)
39                float4 vertex : SV_POSITION;
40            };
41
42            sampler2D _MainTex;
43            float4 _MainTex_ST;
44
45            // プロパティで設定された色を受け取るユニフォーム変数を用意する
46            fixed4 _Color;
47            fixed4 _BackgroundColor;
48            fixed4 _FrameColor;
49            float _FrameWidth;
50
51            v2f vert(appdata v)
52            {
53                v2f o;
54                o.vertex = UnityObjectToClipPos(v.vertex);
55                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
56                UNITY_TRANSFER_FOG(o,o.vertex);
57                return o;
58            }
59
60            fixed4 frag(v2f i) : SV_Target
61            {
62                fixed radius = 0.4;
63                fixed r = distance(i.uv, fixed2(0.5,0.5));
64
65                // まず境界線外側について内外判定を行い、色を決定する
66                fixed4 color = lerp(_FrameColor, _BackgroundColor, step(radius, r));
67
68                // 次に円の半径を境界線の太さの分だけ縮めて内外判定を行い、最終的な色を決定して返す
69                return lerp(_Color, color, step(radius - _FrameWidth, r));
70            }
71            ENDCG
72        }
73    }
74}