[UE5]マテリアルのSDFとは？画像から考える距離場のしくみ

こんにちはこんにちは。
アートディレクターのくろさわです。

最近では EPICの UI Material Lab やトゥーン調マテリアルなど、さまざまな場面で SDF（Signed Distance Field） という言葉を見かけるようになりました。この記事では、SDFの基本的な概念を整理し、画像ベースの距離場の生成から数式ベースのSDF構築までを順を追って解説します。

SDFとは：符号付き距離場（Signed Distance Field）

SDF（Signed Distance Field）とは、任意の点が「形状の輪郭からどれだけ離れているか」を示すデータ構造です。内側を負の値、外側を正の値として表現し、0の値が境界を示します。

しかし、いきなり「符号付き距離場」と言われても直感的にはわかりづらいかもしれません。
ここでは、より単純な「距離場（Distance Field）」から順に考えてみましょう。

画像からDistance Fieldを作る

最も単純な距離場は、画像の輪郭から外側に向かって距離に応じたグラデーションを持たせたものです。
たとえば、Photoshopの効果で「光彩（外側）」を適用すると、明るさが輪郭からの距離を示すようになります。これが距離場（Distance Field）の基本的なイメージです。

このような画像はグレースケールかつリニア（非sRGB）で保存するのが一般的です。
圧縮設定を Alpha にすると、データサイズを抑えつつノイズを最小限にできます。

マテリアルエディタ上では、このデータを使ってアウトライン生成やグロー効果などを行えます。

画像から近似的なSDFを作る

次に、形の内側にもグラデーションを付与することで、SDFに近い表現が可能になります。

SDFでは

• 0 が境界
• 負の値が内側
• 正の値が外側

を意味しますが、画像データでは負の値を持てないため、0.5を0として扱う形で擬似的に表現します。

• グレー（0.5）が境界
• 0.5より小さい値が内側
• 0.5より大きい値が外側

となるように画像を作成します。

この手法によって、画像上でSDFを再現した擬似SDF を生成できます。

このアプローチは、Normal Mapにおける0.5基準の法線表現とも類似しています。
Normal Map では、モデル表面の Tangent（接線）・Binormal（従法線）・Normal（法線） の3軸で構成される「接空間（Tangent Space）」上の法線方向を RGB で記録します。各成分値は本来 -1 ～ +1 の範囲をとりますが、テクスチャは負の値を保持できないため、0〜1の範囲に変換して保存しています。

SDFをブレンドする

SDFの大きな利点のひとつは、SDF同士を容易にブレンドできる点です。

距離場同士を「最小値」「最大値」で合成することで、次のようなブーリアン的操作が可能になります。

• 形状の融合（Union）
• 共通部分の抽出（Intersection）
• 差分の生成（Subtraction）

この特性を活用すると、複数の形状が溶け合うようなエフェクトをマテリアル上で表現できます。

数式からSDFを作る

ここまで紹介したのは画像ベースのSDFですが、円や矩形、線分などは、座標情報から輪郭までの距離を数式で正確に求めることができるため、完全な数式SDFとして表現可能です。

この方法には以下の利点があります

• 解像度や圧縮方式の影響を受けない
• 距離値が常に正確
• Texture Sample を使用しないため GPU 負荷が軽減される場合がある

Unreal Engine の UI Material Lab に含まれる多くの関数群は、このような「数式ベースのSDF」に基づいて設計されています。 

マテリアル上で形状を動的に生成したい場合、こうした関数を組み合わせることで柔軟な制御が可能になります。

まとめ

• SDF（Signed Distance Field） は、形状の輪郭からの距離を符号付きで表したデータ
• 画像上では 0.5を基準に負の値を擬似的に表現できる
• SDF同士のブレンドで、ブーリアン演算的な形状操作が可能
• 数式ベースのSDFは、解像度非依存で軽量な表現手法として有効

SDFのような発想は様々な場面で活躍するのでぜひ使ってみてください！