リッチ表現なのに軽い！Unreal Engineだから実現できたHMIデモ最適化7選 | Unreal Fest Tokyo 2025

リッチなのに軽い！ Unreal Engineだから実現できたHMIデモ最適化7選 ヒストリア・エンタープライズ 佐々木瞬 / 真茅健一 / 星野智希 #unrealfest

自己紹介 株式会社ヒストリア 佐々木 瞬 代表取締役 プロデューサー / ディレクター / エンジニア ゲーム系の専門学校を企画職として卒業。 その後、ゲームのディレクターを経て、エンジニアへ 転身。前職でUnreal Engine 3 を使用していた経験か ら、2013年 Unreal Engine 専門会社のヒストリアを 設立。ゲームとエンタープライズコンテンツの両方の 制作を行う。 本作では、企画・ディレクションを担当。 Unreal Engine 歴 14年くらい。 2 #unrealfest

自己紹介 株式会社ヒストリア 真茅 健一 3Dアーティスト ヒストリア・エンタープライズチーム所属の 3Dアーティスト。自動車、建築などノンゲー ムコンテンツのアートワークを担当。フォト リアル系の案件を担当することが多い。 本講演デモではコンテンツ全体のビジュアル 設計と最適化を担当。 #unrealfest

自己紹介 株式会社ヒストリア 星野 智希 エンジニア 2022年にヒストリア・エンタープライズチームに 新卒入社。 学生時代には同社開催のゲームコンテスト「UE4 ぷちコン」へ応募。第12回~15回に入賞する。 現在は自動車業界、建築業界などに向けたアプリ ケーション開発を行っており、本講演デモでは各 種機能実装と、UI実装を担当。 #unrealfest

ヒストリアの事業 開発者 コミュニティ ゲーム事業 エンタープライズ事業 ・家庭用ゲーム ・アーケードゲーム ・VR ・自動車業界 ・建築業界 ・放送/映像業界 ・その他業界 ・UE技術ブログ ・UEぷちコン ・セミナーイベント ・ゲームメーカーズ #unrealfest

#unrealfest

日本で唯一、コンソール系ゲーム開発会社で 自動車業界にコミットしている企業（たぶん） 10年以上自動車業界の案件は途切れていない #unrealfest

エンタープライズ案件数 #unrealfest

エンタープライズ案件数 自動車業界案件 累計受注数100件超えました！ 2年連続ゴールドステータス #unrealfest

リッチ表現 × 最適化 #unrealfest

historia HMI Realize デモ端末 2020年8月発売, Samsung Galaxy Tab S7 #unrealfest

historia HMI Realize https://historia.co.jp/enterprise/realize/ #unrealfest

• https://historia.co.jp/enterprise/realize/

Stats (Open GL) デモ端末 フレームレート Samsung Galaxy Tab S7 Snapdragon 865+ （ 2020年8月発売 ） CPU使用率 GPU使用率 8/5 Build: Tokyo'25 for Automotiveでの発表時 #unrealfest

Stats (Open GL) デモ端末 フレームレート Samsung Galaxy Tab S7 Snapdragon 865+ （ 2020年8月発売 ） CPU使用率 15%⇒ GPU使用率 55%⇒ #unrealfest

Unreal Engineが得意なこと × UEは重い ○ UEはリッチ表現が軽く実現できる #unrealfest

なぜペンギンを入れた？ #unrealfest

#unrealfest

まあ入ってくるでしょう #unrealfest

AIが進化する中で、UEはいま必要な技術？ #unrealfest

Unreal Engine VS AI #unrealfest

利点と欠点 ゲームエンジン AI 利点 ・意図したコンテンツを表示可能 ・多彩な反応を返すことが可能 欠点 ・多彩な反応を用意するのに 工数がかかる ・事前準備した反応しか 得られない ・意図しないグラフィック表示、 意図しない操作をしてしまう ・デバッグがやりきれない #unrealfest

UE / AI：境界線はどこだ 対話の返答 機能の操作リクエスト 対話エージェントが 提案する可能性 機能の実行 ユーザーとのインターフェース レンダリング・操作レスポンス より最適化技術は重要に！ おそらくしばらく ココが境界 #unrealfest

声だけで脱出ゲーム ChatGPT×UE5技術デモ 2023年6月 「名探偵モカと密室脱出」 https://historia.co.jp/archives/35650/ #unrealfest

• https://historia.co.jp/archives/35650/

