【CEDEC2025】HoudiniによるUI作成について

自己紹介 2 2005年ナムコ(現バンダイナムコスタジオ)入社主に関わったタイトルは・ACE COMBAT 6 解放への戦火・ACE COMBAT
ASSAULT HORIZON ・テイルズオブカードエボルブ・アイドルマスターミリオンライブ！・ポッ拳・New ポケモンスナップなど 2007年バンダイナムコゲームス(現バンダイナムコスタジオ)入社主に関わったタイトルは・ACE COMBAT 5 THE UNSUNG WAR ・ACE COMBAT 6 解放への戦火・ACE COMBAT ASSAULT HORIZON ・ACE COMBAT INFINITY ・ACE COMBAT 7 SKIES UNKNOWN など講師関連記事 Monotype社共同オンラインセミナー第2回「ゲームのためのタイポグラフィ」バンダイナムコスタジオリードUIアーティスト三品幸彦 × 欧文書体デザイナー大曲都市 https://www.youtube.com/watch?v=mmDPWk_PEy0 CGWORLD.JP『エースコンバット7 スカイズ・アンノウン』～作中世界の"OS"を表現するGUI ～ https://cgworld.jp/feature/201908-gg2019-ace7.html 過去の講演としては・CEDEC2011 ACE COMBAT ASSAULT HORIZONにおける継続的インテグレーション・CEDEC2011 「エースコンバットアサルト・ホライゾン」インゲームカメラ制作事例・CEDEC2015 ポッ拳におけるゲームエディタの設計と実装・CEDEC2019 家庭用ゲーム開発におけるゲームエディタの基礎設計と、安定かつ高速なアセット管理について・CEDEC2019 DirectX Raytracingを用いたライトベイカーの実装について・CEDEC2021 『New ポケモンスナップ』におけるライティング・CEDEC2022 MaterialXとStandard Surfaceのゲームグラフィックスへの応用について・CEDEC2023 DCCツールを用いた広色域テクスチャワークフロー・CEDEC2024 USDのゲームアセットへの応用についてなど

• 概要 • UI作成例 • ワークフロー • Houdini • ゲームランタイム
• まとめ 3 目次

HoudiniをUI制作に使おうとしたきっかけ「エクセルから読み込んだテキストにさまざまな加工がしたい」 5

HoudiniをUI制作に使おうとしたきっかけ「エクセルから読み込んだテキストにさまざまな加工がしたい！」 6

7 HoudiniをUI制作に使おうとしたきっかけ

作るもの • 3つの画面を遷移するUI • タイトル画面 • メニュー画面 • HUD画面 8

作るものタイトル画面 • 要素は3つ • ロゴ • テキスト • ボタン
9

作るものタイトル画面 • ロゴ • テキスト • ボタン 10

タイトル画面ロゴ 11 Adobe Illustrator パスデータ作成 .ai もしくは .eps Illustrator
8形式で保存

Houdiniワークスペース 12 シーンビューパラメータエディタプレイバーネットワークエディタ SOP ネットワーク
エディタ LOP

Houdiniワークスペース 13 ネットワークエディタ SOP ネットワークエディタ LOP １ 2

14 Houdini（SOP） [titleLogo] ロゴ用ジオメトリ [titleText] テキスト用ジオメトリ [titleGround] ボタン用ジオメトリタイトル画面ロゴ
SOP

タイトル画面ロゴ 15 Houdini（SOP） [file] .epsをインポート [group] pointsをグループ化 [color] 色を設定
[polyextrude] 押し出しで立体化 [divide] ポリゴンを三角形化 [Null] 出力名を設定

タイトル画面 21 • ロゴ • テキスト • ボタン

22 Houdini（SOP） [titleLogo] ロゴ用ジオメトリ [titleText] テキスト用ジオメトリ [titleGround] ボタン用ジオメトリタイトル画面テキスト
SOP

タイトル画面テキスト 23 Houdini（SOP） [font] フォント/テキスト設定 [AttributeWrangle] エクスプレッションで逆向きを検出 [split] 2つのストリームに分岐
[reverse] 頂点順を逆転 [boolean] 2つのオブジェクトを合成 [AttributeExpression] 色と不透明度を設定 [polyextrude] 押し出しで立体化 [divide] ポリゴンを三角形化 [Null] 出力名を設定

