HMIデモで語る、モバイルのリッチ表現と最適化手法【Build: Tokyo'25 for Automotive】

Build Tokyo ’25 for Automotive HMIデモで語る、モバイルのリッチ表現と最適化手法 ヒストリア・エンタープライズ 佐々木 瞬、真茅 健一、星野 智希

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

自己紹介 株式会社ヒストリア 真茅 健一 3Dアーティスト ヒストリア・エンタープライズチーム所属の 3Dアーティスト。自動車、建築などノンゲー ムコンテンツのアートワークを担当。元々の 専門は建築ビジュアライズだったためフォト リアル系の案件を担当することが多い。ライ ティング周りの表現力向上に関心が高い。 本講演デモではコンテンツ全体のビジュアル 設計と最適化を担当。

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

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

エンタープライズ案件数

自動車業界のUE利用用途 カーコンフィギュレーター 自動運転シミュレーション環境構築 教師データ作成 デザインレビュー HMI

リッチ表現 × 最適化

historia HMI Realize デモ端末 2020年8月発売, Samsung Galaxy Tab S7 Snapdragon 865 Plus

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

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

Stats (Open GL) デモ端末 フレームレート Samsung Galaxy Tab S8+ （ 2022年2月発売 ） Snapdragon 8 Gen 1 CPU使用率 GPU使用率

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

チーム構成 佐々木 Director 小林 PM 櫻井 UI Artist 吉野 UI Artist 真茅 3D Artist 星野 Engineer <制作期間> 約3か月

ワークフロー コンセプト決定 ここから1.5か月 画面構成決定 フレームワーク 制作 デザイン 背景制作 機能実装 ここまで1.5か月 調整

最適化の例をいくつかご紹介

アーティスト編

車のモデル ● 最終的に車モデル全体で約8万トライアングル

不必要なハイポリはローポリにベイク ● 元のモデルは68万トライアングル、マテリアルが3つ

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

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

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

タイヤの回転はマテリアルで表現 ● CPUの計算を減らしGPUで軽量に計算するためマテリアルで回転させている

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

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

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

ライティング手法の検討 ● 本講演デモでは低負荷かつリッチな表現を目指した ● 建築部分の表現に大量のライトと高品質のグローバルイルミネーションが必要 ● クオリティとパフォーマンス両方の観点からライティングはLightmassを使用 ※ライティングを事前計算してテクスチャ化しておくことで低負荷で高品質なライティングを実現 ただし、動的ライトを追加しない限りライトやモノを動かしてもリアルタイムにライティングが反映されない のでシーン設計には制約がでる。

ライティング環境の切り替えはライトシナリオを使用 ● 各時間帯、天候のバリエーションのライティングはライトシナリオとして事前 計算しておく ● 実行時には切り替えて読み込む

動的なライトの計算は最低限に ● 太陽と車のヘッドライトのみ動的にライティング

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

デカールによる影の表現 ● 木があることを感じさせるために木の影だけをデカールで追加 ● UVにノイズを加えてアニメーションさせることで風で揺れているように見せた

デカールなし

デカールあり ● 車載機環境では表現しきれない詳細な影をデカールで追加

疑似的表現での軽量化 ● 水の表現はまともにやるとコストが高すぎるので、不透明かつUnlitで擬似的に表現

エンジニア編

CPU負荷 ● アプリケーションのCPUの負荷は システム全体の15%~20%ほど ● よほど重たいマルチスレッドの処 理を行わない限りCPU負荷がシステ ムに影響を与えることは少ない 19.44 15.34 11.24 7.14 ● ゲームスレッドも比較的余裕があ る ● 今回特にゲームスレッド側での最 適化は行っていない

Android Single Instance Service(ASIS) ● Epic GamesがHMI向けに設計したUEのインスタンスを共有できる機能 ● Rivianで実製品で使用実績あり 通常の構成 ASISを使用した構成

通常の構成では ● UEだけで完結 ● プロトタイプなどに向いている ● 車両制御を組み込むハードルが高い 通常の構成

ASISを使用する場合 ● ASISアプリとUEアプリの2つに分離 ● アプリ間は相互通信できる ● 車両制御はUEに組み込む必要がない ASISを使用した構成

クラッシュに強い ● ASISを使用していない場合 ● Debug Crashを実行

クラッシュに強い ● ASISを有効にするとクラッシュしてもアプリ本体に影響がない

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

ASISのパフォーマンス ● 若干オーバーヘッドがある（1msくらい遅くなった） ● CPU負荷はUEアプリ＋ASISアプリ（3%ほど）なので少し増える ● メモリの使用量はほぼ変わらない ● ただし起動するアプリが増えれば比例してメモリの使用量も増える

最後に

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

JAXA×ヒストリアの共同開発

JAXA×ヒストリアの共同開発

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