チーム構成 佐々木 Director 小林 PM 櫻井 UI Artist 吉野 UI Artist 真茅 3D Artist 星野 Engineer <制作期間> 約3か月＋追加最適化1か月 #unrealfest

最適化の例7選をご紹介 #unrealfest

前提条件 ● フォワードレンダリングを採用 #unrealfest

1.ライティングはベイク #unrealfest

ライティング手法の検討 ● 本講演デモでは低負荷かつリッチな表現を目指した ● 背景の建築は大量のライトと高品質のグローバルイルミネーションが必要 #unrealfest

ムーバブルのライトでライティングすると ● 間接光の表現ができない ● 多数のライトはパフォーマンス的に厳しい #unrealfest

ライティングはベイク ● 動くものは車以外ないので、クオリティとパフォーマンス両方の観点からライ トは基本的にスタティックを使ってライティングをベイクする ● ベイクしておくことで低負荷で高品質なライティングを実現 #unrealfest

ライティングはベイクなら ● スタティックのライトを負荷をほぼ気にせずたくさん置ける #unrealfest

動的ライトの使用は最低限に ● 一つの動的ライトでもパフォーマンスに大きく影響する ● 太陽と車のヘッドライトのみ動的にライティング #unrealfest

ライティング環境の切り替えはライトシナリオを使用 ● 各時間帯、天候のバリエーションのライティングはライトシナリオとしてライ トビルドしておいた。 ● 実行時には切り替えて読み込む #unrealfest

2. デカール(or半透明の板)で影の表現 #unrealfest

デカールについて ● 上書きして質感を投影することができる #unrealfest

デカールなし #unrealfest

デカールで影表現 ● モバイル環境では表現しきれない詳細な影をデカールで表現 #unrealfest

車の下の影 ● 車の下の影のコントラストが足りない ● DCCツールで作成した床面のAOテクスチャを投影して影を追加 #unrealfest

風に揺られる木の影の表現 ● 手前にボリュームのある植物を足したいがパフォーマンス的に厳しい ● せめて木があることを感じさせるために木の影だけを追加 ● UVにノイズを加えてアニメーションさせることで風で揺れているように見せた #unrealfest

デカールの代わりに半透明の板で同じ表現を試すと ● デカールは使いやすく表現としては満足できたが軽くはない ● “Translucent”で”Unlit”な半透明マテリアルをただの板ポリに貼ってみた #unrealfest

デモではデカールより半透明の板を置いた方が軽かった ● デカール 12.75ms ● 半透明の板 12.02ms #unrealfest

3.ボディのディティールはAOで #unrealfest

車のモデル ● ボディ全体で約8万トライアングル ● 車の形状のディティールが大切なのでモバイルとしてはリッチなポリゴン数 #unrealfest

最終的なライティング #unrealfest

普通にライティングするとディティールが出ない ● 奥まった部分の光が遮蔽できていない ドアハンドルの陰影がない パーティングラインが消える 本来光が回らない場所まで 明るくなっている #unrealfest

遮蔽できていない光はどれ？ ● 最終絵は動的ライト+ベイクしたライトマップでライティングでできている = + 動的ライト ライトマップ 最終絵 #unrealfest

遮蔽できていない光はどれ？ ● ライトマップの成分 = + ライトマップ #unrealfest

マテリアルにAOを設定 ● ライトマップをマスクできる + ライトマップ x = 最終絵 動的ライト AOテクスチャ #unrealfest

車のマテリアルにAOを設定 Substance PainterでベイクしたAO #unrealfest

AOの強弱で遮蔽感を調整 #unrealfest

環境光成分以外には効かない ● 動的ライトが当たっている面にはあまり効果がない(リフレクションキャプチャによる反射はマスクされる) ● ムーバブルのスカイライトには有効 #unrealfest

4. タイヤをマテリアルで回転させる #unrealfest

タイヤの回転はマテリアルで表現 ● CPUの計算を減らしGPUで軽量に計算するためマテリアルで回転させている ● マテリアルパラメーターコレクションで管理 #unrealfest

準備としてメッシュをローポリ化とマテリアルの統合 ● 元のモデルは68万トライアングル、マテリアルが3つ #unrealfest

ローポリを作成 ● カメラから見てシルエットに悪影響を与えない程度のローポリを作成 元のモデル ローポリモデル #unrealfest

Substance Painterでローポリにベイク ● 元のモデルの情報をローポリにベイクして、質感とともにテクスチャ化 #unrealfest

