SDFを活用した低負荷なアニメ調のシェーディングをUE5で実装。alwei氏が解説記事を公開

2024年2月28日、Indie-us Games 代表兼クリエイター alwei氏は自身のブログにて「UE5 SDF Face Shadowマッピングでアニメ顔用の影を作ろう」と題した記事を公開しました。

UE5 SDF Face Shadowマッピングでアニメ顔用の影を作ろう – Let's Enjoy Unreal Engine #UE5 #UE5Study https://t.co/7DqBsU1yH1 pic.twitter.com/5J5Fgww4LX

— alwei (@aizen76) February 28, 2024

「SDF（Signed Distance Field）」とは、特定の物体からの距離を示した場であり、正規化されて画像などで表現されます。

記事では、同氏が「SDF Face Shadowマッピング」と称する、SDFを用いて3Dモデルの顔にアニメキャラクターのようなシェーディングを行う手法を紹介。同手法をUnreal Engine 5（以下、UE5）で実現する方法について解説しています。

SDF Face Shadowマッピングでは、事前に用意した、ライトと正面の角度が180°、157.5°、135°…0°に対応する影用マスク画像を使います。

左から157.5°、135°…0°に対応する影用マスク画像（画像はブログ記事より引用）

各画像にSDFを適用して合成することで、角度によってそれぞれのマスク画像が滑らかに補完される1つのマスク画像が生成されます。

生成されたマスク画像（画像はブログ記事より引用）

同記事では、マスク画像の生成に下記動画で配布されている「sdf_tool」を使っています。

UE5では、同氏によるUE4向け記事『UE4 誰でもわかるセルシェーダー入門』を参考に、ライトとの角度によってマスクが変化するマテリアルを作成します。

ライトの向きを取得する仕組みの実装（画像はブログ記事より引用）

ライトの向きと生成後のマスク画像に基づいて影を描画することで、顔にアニメ調の影をかけることができます。

マスク画像の反映なし（左）と反映あり（右）の比較。モデルは『崩壊：スターレイル』公式から配布されている銀狼の3Dモデル（画像はブログ記事より引用）
© All rights reserved by miHoYo. Other properties belong to their respective owners.

alwei氏によると、SDF Face Shadowマッピングは、従来の法線転写（※）に比べて処理負荷やメモリの面で効率がよく、モバイル環境にも向いているとのこと。また、マスク画像は顔が共通のUVをもつキャラクター間で使い回せる利点もあります。
※　3Dモデルの法線情報を、別の3Dモデルの法線情報で上書きする手法

詳細は、こちらをご確認ください。