タイトル画面 32 • ロゴ • テキスト • ボタン

タイトル画面ボタン 33 Houdini（SOP） [titleLogo] ロゴ用ジオメトリ [titleText] テキスト用ジオメトリ [titleGround] ボタン用ジオメトリ
SOP

タイトル画面ボタン 34 Houdini（SOP） [grid] 四角い平面を作成 [mountain] 凸凹を作成 [polywire] ワイヤーをポリゴン化
[divide] ポリゴンを三角形化 [UIcolor] マウス OFF [UIcolor] マウス ON [UIcolor] ヒットエリア [Null] 出力名を設定

タイトル画面ボタン 41 Houdini（SOP） [titleLogo] ロゴ用ジオメトリ [titleText] テキスト用ジオメトリ [titleGround] ボタン用ジオメトリ

42 ネットワークエディタ SOP ネットワークエディタ LOP

タイトル画面 LOP 43 ロゴテキストボタン SOP LOP

タイトル画面 LOP 44 SOP_import

タイトル画面 LOP 45 transform

タイトル画面 LOP 50 material_library

タイトル画面 LOP 51 standard_surface

タイトル画面 LOP 53 material_library

タイトル画面 LOP 54 standard_surface

タイトル画面 LOP 56 Configure primitive

タイトル画面 LOP 57 Add Variant

タイトル画面 LOP 58 merge

タイトル画面 LOP 59 Camera

タイトル画面 LOP 60 Configure primitive

タイトル画面 LOP 61 usd_rop

タイトル画面プレビュー 62

USDプレビュー 63 • プレビューツール • usdview • 内製プレビューツール

USDプレビュー 64 usdview USD シーンを表示および検査するためのコマンドラインユーティリティ

USDプレビュー 65 内製プレビューツールマウスイベントや別USDへの表示切替などに対応これにより画面遷移の表示が可能。

メニュー画面 66

メニュー画面 67 ネットワークエディタ SOP ネットワークエディタ LOP

メニュー画面 SOP 69 Grid

メニュー画面 SOP 70 polybevel

メニュー画面 SOP 71 polybevel

メニュー画面 SOP 72

メニュー画面 SOP 73 merge

メニュー画面 SOP 74 circle

メニュー画面 SOP 75 transform

メニュー画面 SOP 76 sweep

メニュー画面 SOP 78 tableimport

メニュー画面 SOP 79 font

メニュー画面 SOP 80 transform

メニュー画面 SOP 81 groupexpression

メニュー画面 SOP 82 font

メニュー画面 SOP 83 copytopoints

メニュー画面 SOP 85 AttributeVOP foreach

メニュー画面 SOP 86 UIsopOutput

メニュー画面 LOP 88 SOP_import

メニュー画面 LOP 89 ネットワークエディタ LOP

メニュー画面 LOP 90 SOP_create

メニュー画面 LOP 91

メニュー画面 LOP 92 configure primitive

メニュー画面 LOP 93 usd_rop

メニュー画面 LOP 94 reference

メニュー画面 LOP 95 transform

メニュー画面 LOP 99 camera 1 95 96 106 158 168

メニュー画面 LOP 100 configure layer

メニュー画面 LOP 101 usd rop

USDプレビュー 102

HUD画面 103

HUD 104 Anchor LOP Crosshair Ammo HPgauge

HUD LOP 105

HUD LOP 106 LOP SOP SOP import

HUD LOP 107

HUD LOP 108 configure primitive

HUD LOP 109

HUD LOP 110 configure primitive

HUD LOP 111 0 1 2 3 4 5 6
7 8 9

HUD LOP 112 0 30 31 70 71 100

HUD LOP 113

HUD LOP 114

目次 • 概要 • UI作成例 • ワークフロー • Houdini •
ゲームランタイム • まとめ 117

全体ワークフロー 1. HoudiniでUIのメッシュやレイアウト、マテリアルを作成し、USD に出力する 2. アセットコンバーターがUSDを独自バイナリファイルに変換する 3. ゲームランタイムが独自バイナリファイルを使って描画する 118 ゲームランタイム
Houdini USD アセットコンバーター

Houdiniワークフロー • SOPでメッシュを作成し、LOPでレイアウトとマテリアルを作成して、 USDを出力する 119 SOP LOP USD

SOP • SOPではUIのメッシュを作成する • 主な使用ノードはCircle、Grid、Polywire、Fontなど 120

