よつばゲームズ
ノード一覧に戻る

距離マップ

distance_field

マスクから輪郭までの距離をグレースケール画像にします。グローや輪郭グラデーションの下地になります

確認済み
解説あり

入力ポート

名前型説明
画像
input
Image
必須
形状の元になるマスク画像です（アルファか明るさで判定）

出力ポート

名前型説明
マップ
output
Image
グレースケールの距離マップです

パラメータ

名前型既定値範囲説明・選択肢
判定基準
source
Enum
Alpha—

どの値で形状の内外を判定するかです

  • OKLCH 明度OKLCH-L
    見た目の明るさで判定します。影やハイライトなど、目で見た明暗に合わせたい時に使います。
  • OKLCH 彩度OKLCH-C
    色の鮮やかさで判定します。くすんだ色と鮮やかな色を分けたい時に使います。
  • HSV 彩度HSV-S
    HSV の鮮やかさで判定します。一般的な色相・彩度・明度の感覚で選びたい時に使います。
  • HSV 明度HSV-V
    RGB の一番明るいチャンネルを基準にします。光った色や原色の強さを見たい時に使います。
  • RGB 赤RGB-R
    赤の強さで判定します。赤みだけを抜き出したい時に使います。
  • RGB 緑RGB-G
    緑の強さで判定します。緑成分だけを抜き出したい時に使います。
  • RGB 青RGB-B
    青の強さで判定します。青成分だけを抜き出したい時に使います。
  • アルファAlpha
    透明度で判定します。不透明な形だけをマスクにしたい時に使います。
  • 輝度Luminance
    RGB から計算した明るさで判定します。OKLCH より単純な白黒変換に近い結果が欲しい時に使います。
測る範囲
region
Enum
Outside—

輪郭のどちら側の距離を測るかです

  • 外側Outside
    形の中は白のまま、外へ向かって暗くなります。グロー向けです
  • 内側Inside
    形の中心ほど白く、内側の輪郭画素で正確に黒になります。内側の陰影向けです
  • 両側Both
    輪郭画素が正確に0.5、内側ほど白、外側ほど黒の符号付き距離です
最大距離
max_distance
Float
161–256 / step 1

この距離（ピクセル）でグラデーションが端まで到達します

概要

シルエットから「輪郭まで何ドットか」を白黒グラデーションにするノードです。 グロー(発光)・内側の陰影・等高線模様など、輪郭からの距離に応じた表現の 万能下地になります。

使い方のポイント

  • グローの黄金パターン: シルエット → distance_field(Outside) → gradient_map(発光色) → blend(Add) で元絵に重ねる
  • max_distance が「効果の届く範囲」。グローなら4〜8、広いオーラなら16〜
  • region の使い分け: Outside=外側への光・影、Inside=内側の縁取り陰影、 Both=等高線・輪郭中心の効果
  • 形状判定は選んだ source の0.5以上です。入力が空なら、どのregionでも 不透明な黒の距離マップになります
  • ドット絵らしい段階にするなら後段で階調を落とす(posterize 系)と 「等高線状のグロー」になる

関連ノード

  • gradient_map — 距離→色の変換(ほぼセットで使う)
  • blend — 元画像への重ね合わせ
  • region_distance — RegionMap 版の距離マップ
  • morphology — 距離ではなく形そのものの拡縮

出力の読み方

region 内側 輪郭 外側
Outside 白(1.0) 白 境界から離れるほど黒へ
Inside 中心ほど白 黒(0.0) 黒
Both 0.5超〜白 0.5 0.5未満〜黒

技術詳細

  • チャンファー2パス法（1 / √2 重み）による近似ユークリッド距離です
  • 対象領域の境界画素を距離0とします。そのためInsideの境界は0、Bothの 境界は正確に0.5です
  • Inside はキャンバスの端も「外側」として扱います（全面不透明のタイルでも距離が出ます）

使用例

  1. グロー: シルエット → Distance(Outside) → Gradient Map（発光色ランプ）→ Blend(Add) で元画像に重ねる
  2. 内側の陰影: Distance(Inside) → Gradient Map で「フチが暗く中心が明るい」塗りを作る
  3. 等高線: Distance(Both) → Posterize で形状に沿った縞模様を作る

関連ノード

グラデーションマップgradient_mapブレンドblend領域距離region_distanceマスク膨張収縮morphology
ノード一覧に戻る
距離マップ — PixPipeline ノード解説