シェーダー基礎
教材一覧

Appearance

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

2 / 4 距離からAlphaへの変換 ​

このステップの目的

しきい値の前後を使い、円の表示と輪郭の柔らかさを制御します。

境界を表示へ変える ​

dが正なら内側、負なら外側です。まずStepのEdgeへ0、Inへdを接続します。出力をAlpha、固定の白をBase Colorへつなぎ、Graphを保存します。円の内側が白、外側が透明になることを確認してください。

柔らかい境界 ​

Smoothstepは、二つの境界値の間で0から1へ滑らかに変わる値を返します。FloatプロパティThresholdを0、Softnessを0.02にします。Softnessは正の値にしてください。

  1. SubtractでThreshold - Softnessを作り、SmoothstepのEdge1へ接続します。
  2. AddでThreshold + Softnessを作り、Edge2へ接続します。
  3. dをInへ接続し、Smoothstepの出力をAlphaへつなぎ直します。
text
Alpha = smoothstep(Threshold - Softness, Threshold + Softness, d)

dがThresholdより十分大きい内側では1、十分小さい外側では0です。Thresholdを上げると円は小さくなります。Softnessを増やす操作は、判定が滑らかに変わる幅を増やします。

一つの値を変える確認 ​

Radius=0.3、Softness=0.02を固定し、Thresholdを0から0.1へ変える前に円の大きさを予想します。Thresholdを0へ戻し、次にSoftnessだけを0.01と0.05で比べます。円の大きさを変える目的と境界の硬さを変える目的を区別してください。

比較後はThreshold=0、Softness=0.02へ戻します。

TextMeshProでの利用

通常の文字画像を拡大したときの問題 ​

TMP とビットマップフォントの比較
上がTMP、下がビットマップフォントです。下の例では、拡大によって輪郭がぼやけています。

文字をただのビットマップ画像として持つと拡大した際にピクセルが目立つようになり輪郭が崩れてしまいます。

輪郭を保つために高解像度のフォント画像を用意すると今度はデータ量が増えてしまいます。

UI では画面解像度や表示サイズが変わるため文字の輪郭を安定して描く仕組みが必要です。

文字の形を保存するFont Asset ​

TextMeshPro のフォントアトラス例
文字をまとめたアトラスには、文字の境界からの距離を表すグラデーションが入っています。

TextMeshPro の Font Asset には使用する文字を1枚にまとめたフォントアトラスが入っています。

各ピクセルには文字の輪郭までの距離がグレースケール値として保存されています。

シェーダーはその距離をしきい値で判定し文字本体、ぼかし、アウトライン等の見え方を調整します。

SDFを利用した文字修飾 ​

TMPの文字修飾の例
TMPの文字修飾の例です。アウトラインや影、太さの調整に加え、疑似的なライティング表現もできます。

Face Color で文字本体の色を変える。

Outline で文字の外側に縁取りを付ける。

Underlay で影のような表現を加える。

Dilate や Softness で太さやにじみを調整する。

これらは全て SDF の距離情報を活用して実現されています。

画像に保存された距離は、0〜1へ変換されている場合があります。ここで計算した境界0のdと、Textureの境界値を同じ数値として扱わず、素材の規約を確認します。

チェックリスト
  • StepからSmoothstepへ出力を切り替えて円を確認した。
  • ThresholdとSoftnessを一つずつ変更し、違いを説明できる。