Tech on ながむしメモ

セルシェーディング顔陰用SDFテクスチャ合成の仕組み (SDF Based Transition Blending for Shadow Threshold Map)

Sat, 02 Mar 2024 14:07:04 +0900

誤ってページ削除してしまいましたが2024年の記事です

セルルックキャラクターの顔の陰制御に用いられるShadow Threshold Mapを生成する仕組みについて.
連番二値画像からSDFを利用してテクスチャ合成する基本部分の説明を試みます.

(Face Thresholdテクスチャ, Shadow Thresholdテクスチャ, SDFテクスチャなどとも)

SDFによる補間で Shadow Threshold Map を連番画像から自動生成するツール

をGitHubのSDFツールの中にUPしました.

EUW_GenerateShadowThresholdMap がツール自体.
現状は全画像が等間隔な閾値になります.

合成方法の説明などドキュメントは後で(∩´∀｀)∩https://t.co/6GdbEja9o3 #UE5 pic.twitter.com/52QUQek23i
— なが (@nagakagachi) 2023年12月5日

概要

UE5上のツールとしては以下のSDF関連ツールに含まれています.
ブラックボックス無しでBPとマテリアルとして実装しているので詳細はそちらをご確認ください.
github.com

アルゴリズム

ここでは最もシンプルと思われるC0連続な合成を考えます.
連番二値画像間の遷移速度をよりなめらかにしたい場合はC1連続となるように合成するのが良いかもしれません.

連番の連続する2枚ずつを処理していきます.

処理対象の連続するペア

連番のi番目とi+1番目の例

SDF生成

二値画像のSDFを計算.
内部側の距離も必要なのでSigned Distance Fieldである必要があります.

【UE5】Niagara SimulationStageでNormalMapからHeightMapを復元する(Poisson方程式)

Sat, 16 Dec 2023 16:11:44 +0900

Unreal Engine Advent Calendar 2023 の16日の記事です. Unreal Engine (UE)のカレンダー | Advent Calendar 2023 - Qiita

最近HoudiniでNormalMapからHeightMapを復元するというものを見かけ,
Poisson方程式を解くのであればSimulationStageで実装することができるのではと考えました.

というわけで、@TearsOfJake さんのアドバイスを元に、ポアソン方程式を用いたノーマルマップからハイトマップの復元。昨日の勾配のみの復元に比べて圧倒的に安定している。
左：入力メッシュ
中：入力メッシュから求めたノーマルマップ
右：ノーマルマップから復元した高さ情報 pic.twitter.com/NiNyVvvrbS
— Akira Saito (@a_saito) 2023年11月5日

この記事では「NormalMapからHeightMapを復元する」という問題をSimulationStageで実装する方法を紹介します.
サンプルプロジェクトは以下のGoogleDriveになります (動作確認バージョン UE5.3).
ReconstructHeightMapFromNormal.zip - Google ドライブ

Niagara SimulationStage

Niagara SimulationStage はComputeShader的なGPGPU処理をNiagaraモジュールとして作成できる仕組みです.
Epic Games公式のNiagara Fluids等でも多用されています(本当にSimulationStageでほとんどの処理が作られていますまじかよ).

SimulationStage は2D/3Dのグリッド構造に対するGPGPU処理を比較的簡単に作ることができるように設計されています.
これには数値シミュレーションで必要とされる反復実行なども含まれています.
目的のタスクを適切な形に変形してSimulationStageで実装することで, GPUによる高速な実行が可能になります.

NormalMapからHeightMapを復元する問題

Poisson方程式

ある関数の二階の空間微分と別の関数との関係式をPoisson方程式といいます.
Poisson方程式は離散化によって連立一次方程式へ変形することができ, 連立一次方程式を解く方法は様々に研究されています.
対象の問題をPoisson方程式, ひいては連立一次方程式の形にすることができれば, Solverや解法を利用して解くことができます.

$\Delta \phi =-\dfrac{\rho}{\epsilon_0}$

Poisson方程式への変形

今回は NormalMapとHeightMapの関係をPoisson方程式で表現して離散化, 連立一次方程式として解くことにします.

NormalMapのxy成分はHeightMapの空間微分(勾配)から求められます.
$N_x(x,y)= -\dfrac { \partial H(x,y)}{\partial x}$
$N_y(x,y)= -\dfrac { \partial H(x,y)}{\partial y}$
さらにそれぞれ x, y で偏微分します.

$\dfrac {\partial N_x(x,y)}{\partial x}= -\dfrac { \partial^2 H(x,y)}{\partial x^2}$

$\dfrac {\partial N_y(x,y)}{\partial y}= -\dfrac { \partial^2 H(x,y)}{\partial y^2}$
ここで上の式はPoisson方程式の形になっています.

差分方程式

このPoisson方程式を離散化すると以下のようになります.
(東海大学理学部遠藤研究室さんのページ等がわかりやすいです. -> 電磁場(SP) )