LOP • LOPではレイアウトとマテリアル作成、USD出力を行う • 今回のワークフローではUSDを使用するため、SOPではなくLOPでレイアウトを行うことにした 121 マテリアル作成レイアウト USD出力

SOPとLOPの違い • LOPはUSDのために設計されており、ノードでUSDを作成することが出来る • Scene Graph PathウィンドウにUSDが表示されているので、データデバッグがしやすい 122
Scene Graph Pathウィンドウ

SOP Import • SOP Importノードを使ってメッシュをインポートする • SOP Pathで指定するため、各SOPメッシュの終端にはNullノードを接続している →SOPでノードを追加、削除した時にSOP
Pathを変更しなくても済む 123 SOP Importノード SOP Path Nullノード SOP LOP

他のUSDを参照する • メッシュはSOP Importだけではなく、別のHIPから出力したUSDを Asset Referenceノードで参照する事も出来る • UIパーツごとに担当アーティストを分ける時に使用する 124 UIメッシュ用HIPファイル
(Crosshair.hip) レイアウト用HIPファイル Asset Referenceノード (Crosshair.usdを参照) USD ROPノード (Crosshair.usdを出力) Crosshair.usdのメッシュが表示されている

レイアウト • Transformノードでメッシュを配置してレイアウトを行う 125 Transformノード座標やスケール値

単位 • 一部HIPではHoudiniの1を1ピクセルとする単位でSOPのメッシュ作成とレイアウトを行い、USD出力する直前のHDAでゲーム中の単位(1を1メートル)に変換している →UIアーティストはピクセル単位でUIを作成することがあるため 126 グリッドの数値がピクセル数となっている座標系を変換するHDA (仮想の解像度を決めて、TransformノードでScaleを掛ける)

ゲーム用カメラ • カメラノードを配置することで、カメラ情報をUSDに設定出来る • ゲーム中のメインメニューなどで使用するカメラを、UIアーティストが設定することが出来る 127 カメラノードゲームランタイムでのカメラ反映

USD Custom Data • UI描画にはメッシュ形状やレイアウト以外にも様々な情報が必要となる • USDのスキーマに存在しない情報はUSDのCustom Dataに書き込む • 主にConfigure
Primitiveノード使ってCustom Dataを設定する (Custom Dataは文字列の他、jsonを設定することもある) 128 Configure Primitiveノード Custom Dataが設定されている usdview

アンカー • 可変解像度対応のため、ゲームランタイムはアンカー機能に対応している • Custom Dataにアンカー名を設定し、ゲームランタイムがアンカー名を使って描画する 129 Custom Data
Name = Anchor (アンカーを使用する) Custom Data Value = AnchorBottomRight (右下のアンカー基準点を使用) Configure Primitiveノード右下に表示する数字UI

アンカー基準 • LOPに置かれたアンカー基準用の球をUSDに出力し、アセットコンバーター内部でメッシュをアンカー相対座標に変換する 130 アンカー基準用Sphereノードアンカーは8方向アンカー基準球

ゲームランタイムでのアンカー処理 • ゲームランタイムがアンカー基準点相対でメッシュを描画する 131 アンカー名に右下のアンカー基準が設定されている場合アンカー基準点(デバッグ表示) 数字UIが右下のアンカー基準相対で表示されている解像度、アスペクト比変更

ブレンドモード • Custom Dataに半透明や加算といったブレンドモードを設定する →ランタイムがブレンドモードを読み取り、描画する 132 半透明加算 Configure Primitiveノードの設定
Custom Data Name = Blend(ブレンドモード設定) Custom Data Value = Add(加算ブレンド)

描画パス • Custom Dataに3Dや2Dといった描画パスを設定する →ランタイムが描画パスを読み取り、描画する • 3D描画パスにすると、キャラクターや背景と同じ描画パスとなるので、 UIが背景の後ろに隠れたり、背景に置かれたライトの影響を受ける 133 Custom
Data Name = RenderPass(描画パス設定) Custom Data Value = 3D(3D描画パスを使用) Configure Primitiveノード

アニメーション • アニメーションはフレームアニメーションを使用している • Houdiniで各フレームに異なるメッシュを作成し、ゲームランタイムがフレーム番号を指定してUIを表示する 134 フレーム30 フレーム1 フレーム60

