第05回 SDFによる形状の表示と合成

1 / 4 円の境界と符号付き距離

このステップの目的

UV上の点から円の境界までの距離を計算します。

内側を正にする規約

中心を(0.5,0.5)、半径を0.3とする円を考えます。UVから中心を引き、そのベクトルの長さを求めます。円の半径からこの長さを引いた値をdとします。

d = 半径 - length(UV - 中心)

UV	中心からの距離	d	円との関係
(0.5,0.5)	0	0.3	内側
(0.8,0.5)	0.3	0	境界
(1,0.5)	0.5	-0.2	外側

この回では内側が正、境界が0、外側が負です。内外を符号で区別する距離の場を、符号付き距離場（Signed Distance Field、SDF）と呼びます。内側を負にする規約もあります。どちらを使うかによって、後で使う比較式や合成方法も変わります。

Shader Graphでの計算

1. UVノードからXYを取り出します。SplitでRをU、GをVとして、CombineのRGからVector2を作れます。
2. Vector2プロパティCenterを(0.5,0.5)、FloatプロパティRadiusを0.3で作成します。
3. SubtractのAへUV、BへCenterを接続します。
4. 結果をLengthへ接続します。Lengthは中心からの距離を返します。
5. 別のSubtractのAへRadius、BへLengthをつなぎます。この出力がdです。

距離の計算だけでは円は表示されません。次のステップでdをAlphaへ変換します。ここでは、UV=(0.5,0.8)のときのdを表と同じ方法で求めてください。境界なので0になります。

チェックリスト

• UV・中心・半径からdを求め、内外を符号で判定できる。
• 二つのSubtractでAとBに何を入れるか説明できる。