$\frac {N_x(x+h,y) - N_x(x-h,y)}{2h}= -\frac {H(x+h,y)+H(x-h,y) - 2H(x,y)}{h^2}$
$\frac {N_x(x,y+h) - N_x(x,y-h)}{2h}= -\frac {H(x,y+h)+H(x,y-h) - 2H(x,y)}{h^2}$
(左辺は中心差分)

2つの式を足して左辺のNormalMap, 右辺にHeightMapに関わる項をまとめて整理します.
またテクセルでの微分(差分)のため $$h = 1$$ とします.
$- \frac {N_x(x+1,y) - N_x(x-1,y) + N_x(x,y+1) - N_x(x,y-1)}{2} \\= H(x+1,y)+H(x-1,y) + H(x,y+1)+H(x,y-1) - 4H(x,y)$

上の式の左辺は入力NormalMapとして与えられる既知の値, 右辺は求めたいHeightMapのいくつかの地点の値に係数をかけたものの和です.
よってこれは左辺を定数 $$b$$ , 未知のHeightMapを $$x$$ , 近傍HeightMap値への係数を行列 $$A$$ とした連立一次方程式ということになります.
$$b = Ax$$

連立一次方程式を解くために更に変形していきます.

Jacobi法

見通しをよくするために左辺は記号で置き換えておきます.
$-N_{d} = H(x+1,y)+H(x-1,y) + H(x,y+1)+H(x,y-1) - 4H(x,y)$
(ここで $N_{d} =\frac {N_x(x+1,y) - N_x(x-1,y) + N_x(x,y+1) - N_x(x,y-1)}{2}$ )

$$H(x,y)$$ に関する形に変形します.

$H(x,y) = \frac{(H(x+1,y)+H(x-1,y)+H(x,y+1)+H(x,y-1)) + N_{d} }{4}$

この式を反復的に計算することで $$H(x,y)$$ を解に近づけていく方法をJacobi法といいます.
プログラム的に考えるとHeightMapの各テクセルについて上下左右の近傍値とNormalMapの値を使って更新しているといえます.
現在のHeightMapから次のHeightMapの各テクセルを並列に計算できるためGPGPUとも相性が良いです.
次はJacobi法によるHeightMapの計算をNiagara SimulationStageで実装します.

UE5 Geometry Script を利用した頂点単位リアルタイムアニメーション

Sun, 02 Oct 2022 19:41:37 +0900

Geometry Scriptの利用の一環で

入力メッシュの頂点インデックスをUV1に埋め込み、外部テクスチャに頂点座標をベイク
上記で生成したメッシュとテクスチャを利用してマテリアルで頂点単位バネアニメーション

というものを試してみました

realtime fake secondary motion (WIP.
position, rotation, and scale operations in editor mode.

Editorモードでの位置とスケールの操作プレビュー対応まで.

あとプルプルしすぎていたので更に調整.#UE5 pic.twitter.com/xgzYPtIGpw
— なが (@nagakagachi) 2022年8月21日

サンプル

レベルに配置されている BP_ControllerInEditorTick を動かすとプルプルします.
Playを実行すると物理で動くモデルがプルプルします.
github.com

構成

BP_GenerateMeshForPerVertexAnim
- 入力StaticMeshアセットから以下のようなアセットを生成する
  - UV1に頂点インデックスを埋め込んだStaticMesh
  - 頂点インデックスに対応したテクセルにローカル頂点座標をベイクしたテクスチャ
BP_PerVertexAnimationTest
- 上記で生成したMeshとテクスチャを利用して頂点単位バネシミュレーションをマテリアル(GPU)で計算する
BP_ControllerInEditorTick
- Editorモードのマニピュレータ操作でバネシミュをプレビューするためのコントローラ

導入

プロジェクトで Geometry Script プラグインを有効化

編集/プラグインエディタから Geometry Script のチェックボックスをONにする
必要ならEditorの再起動をする

PerVtxAnimWithGeometryScriptを取り込み

Windowエクスプローラ上などからプロジェクトのContentフォルダにサンプルの
PerVtxAnimWithGeometryScriptフォルダ
をコピー

生成用サンプルアクターをレベルに配置

BP_GenerateMeshForPerVertexAnim をレベルに配置

生成用サンプルアクターにアセットを設定

BP_GenerateMeshForPerVertexAnimアクターに変換元Mesh, 出力先Mesh & RenderTargetを設定
Sm Src Mesh に変換元のStaticMeshを設定, 図は同梱しているウシモデル(Spot)を設定している様子
Tex Bake Position Target にベイク情報を出力するRenderTargetを設定
Sm Bake Target に変換結果のMeshを出力するStaticMeshを設定

アセット生成

Geometry Scritpが駆動して Sm Bake Target と Tex Bake Position Target のアセットに生成物が保存される
Geometry Scritpはアクターのパラメータ変更等で駆動するため, 位置の変更や Enable Regenerate Mesh のONOFF等でトリガーされる

Sm Bake Target にはUV1に頂点インデックスを埋め込んだStaticMeshが出力される
Tex Bake Position Target には頂点インデックスに対応するテクセルに頂点座標がベイクされたテクスチャが出力される
これらのアセットを利用してリアルタイムに頂点単位アニメーションを実現する