2023年2月現在最新のVAT3.0の使用方法については以下の記事をご覧ください。
はじめに
この記事では、Houdiniから出力したVAT(Vertex Animation Texture)ファイル群をTouchDesignerで読み込み、再生する方法を解説します。
HoudiniのLabs Vertex Animation Textureノードには、Unreal EngineやUnityなど、ゲームエンジン向けに設定のプリセットが用意されていますが、今回はTouchDesigner側のアニメーション再生機能の実装ができるだけシンプルになるように、手動でパラメーターの設定を行い、書き出し作業を行います。
そのため、他のゲームエンジン用に書き出されたVATファイルをそのまま読み込んだり、本記事を元に作成したVATファイルを他の開発環境で読み込んでも、正しく動作しません。
なおTouchDesignerのVertex Shaderの実装方法は、Houdiniから書き出されたUE4のMaterial Blueprintを参考にしています。
検証環境
- Windows 10 Pro 1909
- TouchDesigner 2020.27390 (Commercial License)
- Houdini Indie 18.5.408
- SideFX Labsインストール済み( https://www.sidefx.com/ja/products/sidefx-labs/sidefx-labs-tools/ )
サンプルプロジェクト
以下のURLからダウンロードしてください。
https://drive.google.com/file/d/1kchKxh3PpYGo8r71aJLTNSbax0fvW5IX/view?usp=sharing
実装
HoudiniのLabs Vertex Animation TexturesノードのMethodの設定によって、書き出されるファイルやデータが変わるので、TouchDesigner側の実装方法も変わってきます。
Houdini 18.5では、以下の4つのMethodが使用できます。
| Method | 解説 |
|---|---|
| Soft (Constant Topology) | キャラクターアニメーションなど、各頂点の位置は変わるが頂点数は変わらず、エッジやプリミティブの構成も変化しないアニメーションを書き出す際に選択 |
| Rigid (Rigid Body Topology) | 破砕アニメーションなど、変形しない複数のピースのアニメーションを書き出す際に選択 |
| Fluid (Changing Topology) | 流体アニメーションなど、頂点の位置も頂点数も変わるアニメーションを書き出す際に選択 |
| Sprite (Camera Facing Cards) | パーティクルアニメーションなどを書き出す際に選択 |
以下、Soft, Rigid, FluidのMethodごとに、書き出し設定とTouchDesignerでの実装方法を解説していきます。
Soft (Constant Topology)
Houdiniでアニメーション作成
人間の3Dモデルにmixamoでループする歩行アニメーションをつけました。
フレームによってポイントの色も変化させています。
Houdiniから書き出し
outにLabs vertex Animation Texturesノードを作成します。
パラメーター設定
-
User interface - Normalを設定 -
Start/Endにアニメーションの開始フレーム、終了フレームを設定 -
MethodをSoft (Constant Topology)に設定 -
SOP Pathで書き出したいSOPを選択 -
Frame Rangeにアニメーションのフレーム数を設定 -
Normalize data range to 0-1 spaceをオフにする - 必要であれば、
Target Texture Sizeを任意のサイズに変更 -
Paths/Normalのチェックボックスをオンにする - SOPが色情報を持っている場合、
Paths/Colorのチェックボックスをオンにする -
Settings/Position CoordをXYZ,+X +Y +Zに変更する -
Scaleを1に設定する -
Renderを押して書き出し
書き出されたファイル群の解説
以下のファイルが出力されます。
Paths/Project, Paths/Componentにチェックを入れ、任意のパスとファイル名で書き出すこともできます。
| ファイル名 | 解説 |
|---|---|
| [Project]/meshes/[Component]_mesh.fbx | VATテクスチャ参照用のUVが追加されたFBX |
| [Project]/textures/[Component]_pos.exr | 最初のフレームからの頂点位置の変化量を格納したテクスチャ |
| [Project]/textures/[Component]_norm.exr | 各フレームでの法線を格納したテクスチャ |
| [Project]/textures/[Component]_col.exr | 各フレームでの色情報のテクスチャ |
| [Project]/materials/[Component]_data.json | アニメーション再生時に使用する、各種パラメーターのJson |
また、書き出されたFBXには、以下の頂点アトリビュートが追加されています
| SOPアトリビュート名 | GLSLアトリビュート名 | 解説 |
|---|---|---|
| uv(3), uv(4) | UV[1].xy | VATテクスチャ座標 |
TouchDesignerでアニメーション再生機能の実装
書き出されたFBXとテクスチャを読み込み、マテリアルを作成します。
サンプルプロジェクト内のVAT_Soft_Simpleでは、Phong MATのVertex Shaderに、アニメーション再生機能を追加しました。
Uniform変数numOfFramesには、HoudiniのLabs vertex Animation TexturesノードのFrame Rangeの値を渡します。
// Phong_VAT_Soft
uniform vec4 uDiffuseColor;
uniform vec4 uAmbientColor;
uniform vec3 uSpecularColor;
uniform float uShininess;
uniform float uShadowStrength;
uniform vec3 uShadowColor;
// 頂点位置の変化量テクスチャ
uniform sampler2D VAT_Pos;
// 法線のテクスチャ
uniform sampler2D VAT_Norm;
// 色のテクスチャ
uniform sampler2D VAT_Col;
// アニメーションの時間(0-1)
uniform float time;
// アニメーションの総フレーム数
uniform int numOfFrames;
out Vertex
{
vec4 color;
vec3 worldSpacePos;
vec3 worldSpaceNorm;
flat int cameraIndex;
} oVert;
void main()
{
// 現在のフレームを計算
float frame = clamp(time, 0.0, 0.99999) * numOfFrames;
// VATテクスチャ読み込み用のUVを作成
float u = uv[1].x;
float v = uv[1].y - (floor(frame) / numOfFrames);
vec2 UV = vec2(u, v);
// 頂点の位置の変化量を読み込み、初期位置に加算
vec3 newPos = P + texture(VAT_Pos, UV).xyz;
// 色を読み込み
vec4 newCol = texture(VAT_Col, UV);
// 法線を読み込み
vec3 newNorm = texture(VAT_Norm, UV).xyz;
// Positionを設定
vec4 worldSpacePos = TDDeform(newPos);
vec3 uvUnwrapCoord = TDInstanceTexCoord(TDUVUnwrapCoord());
gl_Position = TDWorldToProj(worldSpacePos, uvUnwrapCoord);
#ifndef TD_PICKING_ACTIVE
int cameraIndex = TDCameraIndex();
oVert.cameraIndex = cameraIndex;
oVert.worldSpacePos.xyz = worldSpacePos.xyz;
// 色を設定
oVert.color = TDInstanceColor(newCol);
// 法線を設定
vec3 worldSpaceNorm = normalize(TDDeformNorm(newNorm));
oVert.worldSpaceNorm.xyz = worldSpaceNorm;
#else // TD_PICKING_ACTIVE
TDWritePickingValues();
#endif // TD_PICKING_ACTIVE
}
実行結果
Rigid (Rigid Body Topology)
Houdiniでアニメーション作成
Rigid Bodiesシェルフ内のRBD Fractured Objectをもとにして、Voronoi Fractureで分割したSOPから破砕アニメーションを作成しました。
Houdiniから書き出し
パラメーター設定
-
User interface - Normalを設定 -
Start/Endにアニメーションの開始フレーム、終了フレームを設定 -
MethodをRigid (Rigid Body Topology)に設定 -
SOP Pathで書き出したいSOPを選択 -
Frame Rangeにアニメーションのフレーム数を設定 -
Normalize data range to 0-1 spaceをオフにする - 必要であれば、
Target Texture Sizeを任意のサイズに変更 - SOPが色情報を持っている場合、
Paths/Colorをオンにする -
Settings/Position CoordをXYZ,+X +Y +Zに変更する -
Settings/Rotation Coordを+X+Y+Z+Wに変更する -
Scaleを1に設定する -
Renderを押して書き出し
書き出されたファイル群の解説
以下のファイルが出力されます
| ファイル名 | 解説 |
|---|---|
| [Project]/meshes/[Component]_mesh.fbx | ピースごとの中心点を格納したCdアトリビュート, VATテクスチャ参照用のUVアトリビュートが追加されたFBX |
| [Project]/textures/[Component]_pos.exr | 中心点の位置を格納したテクスチャ |
| [Project]/textures/[Component]_rot.exr | 中心点の回転(クォータニオン)を格納したテクスチャ |
| [Project]/textures/[Component]_col.exr | 色情報のテクスチャ |
| [Project]/materials/[Component]_data.json | アニメーション再生時に使用する、各種パラメーターのJson |
書き出されたFBXには、以下の頂点アトリビュートが追加されています
| SOPアトリビュート名 | GLSLアトリビュート名 | 解説 |
|---|---|---|
| Cd(0), Cd(1), Cd(2) | Cd.xyz | ピースごとの中心点の初期位置 |
| uv(3), uv(4) | UV[1].xy | VATテクスチャ座標 |
TouchDesignerでアニメーション再生機能の実装
サンプルプロジェクト内のVAT_Rigidを参照してください。
注意点としては、Houdiniからの書き出し時にNormalize data range to 0-1 spaceをオフにしていても、FBXのCdアトリビュートに含まれるピースの中心点の位置情報は0-1に正規化されてしまうため、HoudiniのVATノードのPivot Min / Maxの値をUniform変数で渡し、シェーダー内で初期フレームの中心点を計算する必要があります。
// Phong_VAT_Rigid
uniform vec4 uDiffuseColor;
uniform vec4 uAmbientColor;
uniform vec3 uSpecularColor;
uniform float uShininess;
uniform float uShadowStrength;
uniform vec3 uShadowColor;
// ピースの中心点の位置情報テクスチャ
uniform sampler2D VAT_Pos;
// 回転情報のテクスチャ
uniform sampler2D VAT_Rot;
// 色のテクスチャ
uniform sampler2D VAT_Col;
// アニメーションの時間(0-1)
uniform float time;
// アニメーションの総フレーム数
uniform int numOfFrames;
// 中心点の最小値
uniform float pivot_Min;
// 中心点の最大値
uniform float pivot_Max;
out Vertex
{
vec4 color;
vec3 worldSpacePos;
vec3 worldSpaceNorm;
flat int cameraIndex;
} oVert;
// ベクトルをクォータニオンで回転
vec3 rotateVectorByQuatenion(vec3 v, vec4 quat) {
vec3 c1 = cross(quat.xyz, v.xyz);
vec3 m1 = v.xyz * quat.w;
vec3 a1 = c1 + m1;
vec3 c2 = cross(quat.xyz, a1);
vec3 m2 = c2 * 2.0;
return m2;
}
void main()
{
// 現在のフレームを計算
float frame = clamp(time, 0.0, 0.99999) * numOfFrames;
// VATテクスチャ読み込み用のUVを作成
float u = uv[1].x;
float v = uv[1].y - (floor(frame) / numOfFrames);
vec2 UV = vec2(u, v);
// 初期フレームでの中心点を計算
vec3 pivot = Cd.rgb;
pivot *= (pivot_Max - pivot_Min);
pivot += pivot_Min;
// テクスチャからデータを取得
vec3 pivot_Pos = texture(VAT_Pos, UV).xyz;
vec4 pivot_Rot = texture(VAT_Rot, UV).xyzw;
vec4 color = texture(VAT_Col, UV);
// 現在のフレームの中心点の移動を反映した、頂点の位置を計算
vec3 newP = P - pivot;
newP = rotateVectorByQuatenion(newP, pivot_Rot);
newP -= pivot;
newP += pivot_Pos;
newP += P;
// 法線を回転させる
vec3 newN = rotateVectorByQuatenion(N, pivot_Rot) + N;
// Positionを設定
vec4 worldSpacePos = TDDeform(newP);
vec3 uvUnwrapCoord = TDInstanceTexCoord(TDUVUnwrapCoord());
gl_Position = TDWorldToProj(worldSpacePos, uvUnwrapCoord);
#ifndef TD_PICKING_ACTIVE
int cameraIndex = TDCameraIndex();
oVert.cameraIndex = cameraIndex;
oVert.worldSpacePos.xyz = worldSpacePos.xyz;
// 色を設定
oVert.color = TDInstanceColor(color);
// 法線を設定
vec3 worldSpaceNorm = normalize(TDDeformNorm(newN));
oVert.worldSpaceNorm.xyz = worldSpaceNorm;
#else // TD_PICKING_ACTIVE
TDWritePickingValues();
#endif // TD_PICKING_ACTIVE
}
実行結果
Fluid (Changing Topology)
Houdiniでアニメーション作成
流体シミュレーションをFLIPで作成しました。
Houdiniから書き出し
パラメーター設定
-
User interface - Normalを設定 -
Start/Endにアニメーションの開始フレーム、終了フレームを設定 -
MethodをFluid (Changing Topology)に設定 -
SOP Pathで書き出したいSOPを選択 -
Frame Rangeにアニメーションのフレーム数を設定 -
Normalize data range to 0-1 spaceをオフにする -
Packed normal into Position Alphaのチェックボックスをオフにする - 必要であれば、
Target Texture Sizeを任意のサイズに変更 -
Target Prim Countにプリミティブの最大数を設定 -
Paths/Normalのチェックボックスをオンにする - SOPが色情報を持っている場合、
Paths/Colorのチェックボックスをオンにする -
Settings/Position CoordをXYZ,+X +Y +Zに変更する -
Renderを押して書き出し
書き出されたファイル群の解説
以下のファイルが出力されます
| ファイル名 | 解説 |
|---|---|
| [Project]/meshes/[Component]_mesh.fbx | VATテクスチャ参照用のUVが追加されたFBX |
| [Project]/textures/[Component]_pos.exr | 頂点の位置を格納したテクスチャ |
| [Project]/textures/[Component]_norm.exr | 法線を格納したテクスチャ |
| [Project]/textures/[Component]_col.exr | 色情報のテクスチャ |
| [Project]/materials/[Component]_data.json | アニメーション再生時に使用する、各種パラメーターのJson |
書き出されたFBXには、以下の頂点アトリビュートが追加されています
| SOPアトリビュート名 | GLSLアトリビュート名 | 解説 |
|---|---|---|
| uv(0), uv(1) | UV[0].xy | VATテクスチャ座標 |
TouchDesignerでアニメーション再生機能の実装
サンプルプロジェクト内のVAT_Fluidを参照してください。
Softの時と大体同じですが、VATテクスチャの参照に使うUVが、uv[1]ではなくuv[0]になっています。
(なお、サンプルではHoudiniから色情報を書き出してはおらず、Vertex Shader内で単色を設定しています)
// Phong_VAT_Fluid
uniform vec4 uDiffuseColor;
uniform vec4 uAmbientColor;
uniform vec3 uSpecularColor;
uniform float uShininess;
uniform float uShadowStrength;
uniform vec3 uShadowColor;
// 頂点位置の変化量テクスチャ
uniform sampler2D VAT_Pos;
// 法線のテクスチャ
uniform sampler2D VAT_Norm;
// アニメーションの時間(0-1)
uniform float time;
// アニメーションの総フレーム数
uniform int numOfFrames;
out Vertex
{
vec4 color;
vec3 worldSpacePos;
vec3 worldSpaceNorm;
flat int cameraIndex;
} oVert;
void main()
{
// 現在のフレームを計算
float frame = clamp(time, 0.0, 0.99999) * numOfFrames;
// VATテクスチャ読み込み用のUVを作成
float u = uv[0].x;
float v = uv[0].y - (floor(frame) / numOfFrames);
vec2 UV = vec2(u, v);
// 頂点の位置を読み込み
vec3 newPos = texture(VAT_Pos, UV).xyz;
// 法線を読み込み
vec3 newNorm = texture(VAT_Norm, UV).xyz;
// Positionを設定
vec4 worldSpacePos = TDDeform(newPos);
vec3 uvUnwrapCoord = TDInstanceTexCoord(TDUVUnwrapCoord());
gl_Position = TDWorldToProj(worldSpacePos, uvUnwrapCoord);
#ifndef TD_PICKING_ACTIVE
int cameraIndex = TDCameraIndex();
oVert.cameraIndex = cameraIndex;
oVert.worldSpacePos.xyz = worldSpacePos.xyz;
oVert.color = TDInstanceColor(vec4(0.5, 0.75, 1.0, 1.0));
// 法線を設定
vec3 worldSpaceNorm = normalize(TDDeformNorm(newNorm));
oVert.worldSpaceNorm.xyz = worldSpaceNorm;
#else // TD_PICKING_ACTIVE
TDWritePickingValues();
#endif // TD_PICKING_ACTIVE
}
実行結果
おわりに
後日、応用編を書く予定です。
- 法線マップを使用するための方法(Tangentアトリビュートを作成する方法)
- 破砕シミュレーション以外のRigidの使い方
- テクスチャのサイズを減らす方法(法線情報をPositionのアルファに書き込み、TD側で読み出す方法)
- Fluidのアニメーションをきれいにする方法
などのトピックを考えています。