ディスタンスフィールドについて
Unityやらゲームやらでフォント表示やらに使われる、小さい画像を目いっぱい拡大してもエッジが滑らかに表示できるディスタンスフィールドという技術があり。
エリア情報を内と外に分け、テクスチャ内の各ピクセルにはそこからの距離を納める。（距離の絶対値ではなくマイナスの距離も扱う場合はサインド（符号付）ディスタンスフィールドといいい、それを収めた手クスチャをSDFテクスチャという。
こんな雑な解説↑より、詳しい解説は他の有名どころのサイトに任せまして、
このSDFテクスチャをサブスタンスデザイナーで表示してみる。
利用するSDFテクスチャ
128×128の元画像を
同サイズのSDFテクスチャに変換した。距離をどのくらいまで入れるのかなどフォーマットとしてはいろいろありそうだが、このデータでは128未満をマイナスの値128以上として扱った。変換方法は後述。
サブスタンデザイナーで拡大して表示する
通常はシェーダーでSDFテクスチャをデコードして表示するのだが、これをサブスタンスデザイナー内で対応してみる。リアルタイムで変換しないならAIで対応しても良い気はする。まあ拡大だけでなく、縁取りやらの装飾がもりもりできるという利点はある。
トーンカーブを用いる
ある閾値を用いて内側か外側かを判断して描画するのがシェーダーでの実装なので、同じことをトーンカーブで実現してみた。カーブの具合は適当に見た目で調整する。
128pxサイズのSDFテクスチャが4kサイズまで拡大してもジャギーが発生せず滑らかなエッジを保てることが確認できた。
※上の画像2つは4kサイズ。右クリックで画像を別表示すると大きなサイズで確認ができる。拡大するとエッジがぼけてくるかもしれないが、トーンカーブの調整でさらにシャープにはできると思われる。
グラデーションマップを用いる
モノクロイメージにランプ指定で色味をつければ、フォント表示で例に見られるような、縁取りなどを施す事もできるはずだ。同様に128px4kに拡大して試してみた。
このようにおおよそうまく行った。
ちなみにSDFテクスチャにいろいろなノードで変形をかけた場合、最終デコード結果にそのまま変形結果が表れる模様。なかなか興味深い。
SDFテクスチャーをサブスタンスデザイナーで作る
ここからが本題。ディスタンスフィールドのテクスチャを作成するツールは世の中にいろいろあるが、これをサブスタンスデザイナーのノードグラフで行ってみる。実際のこのポストで扱っているSDFテクスチャはサブスタンスデザイナーで作成したものである。
長くなったので後半ポストに続く。sbs/sbsarファイルなども配布予定。
