全高3m超のバハムート像がスマホを通して躍動する！ ～『Cygames展 Artworks』ARコンテンツの開発プロセスと実装～

Transcript

1. 1/80 エンジニアリング 全高3m超のバハムート像がスマホを通して躍動する！ ～『Cygames展 Artworks』ARコンテンツの開発プロセスと実装 ～ CTO室 エンジニア / 平野孝則 スキャンスタジオ 3Dスキャンマネージャー / 遠藤 嘉和
2. 2/80 Cygames展 Artworksのガイドアプリ ARコンテンツの開発事例 本講演でお伝えすること 開発プロセス 実装手段 ARコンテンツを 作るための 全高3mのバハムート像を フォトスキャンした精密な3Dモデルを準備 ARにおける高精度なトラッキングと 高精細な3D表現を実現 の紹介
3. 3/80 平野 孝則 CTO室 / エンジニア 2018年に株式会社Cygamesへ合流し、 各種技術の検証や実用化を経験。 Cygames展 ArtworksではAR施策における開発業 務を担当し、AR演出に関する技術検証とコンテンツ 開発を行っている。 遠藤 嘉和 スキャンスタジオ / 3Dスキャンマネージャー 2018年に株式会社Cygamesへ合流。 スキャンスタジオ責任者兼エンジニアとして、社内プ ロジェクト向けにスキャンデータの提供を行っている。 Cygames展 ArtworksではAR施策における 3Dスキャンを担当。 自己紹介
4. 4/80 1. ARコンテンツ開発の流れ 2. 3mのバハムート像をトラッキングする方法 3. ARコンテンツを支えた3Dスキャン 4. ARコンテンツの実在感を高めるために 5. コンテンツをより良くするために 6. 今回のまとめ アジェンダ
5. 5/80 Cygames展 Artworksとは? 『神撃のバハムート』『グランブルーファンタジー』など Cygamesの人気ゲームのアートワークが集結し 「最高のコンテンツの系譜」をたどる美術展 開催期間: 2023/09/02 (土) ～ 2023/10/03 (火) 場所:上野の森美術館
6. 6/80 Cygames展 公式ガイドアプリ 展示内容をさらに楽しめる専用の公式ガイドアプリを 開催に合わせて期間限定リリース 館内マップ・展示ガイド 人気キャラクターたちによる音声ガイド
7. 7/80 公式ガイドアプリのARコンテンツ
8. 8/80 ARコンテンツ開発の流れ
9. 9/80 技 術 検 証 本 制 作 仕 上 げ 最 終 調 整 準 備 会 場 で の 最 終 調 整 リ リ ー ス プ ロ ト タ イ プ 制 作 企 画 詰 め ARコンテンツ開発の流れ
10. 10/80 技術検証 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め • 3mの立体物に対するAR表現の知見が社内にない • 企画が実現できるかがわからない どのような技術を用いれば実現できるか、 具体的な調査および検証を行う
11. 11/80 プロトタイプ制作/企画詰め 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め エンジニアがUnity上で演出案を試作し 演出の見た目を確認 演出の実装方法や企画内容の方向性を決定 稲妻 マグマの光の照り返し 噴煙
12. 12/80 本制作 エ ン ジ ニ ア が 組 み 込 み ア ー テ ィ ス ト が エ フ ェ ク ト 作 成 演 出 案 を 確 定 絵 コ ン テ 作 成 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め
13. 13/80 仕上げ/最終調整準備 最終調整用のツール を作成 端末での動作確認を実施 描画処理の最適化 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め
14. 14/80 会場での最終調整 • 会場でのバハムート像の 組み立てに立ち会い、 像の組み立て調整を依頼 • 現地の照明などの状況に 合わせてアーティストと 煙の濃さ等の最終調整を行う 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め
15. 15/80 ARコンテンツ開発の流れ ARコンテンツの開発では試行錯誤とチャレンジ を行い、様々な知見を得ることができた 技 術 検 証 本 制 作 仕 上 げ 最 終 調 整 準 備 会 場 で の 最 終 調 整 リ リ ー ス プ ロ ト タ イ プ 制 作 企 画 詰 め
16. 16/80 以下の知見をより具体的に解説する 1. 3mのバハムート像をトラッキングする方法 2. ARコンテンツを支えた3Dスキャン 3. ARコンテンツの実在感を高めるために 4. コンテンツをより良くするために 得られた知見について
17. 17/80 3mのバハムート像を トラッキングする方法
18. 18/80 現実世界の環境やオブジェクトを検出し その位置や動きを追跡する技術 トラッキングとは？ ARコンテンツでは、 カメラに映った映像に対して 3D演出を行う これを実現するために トラッキング技術が必要 ARコンテンツ カメラに映った映像 3D演出 トラッキング
19. 19/80 トラッキング技術の大まかな区分 Image Tracking ⚫ 2Dの画像(マーカー、ポスター等)を認識 させる VPS ⚫ GPSやカメラ映像から高精度に位置情報を 推定する 3D Object Tracking ⚫ 立体物を認識させる
20. 20/80 トラッキングにおける技術選定 3D Object Tracking 調査を実施 Image Tracking VPS ⚫ 立体物はターゲットにできない ⚫ ポスター等と像を同時に映すのが難しい 立体物はターゲットにできない ポスター等と像を同時に映すのが難しい ⚫ 立体物はターゲットにできない ⚫ ポスター等と像を同時に映すのが難しい 街中にキャラクターを登場させる用途向き 屋内イベントでの利用には不向き
21. 21/80 トラッキングの技術要件 1. Android/iOS 両方で利用できる あ 2. トラッキング対象の設定が容易 あ 3. 全高3mのバハムート像を安定して トラッキングできる
22. 22/80 トラッキング技術要件を満たした製品 1. Android/iOS 両方で利用できる 2. トラッキング対象の設定が容易 3. 全高3mのバハムート像を安定してトラッキングできる or Vuforia EasyAR
23. 23/80 検証結果 トラッキング技術選定: 精度の検証 Vuforia • 高精度にトラッキングできる EasyAR • 十分な精度が出ない • はっきりした模様のテクス チャを持つ単純な立体形状 の認識が得意 • バハムート像のように複雑 なテクスチャを持つ形状の 認識には不向き
24. 24/80 トラッキング技術選定 技術選定 実用性検証 採用 or 諦める Vuforia
25. 25/80 実用性検証を進める上での課題 バハムート像での検証を待っていては コンテンツ制作が間に合わない！ • バハムート像は巨大(全高3m) • 制作にはそれなりの期間を要する • 完成は本番直前というスケジュールで制作進行中 本番のバハムート像はまだ無い
26. 26/80 実用性検証の進行 3m程度の 他の物体での検証 形状の影響 : 調査不可 スケールの影響 : 調査可 ミニチュア バハムート像での検証 形状の影響 : 調査可 スケールの影響 : 調査不可 検証を「スケール」と「形状」に分け それぞれのトラッキングへの影響を調査する
27. 27/80 スケールに関する検証 約3mの大きな物体であっても 十分高い精度でトラッキング可能 • 自宅近辺の公園を検証に利用 • 3m相当の3Dデータを作成し、どの程度トラッキングできるかを検証 本番に近い約3mの対象物でトラッキングを検証
28. 28/80 形状に関する検証 ミニチュアを用いて Vuforiaの認識精度を検証 高さ 約30cm
29. 29/80 1/10バハムート像での検証結果 認識自体はされたが、認識位置に大きなずれが発生
30. 30/80 1/10バハムート像はなぜズレたのか？ 3Dモデルとミニチュアの形状に 差異があった 原 因 3Dデータと造形物の形状が 同一にならない可能性が高い 懸 念 実際の造形物と同一形状の 3Dモデルを用意する必要がある 対 策
31. 31/80 ズレへの対応策 Cygames社内のスキャンスタジオに 造形物の3Dデータ化を依頼して検証する • 3Dデータを元に造形物を作成しても、 制作工程上3Dデータとのズレが発生する • 作成した造形物を元に3Dデータを作り直し、 トラッキングや表示を行うようにする
32. 32/80 トラッキング精度も問題なく、十分な品質が担保できる スキャンした3Dデータで検証
33. 33/80 実用性検証の結果 スケールが近い物体での検証 問題なし 技術選定 実用性検証 採用 Vuforia ミニチュアでの検証 問題なし
34. 34/80 ARコンテンツを支えた 3Dスキャン
35. 35/80 ARコンテンツを支えた3Dスキャン 1. 検証からデータ生成までの流れ 2. 技術検証用のミニチュアスキャン 3. 課題の洗い出しと本番に向けた準備 4. 実物のスキャン
36. 36/80 検証からデータ生成までの流れ ミニチュア撮影 撮影準備 本番 データ生成
37. 37/80 技術検証用のミニチュアスキャン
38. 38/80 スキャン方法 スキャンにフォトグラメトリーを選択した理由 技術検証用にテクスチャが必要 本番の実物サイズを考慮
39. 39/80 スキャンデータ生成 撮影カメラ位置
40. 40/80 ミニチュア生成データ①
41. 41/80 ミニチュア生成データ②
42. 42/80 実物の撮影における課題 実物のバハムート像は大きい 高さは約3ｍ、上面の撮影が困難 エフェクト表現に高品質なテクスチャが必要 スキャン可能かどうかは素材次第
43. 43/80 課題の解決策 実物のバハムート像 は大きい 大きい被写体には 広角レンズを使用
44. 44/80 課題の解決策 エフェクト表現に 高品質なテクスチャ 必要 フォトグラメトリーに ストロボを使用 自社開発ストロボ機材 スキャン方法：フォトグラメトリー
45. 45/80 手持ち撮影装置 自社開発ストロボ機材 スキャン方法：フォトグラメトリー
46. 46/80 課題の解決策 スキャン可能か どうかは素材次第 本番のスキャンを 段階的に実施
47. 47/80 スキャンの流れ パーツ 組み上げ 未塗装 組み上げ 塗装済
48. 48/80 スキャン準備 ローリングタワー
49. 49/80 スキャン用機材
50. 50/80 撮影現場 ※塗装完成前のバハムートをスキャン
51. 51/80 バハムート:スキャンデータ
52. 52/80 バハムート:スキャンデータ 高さ:約3m 幅:約6m
53. 53/80 バハムート:スキャンデータ ※塗装完成前のバハムートをスキャン ※塗装完成前のバハムートをスキャン
54. 54/80 バハムート:頭部
55. 55/80 バハムート：背中
56. 56/80 ARコンテンツの 実在感を高めるために
57. 57/80 ARコンテンツの実在感を高めるために 主な検証ポイント 1. ライティング（稲妻やマグマによる照り返し） 2. オクルージョン 3. 軽量版煙エフェクト 4. Unity as a Library
58. 58/80 ARコンテンツの実在感を高めるために ライティング （稲妻やマグマによる照り返し） オクルージョン
59. 59/80 ARコンテンツの実在感を高めるために 煙エフェクト (バハムート像の下半分を 囲うような形で配置されている) 軽量版煙エフェクト
60. 60/80 ライティング（稲妻やマグマの照り返し） 展示されたバハムート像を実際に光らせることはできないので、 スキャンした3Dデータに対して専用の光源計算を行い、 その結果をカメラ画像に重ねる形でライティングを行う • 専用のシェーダーを作成して、 スキャンしたバハムート像の 3Dデータへ適応 • 精細な陰影表現のため ノーマルマップを適応 • Specular/Diffuseを計算し、 カメラ画像に加算描画する
61. 61/80 オクルージョン 噴煙や雷は バハムートの背後にも 出現 オクルージョン なし オクルージョン あり バハムートに エフェクトが隠れると 実在感がより高まる
62. 62/80 足下の煙エフェクトの描画負荷が原因 煙エフェクトの軽量版を実装 軽量版煙エフェクト 一部端末で FPSが低下する現象が発生
63. 63/80 軽量版煙エフェクト: 実装 縮小バッファを用いた最適化 実機検証し FPS低下が改善することを確認 • 低解像度のテクスチャに煙を描画、 拡大して画面に合成 • URPのカスタムパスとして実装
64. 64/80 軽量版煙エフェクト: 問題点 一部箇所のオクルージョンが甘くなる 通常版 軽量版 溶岩が見えている
65. 65/80 軽量版煙エフェクト: 対応策 FPSが低下しない端末では通常版を再生 処理落ちを検出して軽量版に自動切り替え 処理落ちを検知する仕組みを実装 最終的な切り替え条件 45フレーム以上25FPS以下の状態が持続した場合 切り替え条件を調整して誤発動を抑制
66. 66/80 ガイドアプリはKotlin Multiplatformを用いた ネイティブアプリとして開発を進めていた AR演出をアプリへ組み込むために • 手触りを重視するため、ガイドアプリ自体は他チームにて ネイティブアプリでの開発が進んでいた • しかしKotlin Multiplatformでは、複雑な3D演出を行うのは難しい • ARコンテンツをより高クオリティなものに仕上げるためには、 社内に多くの知見が貯まっているUnityを使用したいという思惑が
67. 67/80 Unity as a Library Unityで開発した機能をモジュール化し iOSやAndroidなどのネイティブアプリに 組み込むことができる技術のこと 既存アプリにUnityで開発した機能を追加できる この技術を用いると Unityが得意とする機能の開発だけにUnityが使える
68. 68/80 ガイドアプリでのUaaLの活用 ARコンテンツの開発にUnityを使用 社内のUnityの知見をARコンテンツ開発に活用しつつ 他機能の開発への影響を最小限に抑えられた
69. 69/80 コンテンツをより良くするために
70. 70/80 ARコンテンツ開発の実際の流れ 本章ではコンテンツ開発を通じて得られた ARコンテンツをより良くするための手法を紹介する 技 術 検 証 本 制 作 仕 上 げ 最 終 調 整 準 備 会 場 で の 最 終 調 整 リ リ ー ス プ ロ ト タ イ プ 制 作 企 画 詰 め
71. 71/80 プロトタイプ制作における課題 スケールが異なりすぎるため AR演出案を正確に評価することは困難 本番のバハムート像はまだ無い
72. 72/80 解決策としてバーチャル展示室を準備 バーチャル展示室 バハムート像周辺の 会場レイアウトをUnity上に再現 実際の会場の状況に近い形で 見栄えが確認できた
73. 73/80 演出を確認しやすい環境を整える • トラッキング対象の物体がないと再生できない • 現物で頻繁にプレビューするのは難があった • ミニチュアでさえも設置場所に制約がある AR演出はプレビューが難しい • Vuforiaの機能のひとつ • 動画データをもとにUnityエディタ上でAR演出を再生できる 解決策: Video Playback機能を使用
74. 74/80 演出を確認しやすい環境を整える
75. 75/80 会場での最終調整 バハムート像は分解して会場に搬入するため 3Dスキャンのモデルと同じ形に組み上がるよう ARアプリで認識精度を確認しながらの調整が必要だった 現地で組み立てたバハムート像の 形状チェック・調整 会場の照明その他環境に合わせた エフェクトの最終調整
76. 76/80 まとめ
77. 77/80 まとめ 開発の過程で得られた知見 • 技術検証 → プロトタイプ制作/企画詰め → 本制作 → 仕上げ/最終調整準備 → 会場での最終調整 の流れで進行 ARコンテンツの開発事例を紹介 • 3mのバハムート像をトラッキングする方法 • 巨大なバハムート像を高精細に3Dスキャンする方法 • ARコンテンツの実在感をより高める描画等の技術 • コンテンツ制作を円滑に進めるために必要な取り組み
78. 78/80 まとめ 巨大なバハムート像を高精細に3Dスキャンする方法 • 今回の要件ではVuforiaを用いるのが最適だと分かった • Vuforiaで3D Object Trackingの精度を高めるためには 造形物の3Dデータ化が不可欠であった 3mのバハムート像をトラッキングする方法 • 今回の要件ではフォトグラメトリーが適していた • 広角レンズや自社開発のストロボ機材、移動式の足場等の 機材を駆使することで効率的に撮影を進めることができた • 未塗装の段階からテスト撮影を行い、確実にスキャンできる 計画を立てながら3Dスキャンを実施
79. 79/80 まとめ • 3Dスキャンデータを用いてライティングやオクルージョンを 行うことで、AR表現の実在感を高めることができる • FPS低下は実在感を下げる原因となるため、軽量版煙エフェク トや縮小バッファへのレンダリングなどでFPSの担保が必要 • Unity as a Libraryで、Unityを用いた描画表現の追求を 他機能への影響を最小限に抑えながら進められる環境を実現 ARコンテンツの実在感をより高める描画等の技術 • バーチャル展示室やVideo Playback等の制作を支援する機能 • 会場でのバハムート像やエフェクトの最終調整 コンテンツをより良くするための取り組み
80. 80/80