UE5を使って、アニメキャラクターをレンダリングするというのは、日本の皆さんにとって非常に興味深い分野だと思います。
単純なセルシェーダー、トゥーンレンダリングなどについては過去にも色々と解説記事を書いてきました。
今回はこれらで解説した内容をベースにしてアニメ顔用の影、通称SDF Face Shadowマッピングについてを解説したいと思います。ちなみにこの名称に正式な名称はないようで、私の方で勝手につけた名称となりますので、同じ名前で調べても情報が出てこないかもしれませんのでご了承ください。
- そもそもSDFとは
- なぜSDF？
- SDFのテクスチャー作成
- モデルデータの準備
- ライトベクトルから影向きの取得
- SDFテクスチャーからアニメ顔用の影を取得
- ライトベクトルの結果とSDFテクスチャーの出力を合成
- 反映した結果
- まとめ
そもそもSDFとは
SDFは『Signed Distance Field』の略で日本語で呼ぶと"符号付き距離場"という意味になります。わかりやすく言えば、特定の空間の中に存在する物体からの距離を計算する手法です。つまり"Aという物体からどの程度の距離が離れているかを知る"ことが可能になるということです。
詳しい話はWeb上の記事にお任せします。
qiita.com
UE上でもDistance Fieldは『Mesh Distance Field』や『Raytrace Distance Field Shadow』などで使われていますが、こちらはあくまでも3次元上となっており、今回は2次元上の情報として扱います。SDF自体はフォント描画などでも使われていますが、ここでは割愛しておきます。
なぜSDF？
そもそもSDF Face Shadowマッピングは主に中国のゲーム、具体的に言えばmiHoYo社の『崩壊3rd』シリーズや『原神』などで使われ始めた技術のようです。調べてみても主に中国の情報サイトでその情報を拾うことができます。
それまではアニメ顔の影については『ギルティギア Xrd』などで使われていた、法線転写という技術を使うことである程度固定の影を出せる技術が確立されていました。しかし法線を編集するよりもテクスチャーマッピングを利用する方が処理負荷的にもメモリ的にも効率がよく、キャラごとの法線編集コストもないのでより安定した影を出せるんじゃないかというところから生まれたのではないかと勝手に予想をしています。
そこで効率の良い影を生成するためにSDFアルゴリズムを使って影情報を持った複数枚のテクスチャーから生成したテクスチャーをマスクに利用することで、固定したアニメ顔影を生成できるので、ライト角度ごとに閾値を持った影のマスクを作って顔にアニメキャラらしいルックを得られるということになります。
具体的な技術解説については中国のサイトではありますが、以下が参考になります。ただし中国語なので、ページ翻訳を使って読むなりしましょう。
zhuanlan.zhihu.com
SDFのテクスチャー作成
SDFのテクスチャーを作成するためには、ライトの角度によって180°、157.5°、135°、112.5°、90°、67.5°、45°、22.5°、顔の正面0°で合計9枚のマスク画像を使って作成します。顔メッシュUVに合わせて作成する必要がありますが、標準的な作り方であれば予め用意されたものを使うことも可能です。
今回は以下の動画内で配布されているSDFツールを使って、SDFのテクスチャーを用意します。
こちらの動画の概要欄にSDFツールのリンクがありますので、そちらからDLしてください。ツールをDLすると、展開フォルダー内にimagesがありますのでそちらにSDF用のテクスチャーが入っています。
本来180°用の画像も必要ですが、なくても画像自体は生成されるので、問題はありません。DL時点で"sdf.png""という画像が存在していますが自力で生成する場合、"run.bat"を実行することで同名のSDFファイルが生成されます。
生成されると以下のような画像になります。
これでSDFのFace Shadowマップ用テクスチャーが出来ました。このテクスチャーをライト角度によってマスクを変化させるようにシェーダーを組んでいきます。
モデルデータの準備
次にモデルデータを準備しておきます。基本的に何を使ってもよいですが、今回は特にアニメ顔のキャラクターを使う必要がありますので、『崩壊: スターレイル』のSilver Wolfこと銀狼というキャラクターを使ってみましょう。
銀狼を含むこれらのキャラクターモデルは公式からPMXデータとして配布されています。下記URL内にGoogle Driveへのリンクがあり、そちらからDLします。どのキャラクターを選ぶかは完全に趣味なので別のキャラでも問題ありません。
Honkai: Star Rail - Official MMD Models
※利用規約はしっかりと読んでおきましょう
2024/02/29 追記
上記リンクは公式ではないと指摘を受けましたので削除します。以下が正式に公式リンクに繋がっている日本語での説明付きURLとなりますので、DLしたい方はこちらからどうぞ。
www.hoyolab.com
PMXデータはそのままではUE5にインポートできませんので、VRM4Uというスーパープラグインを使ってPMXのインポートを行います。VRM4UとPMXデータのインポートについては直接解説しませんので、Web上の記事を参考に使ってください。
とりあえずインポートして、マテリアルを全て簡単なセルシェーダーと差し替えました。あくまでも簡易的なものなので、特にこれといったことはしていませんが、色味だけは調整しています。
© All rights reserved by miHoYo. Other properties belong to their respective owners.
UE5のトーンマッパーで色味がくすんで見える場合は以下の記事の設定を試しましょう。
モデルの準備ができたらいよいよマテリアル側の作成です。
ライトベクトルから影向きの取得
まずはライトの向きを取得して簡単なマスクを作れるようにしておきます。マスクについては記事の最初の方に紹介していますので、ここでは解説しませんがリンクを貼っておきます。
UE4 誰でもわかるセルシェーダー入門 - Let's Enjoy Unreal Engine
顔のマテリアルだけ違う処理を加えられるようにStatic Switchパラメーターノードで分岐できるようにしておきましょう。
次にライトベクトルから影向きを取得できるようにします。ここではアクターローカルのFowardベクトルとRightベクトルをWorld空間に変換したものと、Directinalライトのベクトルを内積（Dot）で計算した結果で保持するように組んでおきます。一部ベクトルは反転して扱っています。
これでライトベクトルから左右の影向きの取得ができるようになりました。
SDFテクスチャーからアニメ顔用の影を取得
作成したSDFテクスチャーがいよいよ出番になります。UVをTexCoordで取得して、Texture Sampleで左右反転したものを同時に使えるようにします。最終的に合成するので、Lerpで繋いでおきます。
同じテクスチャーを使う場合、Sampler Sourceを"Shared: Wrap"にしておくと、サンプリングするテクスチャーを共有できるので、無駄な処理を省けます。
これでSDFテクスチャーからアニメ顔用の影を取得できるようになりました。
次にRight（左右方向）ベクトルとDirectionalライトベクトルで内積した結果をStepノードで余分な情報を切り落しておきます。その情報をLerpに渡すことでライトベクトルに応じて左右の影を切り替えできるようにします。
これでライトの向きに応じてサンプルするテクスチャーの向きが切り替わるようになりました。これをマスクとして利用することになります。
ライトベクトルの結果とSDFテクスチャーの出力を合成
Forward（前後方向）ベクトルとDirecationalライトベクトルで内積した結果を"ConstantBiasScale"ノードでバイアスし、その結果を"Step"ノードのYへ渡します。XへはSDFテクスチャーがサンプルされたマスクを渡すことで綺麗なマスクに仕上げることができるようになります。
合成した結果最終的なマスクが出来上がります。
このマスクを使ってベースカラーやエミッシブカラーやサブサーフェスカラーに乗算することで綺麗なアニメ顔影を入れられるようになります。
最終的なアニメ顔影のマスクを作るノードの全体構成です。
反映した結果
最後にSDF Face Shadowマッピングによるアニメ顔影を反映していない状態のものとそうでないものの動画比較で見てみましょう！
まずはSDF Face Shadowマッピングによるアニメ顔影を反映していない状態。さすがに影が動くとちょっと怖い感じがします。
次にSDF Face Shadowマッピングによるアニメ顔影を反映している状態。綺麗なアニメ顔影になっています！
クオリティ的にはまだ影のトランジションなどもう少し綺麗にできると思いますが、最低限の実装としては十分なレベルです。
このテクスチャーは同じ顔UVを共通化してさえいればどのキャラクターにも使えます。アニメ顔は特に共通しているキャラも多いので、この辺りは使い回しがしやすいですね！
まとめ
日本ではまだまだSDF Face Shadowマッピングを使ったようなゲームは少ないですが、中国製のアニメ系ゲームではこの手法が主流ということもあり、まだまだ上手いやり方がありそうです。
この方式は影のライト計算も高速で、通常の影計算よりも軽量ということもあって、モバイルにも向いていますので、尚更ゲーム向けでしょう。最初のテクスチャー作成だけは手間がかかりますが、一度作ったものは流用可能なので、量産にも向いています。
ぜひアニメ系ゲームを作る人は参考にしてみてください。
銀狼ちゃん可愛いですね