アニメーション作成 • ノードのプロパティにキーフレームを設定したり、$Fなどの Expressionを使ってアニメーションを作成する • ループ指定などのアニメーション制御設定はLOPで行う(後述) 135 Uniform Scaleにキーフレームを設定している Transformノード

アニメーション • USDはフレームアニメーションに対応しているので、Houdiniから全フレームのデータをUSDに書き込んでいる (USDのtime varying dataを使用) • ゲーム用カメラ情報もアニメーションに対応している 136
フレーム1 メッシュフレーム2 メッシュフレーム3 メッシュ USD Houdini https://openusd.org/release/tut_xforms.html フレーム1 カメラフレーム2 カメラフレーム3 カメラ

アニメーションフレーム制御 • Custom Dataにアニメーションフレーム制御情報を設定し、ゲームランタイムがアニメーションフレームを制御する • 制御情報はAdobe Animate(旧Macromedia Flash)の ActionScriptを参考に実装している
(GoToAndPlayの他、GoToAndStopやStopなどが設定出来る) 137 Custom Data Name = GoToAndPlay_Menu_btn3_10 (Menu.usdのbtn3メッシュの10フレーム目に到達したらGoToAndPlayを実行) Custom Data Value = Menu_btn3_1 (Menu.usdのbtn3メッシュの1フレーム目から再生する) Configure Primitiveノード

アニメーション具体例(ループアニメーション) • 例:UIの240フレーム目を再生したら0フレーム目から再生し直す 138 ループアニメーションしている様子 Configure Primitiveノードの設定 Custom Data Name
= GoToAndPlay_camera_240(cameraが240フレーム目に到達したらGoToAndPlayを実行) Custom Data Value = 0(0フレーム目から再生する)

アニメーションブックマーク • Custom Dataにはフレーム番号だけでなくフレームラベル名を記載出来るようにしている • フレームラベル名の設定はHoudiniのアニメーションブックマーク機能を使用する • アニメーションブックマークは、そのままではUSDには出力されないため、Python スクリプトノードを使ってフレーム名をCustom
Dataに設定している 139 アニメーションブックマークをUSDに設定するHDA アニメーションブックマーク

ボタン処理 • ボタンの処理をCustom Dataに設定すると、メッシュはボタンとして機能する • Custom Data Nameにはマウスをクリックした時の他、マウスカーソルがメッシュに重なった時、マウスカーソルがメッシュから離れた時などが設定できる 140
Configure Primitiveノードの設定例 Custom Data Name = MouseEnter_btn3 (btn3メッシュにマウスカーソルが重なった時) Custom Data Value = btn3_13 (btn3メッシュを13フレーム目から再生する) マウスカーソルがbtn3メッシュに重なるとフレームアニメーションによって点滅する

ボタン例(画面遷移) • Custom DataにUSD名を記載すると、ゲームランタイムはボタンメッシュ上でクリックされた時に、 Custom Dataで記載されたUI に遷移する 141 Configure
Primitiveノードの設定例 Custom Data Name = MouseDown_btn1 (btn1メッシュをマウスクリックした時) Custom Data Value = GoToAndPlay_Title_camera1_1 (Title.usdに遷移し、camera1を1フレーム目から再生する) QUITと書かれているbtn1メッシュをクリックすると、別のUSDに遷移している

ボタン例(カメラ変更) • Custom Dataにはメッシュ名だけでなくカメラ名も設定出来る • マウスクリックによってカメラを変更するといった事が出来る 142 Configure Primitiveノードの設定例 Custom
Data Name = MouseDown_btn1(btn1メッシュをマウスクリックした時) Custom Data Value = camera1_96 (camera1を96フレームから再生する) btn1メッシュをマウスクリックするとカメラが動いている

variantを使ったボタン • ボタンメッシュはAddVariantノードに接続することで、Houdini上でON状態、OFF状態などのプレビューを行えるようにしている • ボタン種別をSOP名の接尾語に設定することで、ゲームランタイムは USDのvariantとSOP名からメッシュをボタンと認識して処理を行う 143 種別 SOP名の接尾語
ボタンON状態メッシュ On ボタンOFF状態メッシュ Off マウス用ヒットエリアメッシュ HitArea AddVariantノード SOP Importノード SOP名

