shaderで作った円の大きさが変わってしまう

Question

・作っているもの
マウスの動きに合わせて視野範囲が変化するというものを作っています．
planeに，shaderで同じ大きさの固定円(A)とマウスの動きに合わせて動く円(B)を連続で配置することで，視野範囲が大きくなっているように見せようと考えています．

イメージとしては，
カーソルを右に移動させたら右側に徐々に視野が大きくなる，斜め下に移動したら右側が徐々に円に戻りながら斜め下が徐々に広がるという感じです．

・できていないこと
固定円(A)と動く円(B)をshaderで作成したところ，動く円(B)がとても小さく表示されました．固定円(A)と同じように記入しましたが，どこを間違えているのかわかりません．
調べてみましたが解決できませんでした…

以下，現在の状態と参考URLです．

▼shader

Shader "Custom/patternTest"
{
    Properties
	{
		_HolePos1("Hole vector1", Vector) = (0.5,0.5,1.0,1.0)
		_HolePos2("Hole vector2", Vector) = (0.5,0.5,1.0,1.0)
		_Color1("Colo1r", Color) = (0.0,0.0,0.0,1.0)
		_Color2("Color2", Color) = (0.0,0.0,0.0,1.0)
		_HoleSize1("Hole Size1", float) = 0.1
		_HoleSize2("Hole Size2", float) = 0.1
		_BlurThick1("Blur Thick1", float) = 0.01
		_BlurThick2("Blur Thick2", float) = 0.01
	}

	SubShader
	{
		Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}

		ZWrite Off
		Blend SrcAlpha OneMinusSrcAlpha 

		Pass{
			CGPROGRAM

			#pragma vertex vert 
			#pragma fragment frag

			#include "UnityCG.cginc"

			float _HoleSize1;
			float _HoleSize2;
			float _BlurThick1;
			float _BlurThick2;
			fixed4 _HolePos1;
			fixed4 _HolePos2;
			fixed4 _Color1;
			fixed4 _Color2;

			struct appdata
			{
			    float4 vertex : POSITION;
			    float3 normal : NORMAL;
			    float4 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 pos : POSITION;
				float2 uv : TEXCOORD0;
			};

			v2f vert (appdata v)
			{
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				o.uv = float2(v.texcoord.x, v.texcoord.y);
				return o;
			}

			half4 frag (v2f i) : COLOR
			{
				half4 col1 = _Color1;
				half4 col2 = _Color2;
				float2 pos1 = i.uv;
				float2 pos2 = i.uv;
				float col1_a = 0.5;
				float col2_a = 0.5;

				float dist1 = distance(pos1, float2(_HolePos1.x, _HolePos1.y));
				float dist2 = distance(pos2, float2(_HolePos2.x, _HolePos2.y));

				_HoleSize1 = 0.01;
				_HoleSize2 = 0.01;
				_BlurThick1 = 0.1;
				_BlurThick2 = 0.1;
				col1.a = col1_a;
				col2.a = col2_a;


				//--------------------円(A)--------------------
				if(dist1 < _HoleSize1)
				{
					clip(-1.0);
				}
				else if(dist1 < _HoleSize1 + _BlurThick1)
				{
					col1.a = (dist1 - _HoleSize1) * 10.0;
					col1.a = pow(col1.a, 2.0);
					
					if(col1.a >= col1_a) col1.a = col1_a;
				}

				//--------------------円(B)--------------------
				if(dist2 < _HoleSize2)
				{
					clip(-1.0);
				}
				else if(dist2 < _HoleSize2 + _BlurThick2)
				{
					col2.a = (dist2 - _HoleSize2) * 10.0;
					col2.a = pow(col2.a, 2.0);
					
					if(col2.a >= col2_a) col2.a = col2_a;
				}
				return col1;
				return col2;

			}	
			ENDCG
		}
	}
}

▼円(B)を動かすためのscript

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PatternHole : MonoBehaviour
{
    private float mouseX;
    private float mouseY;

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        mouseX = Input.mousePosition.x;
        mouseY = Input.mousePosition.y;

        var pinPos = new Vector3(mouseX / Screen.width, mouseY / Screen.height, 0f);
        GetComponent<Renderer>().material.SetVector("_HolePos2", pinPos);
    }
}

