前回の投稿からの続き。SDFテクスチャのデーコードに続き、エンコードもサブスタンスデザイナー内で対応してみる。
サブスタンスデザイナーでSDFテクスチャを扱う利点
作ること自体は他の手段でも簡単に実現できるのでサブスタンスデザイナーでエンコード（SDFテクスチャ作成）する事に何の利点があるのかというところだが、
- そこそこエンコード処理が速い
- 外部に書き出さず、サブスタンスデザイナーのネットワーク内だけで使う
- 小さい解像度でマスクを作り、拡大してデコードする
- 様々なグレースケールイメージをSDFしていろいろ表現に使ってみる
などが考えられる。SDFテクスチャをエクスポートする目的より、ネットワーク内部で使う事に意味を見出せそうだ。デコード処理は既に作成済みのSDFテクスチャを利用できるという事で意味はある。
エンコード処理
ハイパスフィルターとピクセルプロセッサーを用いてSDFテクスチャを作成する。
マイナス値を含めた符号あり距離をエンコードするため、処理を内側と外側で分けて最後にマージしている。中間グレー値0.5を0と考えそれより小さい値をマイナス、大きい値をプラスとして考えている。
２つのピクセルプロセッサーでは、その値の調整を受け持っている。下の図は左が明るいプラス側の処理で、右が暗いマイナス側の処理となる。
エッジからの距離をエンコードするのにハイパスフィルターが使えた。なぜ画像の高周波数成分をとりえ出すハイパスフィルターがなぜ距離の入れ込みとして使えるのか、実はちゃんと考察していない。見た目がそう見えたから使っただけだ。同じような処理のディスタンスノードでは望んだような滑らかな結果にはならなかったので、ハイパスフィルターの処理が距離取得にうまくマッチしたのだろう。。
ハイパスフィルターノード自体の実装は以下のようなグラフになっており
ぼかしたものを反転してadd sub で差分をとるような仕組みになっていた。確かにボケ具合が距離を示すような気はするが、距離値の変異の線形具合などはまともな実装とは異なるかもしれない。
特徴・注意点など
一般的にはSDFテクスチャを作成するソース画像としてエッジのはっきりした（エイリアス処理のない）高解像度画像を用意するほうが普通であるようだが、今回の手法では小さいジャギーの取れた画像をソースとしても問題はなかった。
この作例の処理では距離のエンコード処理がなんちゃってになっている可能性が高く、一般的なSDFテクスチャと結果を合わせるような考慮はしていない。したがってUnityなどで用いる場合意図した表示とは少し異なる感じになると思われる。
また、距離をどのくらいの細かさと幅で入れ込むかによって、デコード時のトーンカーブ・グラデーションマップでの制御のしやすさが変わるだろう。この辺りも今回考慮していない。
しかしながら、小さなテクスチャに距離情報を埋め込み、拡大デコード時になめらかなエッジな画像が得られる、という成したいことは達成できているのでSDFテクスチャが作成できたとした。
複雑な図形のエンコード・デコード例
128x128pxの元画像（左）とSDFテクスチャ化したもの（右）。こんなに小さくて大丈夫かと思うが、
4kサイズにデコードしてもかなりきれいな画像を得ることができた。絵作りに活用もできそうな気がする。
ダウンロード
デコードエンコード共にGithubにsbsファイルを上げてある。SDFテクスチャ作成ノードはsbsar形式にしてある。