variantを使ったプレビュー • Scene Graph Pathからvariantがどのメッシュを使用するか設定することで、ボタン状態を切り替えてプレビューが出来る 144 addvariantノードボタンOFFノードボタンONノード
ボタンヒットエリアノードボタンON状態ボタンOFF状態右クリックでvariantを切り替えてボタンをプレビューする

レンダラー • マテリアル確認用のレンダラーはArnoldを使用している • Arnoldを使用するとレンダリングに時間が掛かるため、メッシュ形状やアニメーション確認時はHoudini VKを使用する 145 Houdini VK(アニメーションプレビュー用)
Arnold(マテリアル確認用)

Arnold • キャラクターアーティストや背景アーティストはArnoldを使ってレンダリングを確認しているため、UIアーティストもレンダリングはArnoldを使用する →UIアーティストがレンダラー設定やマテリアルパラメータに迷った時に、キャラクターアーティストや背景アーティストにパラメータ値を聞くことが出来る 146 Mayaのマテリアル Houdiniのマテリアル Arnold
Standard Surface

マテリアル • マテリアルはArnold Standard Surfaceを使用する →Material LibraryノードでArnold Standard Surfaceマテリアルを作成する
• 基本的にはEmissionとOpacityを設定するが、他のパラメータも使用することがある 147 Arnold Standard Surface

マテリアルのUSD出力 • Arnold Standard Surfaceを使用しているので、USDにマテリアルパラメータを出力出来る 148 usdview Arnold Standard
Surfaceパラメータ Houdini

SOPでの色設定 • LOPでのマテリアル設定だけでなく、SOPでメッシュの大まかな色を確認出来るようにするため、SOPで色を設定し、VOPでメッシュの色情報をArnoldの色に変換することも出来る 149 SOP LOP SOPのColorノードの値を User
Data RGBAノードで参照する

ライティングプリセット • Arnold使用時はHDRIを用いてライティング結果を確認している • HDRIはライティングアーティストが作成したライティング情報Excelを USDに変換し、Asset Referenceノードで参照している 150 CEDEC2020: 信頼性の高いHDRI作成術
ライティング情報Excel Houdini HDRI USD DomeLight + DistantLight

USD出力 • USD ROPノードでUSDを出力する • PerforceでUSDを管理しやすくするため、Save StyleはFlatten All Layersを設定し、出力USDを1ファイルにまとめている 151
• アニメーション出力のため、Valid Frame Rangeは Render Specific Frame Range • USDを1ファイルにまとめるため、Save Styleは Flatten All Layers • 全フレームの情報をUSDに書き込むため、Flush Data After Each FrameはON USD ROPノード

ゲーム中のパラメータを使用するUI • HUDなどの一部UIでは、ゲームランタイムはゲーム中のパラメータを使用して、UIの表示制御を行う • 表示するフレーム番号 • UIパーツごとの表示/非表示 • UIパーツのサイズ変更
• … 152

数字表示 • Houdiniで0～9までの数字メッシュを作成する • ゲームランタイムでゲーム中のパラメータを元に特定の数字メッシュを表示することで、数を表現することが出来る 153 数字表示数字メッシュゲームランタイム

プレイヤー体力ゲージ%表示 • Houdiniで体力ゲージメッシュを0～100フレームのフレームアニメーションとして作成する • ゲームランタイムはゲーム中のプレイヤーの体力を参照し、体力ゲージメッシュの表示フレームを設定する 154 体力ゲージ体力ゲージメッシュ
ゲームランタイム

プレイヤー入力によるメッシュ切り替え • Houdiniでクロスヘアのメッシュを作成し、色は1フレーム目に白、2 フレーム目に赤を設定する • ゲームランタイムがプレイヤーのマウスクリック時にクロスヘアの表示フレームを変えることで、クロスヘアの色を変えることが出来る 155 1フレーム目 2フレーム目
マウスクリックするとクロスヘアが赤色に変わる

他のアセット利用 • Houdiniは他のDCCツールのアセットをインポートして加工することが出来る • CSV(Excel) • EPS(Illustrator) • USD(Maya)
156

CSV(Excel) • ゲームデザイナーなど他職種が作成したExcelをCSVに出力し、 Table Importノードでインポートすることで、UIアーティストがテキストを扱うことが出来る 157 Excel CSV Table
Importノード Houdini

