SDF画像を普通にテクスチャとして使ってみた

SDF画像を普通にテクスチャとして使ってみた

以前の投稿でも扱った拡大してもエッジが滑らかになるSDF画像だが、通常はゲームのフォントやUI、デカールのレンダリングなどに使われる。これを普通にテクスチャとして使って後処理で見栄えを整えられるかという実験をした。

結果として成功した。結果だけ見たい場合は投稿の最後へ。

SDF画像の用意

簡単な画像と複雑な画像をそれぞれSDFに変換した。変換のやり方は上記の投稿の通り。

元画像SDF

もちろん特定のモデルに普通に専用テクスチャを作ってそれをSDF画像化してもよい。

モデルへの適用

有料購入した手のモデルを加工したものを用意。SDF画像を(後で考えれば直接Blenderで投影すればよかったのだが)サブスタンスペインターでトライプラナー投影してこのモデルの専用テクスチャを作った。

比較用にSDF化していない元画像での専用テクスチャも用意した。

レンダリング

レンダリングパス画像が欲しかったのでBlenderで作業を行った。陰影なしのカラーのみのAOVパス画像と深度マップを出力する。深度マップの用途は後述。画像保存時にはガンマ変換などがかからないようにする。かかってもまあ何とかなるが。

(Unityなどを使い、このレンダリング工程と後続工程のSDF画像をシャープに戻す処理をシェーダーで対応しても良い。)

手違いで一つだけカメラの方向が違ってしまったが下記のようなレンダリング結果を得られた。左の2つをSDF化を解除して一番右の物と比較する。

シャープ化(SDFデコード)

トーンカーブを描ければSDF画像をシャープにできるので、何の画像編集ソフトでもよいのだが深度マップを用いた調整を行いたかったので、サブスタンスデザイナーを用いた。

色々試して結果の比較画像なども作っているのでノードグラフが散らかっているが、本当はノード2,3で事足りる。

このノードグラフと各種画像は後にgithubにアップしておいた。(3Dモデルは購入したものなのでblenderやsubstanceペインターのファイルは含められない。)

https://github.com/logicalmodelin/LGMLtools/tree/a1633e383971ad04a56c03b3b91fc377c17f525e/blog2023/blog20230916_sdf_texture2

処理の結果、以下のような画像が得られた。深度マップはまだ利用していない。

詳細の考察

下記画像はSDFではなく通常のテクスチャを使ってレンダリングした結果、ぼけてしまった部分を示すものである。青い部分は拡大のため、ピンクの部分はシームやトライプラナーの切れ目のため、緑の部分は縮小のため線がぼけている。

これに対してSDF画像をテクスチャとしてレンダリング後にシャープ化したものではそれらのボケ味が消えている。(線が若干太いのはシャープ化のやり方・トーンカーブの取り方による。)小さなテクスチャを用いても大写しに耐えるレンダリングが可能なことが分かった。被写界深度など、狙ったボケ味が必要なら後から与えればよい。

深度情報で線の太さを調整する

Blenderからは深度マップ(正確には減衰がリニアに設定されたmist)を出力しておいた。これを使って線の細さの調整を行う。テクスチャを使ったレンダリングでは手前の物が太く、奥のものが細く出力される。これは正しいのだが、イラストのようなレンダリング結果を得たい場合にはCG臭さの元となっていると考える。

SDF画像はパラメータの取り方によって線の位置や太さを調整できるのだから、深度の値とともに手前を細くするなり、奥を太くするなりすれば全体的にあまり線の太さが変わらく調整ができるはずである。というところで試行錯誤やってみたのが下記である。

比較で並べたもののと差分を取ったものも張っておく。

差分より、手前(上)に来るものが多く切り取られて細くなるのがわかる。

深度マップは一度キャリブレーションしてからトーンカーブでいい具合に線を強く細くしたい部分ほど白くなるように調整している。この辺は試行錯誤である。

後続のピクセルプロセッサーでは入力画像#0に埋め込まれた距離情報を入力画像#1の深度を加工した情報で調整している。直前に反転した画像をまたすぐ反転しているが、入力画像#1の効果が目で見てわかりやすいようにしたためである。

なお、もう一方の柄の例では、黒と白のエリアが半々ほどなので線幅が調整された感は得られない。処理としては正しく行えている。

下記は差分を取ったもの。表現としてかっこいいのでこれはこれで良いと思った。通常のSDFデコードではここまできれいにラインが出ないかもしれない。

感想

イラストに見えるレンダリングの研究をしているので、静止画で実験したが、この処理(深度による調整ふくめて)はリアルタイムでも問題なく動くはず。VJなどで面白いことができるかもしれない。いや、もうやってる人はいそうだ。

また、サブスタンスペインター用にSDFフィルタを作成してやれば、任意の(エッジにぼけみのない)マスクをSDFテクスチャ化してエクスポートできるので、便利だと思った。これはそのうちやりたい。

Previous post Substance Designer:スプラインスキャッターを使ったエフェクト作例
Next post .sbsarファイルは7z圧縮されていたので中身をいじってみた:Substance Designer