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

前回は画像のAlphaを透明度に使いました。今回は距離を数値で計算し、その値からAlphaを作ります。文字の輪郭を扱うTextMeshProも、この考え方につながっています。

実習の準備

URP Unlit GraphとMaterialを新しく作り、Quadへ割り当てます。Surface TypeはTransparent、Blending ModeはAlphaにします。UVの0〜1、Subtract・Length・Smoothstep・Lerpは、使うステップで確認します。最初の円は画像素材を使わずに計算します。

この回のゴール

円の大きさ、輪郭の柔らかさ、二つの形の混ざり方をMaterialから変更します。

• 境界までの符号付き距離を、内側・外側の表示へ変換できる。
• 二つの距離値を合成・補間し、境界と形の変化を説明できる。

授業の進め方

1 / 4円の境界と符号付き距離UV上の点から円の境界までの距離を計算します。2 / 4距離からAlphaへの変換しきい値の前後を使い、円の表示と輪郭の柔らかさを制御します。3 / 4二つの距離場の合成内側を正にする規約に合わせて、残す領域を選びます。4 / 4距離の補間と形状の調整二つの距離値を補間し、端点と途中の形を比較します。