多言語対応 • CSV(Excel)からローカライズ用の文字列を参照することで多言語対応することが出来る • Houdiniはプロシージャルに処理を行うので、文字長や言語ごとに UIの幅などの形状を変えることが出来る 158 英語日本語
ロシア語 Excel

EPS(Illustrator) • IllustratorのEPSファイルをインポートすることで、UIアーティストは慣れているIllustratorを使ってUI素材を作ることが出来る 159 Illustrator Houdini

EPSインポート後の後処理 • EPSファイルをインポートした後はゲームランタイム用の後処理を行う • 頂点を三角形 (ポリゴン)に変更 • 法線の方向を揃える • 裏面カリングのため、頂点の並び順を時計回りに並び替える
• … 160

USD(Maya) • MayaからUSDを出力し、Houdiniでメッシュとしてインポートする • インポートしたメッシュはSOPのノードで加工する (ワイヤーフレーム化や形状をシンプルなものに変更するなど) • キャラクターアーティストや背景アーティストが作成したメッシュをUI 素材として使用出来る 161
Maya インポート結果メッシュ加工後

Houdiniスクリプト拡張 • アーティストの要望を受けて、プログラマがスクリプトを作成した (エラーチェッカー、後処理ノードの自動追加、絶対パスから相対パスへの変換...) • スクリプト拡張箇所は下記4種類 162 HDA メニューシェルフ
panelタブ (pypanel)

HDA • よく使うノードなど、UI用にHDAを作成して作業を効率化している 163 SOP LOP UI用HDA

HDA例(RGB値とアルファ値の同時編集) • ColorノードとAttribute WrangleノードをHDAでまとめることで、RGB値とアルファ値を同時に編集出来るようにしている 164 HDA アルファ値が編集出来る

HDA例(Configure Primitive) • Custom Dataを設定する時にConfigure Primitiveノードを使用するとテキスト入力が必要となるため、HDAを作成して、 Custom Dataの項目をプルダウンから選べるようにしている 165
HDA 描画パスやマウスイベントをプルダウンから選択している

HDA例(環境セットアップ) • UIアーティストで共通の作業環境を提供するためのセットアップノード • プレビュー用カメラノードやアンカー基準用球ノードが含まれている →プレビュー用カメラはアンカー球が画面端に表示されるカメラとなっている 166 UIプレビュー用カメラノード UIプレビュー用カメラ
アンカー球

HDA例(後処理) • SOPでメッシュ作成後に「三角形化してNullノードを接続する」などの処理は全メッシュで必要なので、後処理用HDAを作成している 167 後処理用HDA

フォントファイル (.otf) • UIで使用するotfファイルはhoudini.envの HOUDINI_OUTLINEFONT_PATHにフォルダを指定することで、 Fontノードのフォント一覧から選択できるようにしている 168 フォント一覧にotfファイルが追加されている

アセット確認 • UI作成後や不具合発生時はアセットを確認する • Scene Graph Pathやusdviewを用いて意図したUSDが出力されているかどうか確認する 169 Scene
Graph Path usdview

不具合の切り分け • Scene Graph PathやusdviewでUSDに不具合が見つからなかった場合、不具合はプログラムが原因だと分かる • USDはusdviewなどのツールによって、中身を数値で確認出来るので、データデバッグがしやすい •
usddiffでアセット差分を調べることも出来る 170 Houdini (Scene Graph Path) usdview アセットコンバーターゲームランタイムプログラムが不具合原因アセットが不具合原因

ゲームランタイム • ゲームランタイムはアセットコンバーターが出力した独自バイナリファイルを読み込み描画する 172 独自バイナリファイルゲームランタイム USD アセットコンバーター

アセットコンバーター • USDを読み込んで独自バイナリファイルを出力するC#ツール • USDライブラリはデバッグを考慮して、自前でビルドしたものを使用 173 CEDEC2024: USDのゲームアセットへの応用について https://github.com/PixarAnimationStudios/OpenUSD

独自バイナリファイル • USDとほぼ同じ構造になっており、頂点データやマテリアルパラメータ、カメラ情報、 Custom Dataが入っている • variantは全variant setがバイナリファイルに入っている 174
USD 独自バイナリファイルメッシュ頂点データカメラメッシュ頂点データカメラマテリアルパラメータマテリアルパラメータ Custom Data Custom Data