ポリゴン数、マテリアル数を削減 ほぼ同じ見た目でポリゴン数を大きく削減（隙間は背面が見えないように意図的に潰している） ・元のモデル ・ローポリにベイクしたモデル 68万トライアングル マテリアル3つ 840トライアングル マテリアル1つ #unrealfest

マテリアル内でタイヤの回転を表現 ● マテリアルのRotate About AxisをWorld Position Offsetに接続して回転 ● 頂点の位置をマテリアルで回転させることでタイヤが回っているように見せている RotateAboutAxisについては弊社ブログ記事でも解説しています [UE4] RotateAboutAxisでオブジェクトを回転する https://historia.co.jp/archives/6261/ #unrealfest

• https://historia.co.jp/archives/6261/

背景も連動して動くように ● 背景もタイヤの回転と連動してマテリアルで頂点を移動させた ● 実際には車は移動していないのでループ走行させるには管理しやすい #unrealfest

5.Drawを減らす #unrealfest

制作途中の背景と最終的な背景を比較 ● 制作途中 ● 最終 ほとんど同じに見えるが #unrealfest

制作途中の背景と最終的な背景を比較 ● 制作途中 ● 最終 Drawsが大きく異なり、GPUの負荷にもつながっている #unrealfest

制作途中の背景と最終的な背景を比較 ● 制作途中 ● 最終 “Stat scenerendering“で確認するとMesh draw callsが4倍近く #unrealfest

制作途中の背景 ● 同じメッシュや小さいメッシュが小さい範囲を何度も分けて描画している #unrealfest

最終的な背景 ● 同じメッシュや小さいメッシュをマージすることで効率的に描画している #unrealfest

メッシュをマージする ● メッシュを複数選択して”Tool”→”Merge Actor”を選択 #unrealfest

メッシュをマージする ● “Merge Actors”を押すとメッシュが結合される #unrealfest

メッシュをマージする ● メッシュが結合されたので11回の描画が7回に （メッシュが1つでもマテリアルが7つに分かれているので） #unrealfest

マテリアルもマージする場合は ● LOD Selection Typeを “Use specific LOD level”にすることで”Merge Materials”が使える。 #unrealfest

メッシュをマージする ● マテリアルもマージされたので11回の描画が1回で済むようになった #unrealfest

車もマテリアルをまとめてDrawを減らす ● 16あったマテリアルを3つに統合 #unrealfest

まとめてテクスチャ化 ● Substance Painterで複数マテリアルをまとめてテクスチャ化した。 ● 前述のAOのベイクも行っているので遮蔽感の向上にも寄与 #unrealfest

エンジニア編 #unrealfest

6. 3DWidgetのサイズについて #unrealfest

3DWidgetの描画 ● 3DのUIの描画WidgetComponentを使用 ● 2Dで作成したUIをそのまま3D空間に描画することができる #unrealfest

WidgetComponentの描画 ● 3D空間に描画される前に一度内部でRenderTargetに描画される ● その後、Widgetを描画したRenderTargetが3D空間に表示される ● RenderTarget の解像度はDrawSizeで設定した数値 → Widget → RenderTargetに描画 3D空間に描画 #unrealfest

WidgetComponentの解像度 ● 画面の解像度とは関係なく、内部では常にDrawSizeで設定した解像度で レンダリングされる ● 通常のテクスチャとは異なりMipMapが生成されないため、必要以上に 大きい解像度に設定されていると大きな負荷につながるため注意 #unrealfest

今回の事例 ● Draw at Desired Sizeにチェックが入っていると自動で サイズが決定される ● 元のテクスチャが大きかったため、最終的な画面の解像度の 3倍以上の解像度でレンダリングされていた ● コンソール変数（MaximumRenderTarget）で最大サイズを 設定できるが、あくまでもエディター上で設定できる最大の サイズなので、 Draw at Desired Sizeが有効だと設定した数 値を超えることもある #unrealfest

Widgetの解像度が大きい場合 ● 実際にGPUの負荷になっている様子 ↑4500ｘ1200のWidget #unrealfest

Widgetの解像度を小さくした場合 ● 解像度を1/4に下げた様子 → 1125x300 ● もともと画面の解像度より大きかったため、あまりぼやけた感じはしない #unrealfest

適切な解像度 ● 必要以上に解像度を下げても効果は少ない ● 描画される大きさを考慮して適切なサイズに設定 フル解像度：46% 1/2：39% 1/4：39% #unrealfest