▼実行時の画面（画像の文字は説明用の後付けです）

▼shader参考URL
リンク内容

初めて投稿するため，失礼な点やわかりにくい点がありましたら申し訳ございません．
解決方法のヒントなどありましたら，ご教授いただけると幸いです．
よろしくお願いいたします．

Answer 1

コードの各部分を円A用と円B用に二重化してやるという発想は妥当かと思うのですが、frag末尾の...

				return col1;
				return col2;

というのはまずいでしょうね。このように記述してもfragから出力される色はcol1だけで、col2は無視されてしまうかと思います。
結局、円Bについては上の方の...

				if(dist2 < _HoleSize2)
				{
					clip(-1.0);
				}

という部分だけが結果に影響することになるでしょう。円B中心の半径_HoleSize2未満の小さい部分だけがclipによってくり抜かれ、周りのグラデーションがない小さな円になってしまったものと思われます。

円Bにも周りにグラデーション領域ができるようにするとなると、一案としては「中心点が一番近い円の色を返す」というのはどうでしょう。つまりdist1とdist2を比べ、dist1の方が近かったらcol1を、dist2の方が近かったらcol2を返すというわけです。

				return lerp(col1, col2, step(dist2, dist1));

穴をマウスポインタに向かって伸ばす件について

下記のような穴のスクリプトと...

using System;
using UnityEngine;
using UnityEngine.Rendering;

[RequireComponent(typeof(Renderer))]
public class Hole : MonoBehaviour
{
	private const int SpokeCount = 32;
	private const float SmoothingThreshold = 0.001f;
	private static readonly int CenterProperty = Shader.PropertyToID("_Center");
	private static readonly int InverseMaxSpokeLengthProperty = Shader.PropertyToID("_InverseMaxSpokeLength");
	private static readonly int SpokeLengthsProperty = Shader.PropertyToID("_SpokeLengths");
	private static readonly int SmoothingFactorProperty = Shader.PropertyToID("_SmoothingFactor");

	[SerializeField][Min(0.0f)] private float maxSpokeLength = 0.4f; // ローカル空間におけるスポークの最大長さ
	[SerializeField][Min(0.0f)] private float mouseAngleHalfWidth = 15.0f; // スポークの長さが半減するマウスポインタとスポークの角度差

	public Vector2 center; // 穴の中心のローカルXY座標
	[Min(0.0f)] public float smoothTime = 1.0f; // スポークが目標長さに伸縮するおよその時間
	[Range(0.0f, 0.05f)] public float outlineSmoothness = 0.025f; // 穴の輪郭のなめらかさ
	public bool showDebugGizmos; // スポークとマウスポインタ位置をシーンビュー上に表示するか

	private readonly Vector2[] spokeDirections = new Vector2[SpokeCount];
	private readonly float[] spokeLengths = new float[SpokeCount];
	private readonly float[] spokeTargetLengths = new float[SpokeCount];
	private readonly float[] spokeVelocities = new float[SpokeCount];
	private LocalKeyword enableSmoothing;
	private Camera mainCamera;
	private Material material;
	private float spokeLengthFactor;

	private void Start()
	{
		this.material = this.GetComponent<Renderer>().material;
		this.enableSmoothing = new LocalKeyword(this.material.shader, "ENABLE_SMOOTHING");
		this.mainCamera = Camera.main;
		for (var i = 0; i < SpokeCount; i++)
		{
			var spokeAngle = (2.0f * Mathf.PI * i) / SpokeCount;
			this.spokeDirections[i] = new Vector2(Mathf.Cos(spokeAngle), Mathf.Sin(spokeAngle));
		}
		this.spokeLengthFactor = (Mathf.Log(0.5f) * Mathf.Rad2Deg * Mathf.Rad2Deg) / (this.mouseAngleHalfWidth * this.mouseAngleHalfWidth);
	}