アニメーション • 独自バイナリファイルには全フレーム分の情報が入っている 175 独自バイナリファイルフレーム1 メッシュ頂点データカメラデータマテリアルパラメータフレーム2
メッシュ頂点データカメラデータマテリアルパラメータ …

独自バイナリファイルの読み込み • ゲームランタイムは独自バイナリファイルを読み込み、全フレーム分の頂点バッファを作成する • 実装はジオメトリキャッシュと似ている 176 1フレーム目 30フレーム目 60フレーム目

設計 • ゲームランタイムは様々なゲームエンジンに対応するため、ゲームエンジン非依存で実装している • 座標系について、USDは標準ではY-up右手系となっているので、ゲームエンジンに合わせてメッシュの座標系を変換する 177 ゲームエンジンA UI
ゲームランタイムゲームエンジンB 内製プレビューツール

シェーダー • Standard Surfaceを実装 • なるべくArnoldのマテリアルパラメータをそのまま使えるようにしている (TransmissionなどStandard Surfaceが正しく再現出来ないパラメータもある)
178 CEDEC2022: MaterialXとStandard Surfaceのゲームグラフィックスへの応用について https://autodesk.github.io/standard-surface/

カメラ位置 • UIを3Dで描画すると透視変換によって画面端のUIが歪んで見える • 歪みを減らすためにカメラをUIパーツ毎の中心で描画する機能を追加した 179 UI UI 画面
カメラカメラ画面

プログラムで生成する文字について • テキストボックスなど、Houdiniで文字メッシュを入れられないUIも存在する • テキストボックスのCustom Dataにフォント名とテキストIDを設定し、ゲームランタイムで文字メッシュを生成する →従来の2Dテキスト処理と同様の処理 180
Houdini ゲームランタイム

結果 • HoudiniでUIを作成し、ゲームランタイムでUIを表示出来るようになった 182 ゲームランタイム Houdini

まとめ(エンジニア) • HoudiniとUSDを使ったワークフローを構築した事により、アセットがゲームエンジンの影響を受けず、安定する様になった • Houdini自体が安定している事と、USDにより各種パラメータが数値として確認出来るので、不具合発生時に何が原因で描画結果が変化したかが分かる • Houdiniではよく使うノードはHDAとして再利用可能にしたり、
pythonスクリプトを用意するなど、作業効率を上げることが出来る • 背景メッシュのデータをUSD経由でHoudiniに取り込み、UI素材に使うなど、アーティスト間のアセットのやりとりが簡単になる 183

まとめ(アーティスト) • Houdini + USD によるUI開発環境は無限の可能性 • 数式やルールに基づいて自動的にデータやコンテンツを生成する手法はUI 制作向き •
手作業による詳細な設定を最小限に抑え、複雑なパターンや大規模なデータを効率的に作成可能 • UIを3D空間で扱うことができるようになり表現の幅が拡大 • 他のアートセクションと同じ言語を使うことで、表現手法の相談や知見の共有が可能・3DCGの知識が必要 • 3D描画、カメラ、ライティング、マテリアル、レンダラー、USD… 184

まとめ(アーティスト) 185 LITTLE BIG UI TRAINING https://www.sidefx.com/tutorials/little-big-ui-training-promo/ SCI-FI VISUALIZATIONS IN
HOUDINI https://www.rebelway.net/sci-fi-visualizations-houdini ゼロから始めるHoudini https://www.youtube.com/watch?v=w7EtvfGokZs HARD EASY NORMAL • おすすめチュートリアル

今後の検討事項 • ライトの設置 • LOPでライトを設置し、USDにUsdGeomLightとして出力することで、ゲームランタイムに反映出来る →UIのライトが背景に影響を与えることが出来る 186 https://openusd.org/dev/api/usd_lux_page_front.html

参考 • https://www.sidefx.com/docs/houdini • https://openusd.org • CEDEC2020: 信頼性の高いHDRI作成術 • CEDEC2022:
MaterialXとStandard Surfaceのゲームグラフィックスへの応用について • CEDEC2024: USDのゲームアセットへの応用について 187

各種バージョン • Houdini FX 20.5.550 • Arnold for Houdini 6.3.4
• USD 24 • Python 3.10 188

【CEDEC2025】HoudiniによるUI作成について

【CEDEC2025】HoudiniによるUI作成について

More Decks by Bandai Namco Studios Inc.

Featured

Transcript