最終的な解像度の設定 ● 元のテクスチャはそのままでWidgetComponentのDrawSizeを半分に設定、 全体のGPU使用率は46%->39%に削減 ● テクスチャはMipMapが作られて自動で適切なサイズになる、という先入観 があり開発終盤まで気づかなかった #unrealfest

7. CPUの負荷について #unrealfest

CPU負荷 ● アプリケーションのCPUの負荷はシステム全体の12%~20%ほど ● イベントドリブンで設計 ● ゲームスレッドも比較的余裕がある ● 今回特にゲームスレッド側での最適化は行っていない #unrealfest

CPU負荷の内訳 ● ほとんどIdleTime ● そもそも実行している処理自体が少なく、最適化の余地があまりなかった #unrealfest

不要なHitTestは行わない ● Widgetで当たり判定を取る必要のないものはVisibilityをNotHit-Testableに 設定 #unrealfest

Tickについて ● TickはADASの他車両の制御でのみ使用 ● Homeと比べて負荷は増える（Home：12% -> ADAS：17%） ● Tickを使ったから重いという訳でななく、単純に処理する内容が増えたから ● 不必要なTickは避けるべきだが、必要があれば普通に使う #unrealfest

ASISについて #unrealfest

Android Single Instance Service(ASIS) https://www.unrealengine.com/ja/uses/hmi #unrealfest

• https://www.unrealengine.com/ja/uses/hmi

ASISを使ったアプリの構成の違い ● ネイティブアプリ（ASIS）を上でアプリを動作 通常の構成 ASISを使用した構成例 #unrealfest

通常の構成では ● UEだけで完結 ● プロトタイプなど小規模な開発に向いている ● 車両と連携する処理を組み込む難易度が高い 通常の構成 #unrealfest

ASISを使用する場合 ● ASISアプリとUEアプリを別々に開発できる ● ASIS UE間は双方向で通信が可能 ● 車両との連携など安全に関わる部分はASISアプ リ側に委ねられる ● 構成が複雑になるため小規模開発には向かない ASISを使用した構成例 #unrealfest

クラッシュに強い ● ASISを使用していない場合 ● Debug Crashを実行 クラッシュを実行 アプリ全体が落ちる ホーム画面 #unrealfest

クラッシュに強い ● ASISを有効にするとクラッシュしてもアプリ本体に影響がない クラッシュを実行 ASISは生きたまま すぐに再起動 #unrealfest

アプリの切り替え ● 非常に高速に切り替えが可能 ● 遷移アニメーションなども作れる #unrealfest

AndroidのUIが利用できる ● ASISアプリのUIをUEの画面に重ねることができるため、UIをUEに組み込む コストを削減 → Android StudioでUIを作成 → TextureViewとしてUEの画面を扱える UIを重ねて表示 #unrealfest

ASISのパフォーマンス ● オーバーヘッドは若干あるが（1ms程）ほぼ無視できる ● アプリケーション全体のCPU負荷はUEアプリ＋ASISアプリなので少 し増える（数％程）がこちらもほぼ無視できる ● メモリの使用量はほぼ変わらない ● ただし起動するアプリが増えれば比例してメモリの使用量も増える ● 実製品を見据えたHMI開発ではASISの使用は必須になってくる #unrealfest

なぜ技術公開するか？ #unrealfest

自動車業界におけるUE シミュレーション 車両開発中 ビジュアライズ 自動運転 Sim環境構築 デザインレビュー ロボット Sim デザインレビュー 教師データ作成 静止画出力 動画出力 ユーザーテスト 夢がある！ toC コンテンツ HMI AI コンシェルジュ？ カーコンフィ ギュレーター CG制作 イベント コンテンツ UGC？ めっちゃワクワクする！ #unrealfest

＜ヒストリアの夢＞ 誰もがPhotoshopを扱うようにUEを扱う世界 UEにAIによるオペレーションが入ったら夢では無いと思う #unrealfest

宣伝 #unrealfest

JAXA×ヒストリアの共同開発 月面シミュレーション 将来的にローバーの走行シミュレーション等で使用 左：SLIMが撮影した画像 右：UE5で再現した月面環境 https://historia.co.jp/archives/45327/ #unrealfest

• https://historia.co.jp/archives/45327/

研究結果を利用した年内公開予定のデモゲーム #unrealfest

https://historia.co.jp/enterprise/soundxr/ #unrealfest

• https://historia.co.jp/enterprise/soundxr/

ご清聴ありがとうございました #unrealfest