	private void Update()
	{
		// まず、マウスポインタの位置をもとに各スポークの目標長さを決める
		// スポークの向きがマウスポインタの方角からずれるほど、スポークの
		// 長さを釣り鐘形に割り引くことでなめらかな外形を作る
		var mouseRay = this.mainCamera.ScreenPointToRay(Input.mousePosition);
		if (!new Plane(this.transform.forward, this.transform.position).Raycast(mouseRay, out var enter))
		{
			return;
		}
		var mouseWorldPosition = mouseRay.GetPoint(enter);
		var mousePosition = (Vector2)this.transform.InverseTransformPoint(mouseWorldPosition);
		var relativeMousePosition = mousePosition - this.center;
		var mouseLength = Mathf.Min(relativeMousePosition.magnitude, this.maxSpokeLength);
		if (mouseLength > 0.0f)
		{
			var mouseDirection = relativeMousePosition.normalized;
			for (var i = 0; i < SpokeCount; i++)
			{
				var angle = Mathf.Acos(Mathf.Clamp(Vector2.Dot(mouseDirection, this.spokeDirections[i]), -1.0f, 1.0f));
				this.spokeTargetLengths[i] = Mathf.Exp(this.spokeLengthFactor * angle * angle) * mouseLength;
			}
		}
		else
		{
			Array.Fill(this.spokeTargetLengths, 0.0f);
		}

		// 各スポークの長さを目標値に向かってなめらかに伸縮させる
		for (var i = 0; i < SpokeCount; i++)
		{
			this.spokeLengths[i] = Mathf.SmoothDamp(
				this.spokeLengths[i],
				this.spokeTargetLengths[i],
				ref this.spokeVelocities[i],
				this.smoothTime);
			if (this.showDebugGizmos)
			{
				Debug.DrawLine(
					this.transform.TransformPoint(this.center),
					this.transform.TransformPoint((this.spokeDirections[i] * this.spokeLengths[i]) + this.center),
					Color.green);
			}
		}

		// マウスポインタの位置に十字を表示する
		if (this.showDebugGizmos)
		{
			const float crossRadius = 8.0f;
			var mouseScreenPosition = this.mainCamera.WorldToScreenPoint(mouseWorldPosition);
			Debug.DrawLine(
				this.mainCamera.ScreenToWorldPoint(mouseScreenPosition + (Vector3.left * crossRadius)),
				this.mainCamera.ScreenToWorldPoint(mouseScreenPosition + (Vector3.right * crossRadius)),
				Color.yellow);
			Debug.DrawLine(
				this.mainCamera.ScreenToWorldPoint(mouseScreenPosition + (Vector3.down * crossRadius)),
				this.mainCamera.ScreenToWorldPoint(mouseScreenPosition + (Vector3.up * crossRadius)),
				Color.yellow);
		}

		// 穴の中心、スポークの長さ、その他マテリアルに必要なデータをセットする
		this.material.SetVector(CenterProperty, this.center);
		this.material.SetFloat(InverseMaxSpokeLengthProperty, 1.0f / this.maxSpokeLength);
		this.material.SetFloatArray(SpokeLengthsProperty, this.spokeLengths);
		this.material.SetKeyword(this.enableSmoothing, this.outlineSmoothness > SmoothingThreshold);
		this.material.SetFloat(SmoothingFactorProperty, 1.0f / this.outlineSmoothness);
	}

	private void OnDestroy()
	{
		Destroy(this.material);
	}
}

板のマテリアル用に下記のようなシェーダーを用意しました。

Shader "Unlit/Hole"
{
	Properties
	{
		_Color ("Base Color", Color) = (0.0, 0.0, 0.0, 0.5) // 背景の色
		_InnerRadius ("Inner Radius", Range(0.0, 1.0)) = 0.1 // 縁のグラデーションが始まる半径
		_OuterRadius ("Outer Radius", Range(0.0, 1.0)) = 0.2 // 縁のグラデーションが終わる半径
	}
	SubShader
	{
		Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

		ZWrite Off
		Blend SrcAlpha OneMinusSrcAlpha

		Pass
		{
			CGPROGRAM
			#pragma multi_compile _ ENABLE_SMOOTHING
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			#define SPOKE_COUNT 32

			struct v2f
			{
				float2 position : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			v2f vert(float4 vertex : POSITION)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(vertex);
				o.position = vertex.xy;
				return o;
			}

			float2 _Center;
			float _InverseMaxSpokeLength;
			float _SpokeLengths[SPOKE_COUNT];
			float _SmoothingFactor;
			fixed4 _Color;
			float _InnerRadius;
			float _OuterRadius;

			// 線分abと点pの距離を得る
			float distance(float2 a, float2 b, float2 p)
			{
				float2 s = b - a;
				float l2 = dot(s, s);
				if (l2 > 0.0)
				{
					float2 v = p - a;
					float f = dot(v, s) / l2;
					return f <= 0.0 ? distance(a, p) : f >= 1.0 ? distance(b, p) : abs((v.x * s.y) - (v.y * s.x)) / sqrt(l2);
				}
				return distance(a, p);
			}

			fixed4 frag(v2f i) : SV_Target
			{
				float minimumDistance = 1.#INF;

				#ifdef ENABLE_SMOOTHING
					float nearness = exp2(-distance(_Center, i.position) * _SmoothingFactor);
					float weightSum = 1.0;
				#endif

				for (int j = 0; j < SPOKE_COUNT; j++)
				{
					// ピクセルと各スポークの距離を調べて...
					float2 direction;
					sincos(2.0 * UNITY_PI * j / SPOKE_COUNT, direction.y, direction.x);
					float d = distance(_Center, _Center + direction * _SpokeLengths[j], i.position);
					
					#ifdef ENABLE_SMOOTHING
						// 外形をスムージングする場合、まずピクセルと各スポークの近さを積算する
						// このとき、スポークの長さに応じて積算量に重みをつける
						float weight = _SpokeLengths[j] * _InverseMaxSpokeLength;
						nearness += exp2(-d * _SmoothingFactor) * weight;
						weightSum += weight;
					#else
						// 外形をスムージングしない場合、単純にピクセルと各スポークの距離を調べて最短のものを選ぶ
						minimumDistance = min(minimumDistance, d);
					#endif
				}

				// 外形をスムージングする場合、minimumDistanceを積算した近さから逆算する
				#ifdef ENABLE_SMOOTHING
					minimumDistance = -log2(nearness / weightSum) / _SmoothingFactor;
				#endif

				// 完全透明部分はクリッピングする
				float2 radii = float2(min(_InnerRadius, _OuterRadius), max(_InnerRadius, _OuterRadius));
				clip(minimumDistance - radii.x);

				// 縁の部分のグラデーションを決める
				fixed4 color = _Color;
				color.a *= smoothstep(radii.x, radii.y, minimumDistance);
				return color;
			}
			ENDCG
		}
	}
}

穴を中心に仮想的なスポークを放射状に配置し、それらがマウスポインタの位置に応じて伸縮するようにしてみました。シェーダー上ではこれらスポークとの距離をもとに穴を開けるという作戦です。

Comments

[tuna_onigiri]

ご回答してくださりありがとうございます．
円の大きさというよりも，円(B)のグラデーションの部分が反映されていない結果だったのですね…
教えていただいた方法を試してみたいと思います！

[Bongo]

お目通しいただきありがとうございます。あのあと、個人的な興味からご質問の背景として説明いただいた「マウスの動きに合わせて視野範囲が変化する」という件について検討してみましたので追記しました。ですが、ご質問者さんの場合は円を連続的に配置する方針とのことですから、それとは少々異なったアプローチで進めたため余計な混乱を招く蛇足になってしまうかもしれません。単に私が「この動きは何かに使えそうだ」と思って勝手にやったことですので、ちょっとした参考程度としてとらえていただけるとありがたいです。

[tuna_onigiri]

追記ありがとうございます。とても滑らかに動いていて驚きました！
最初に回答いただいた方法だとうまく反映できませんでした…。
もう一度見直し、追記の方法も参考にしながら修正していこうと思います！
わかりやすく丁寧なBongoさんのご回答に感謝いたします。

[tuna_onigiri]

先の方法ですが、Unlit Shaderを使用していなかったのが原因でした。
原因に気が付くことができて良かったです…。ありがとうございました。