Tweet
Tweet

Slide 1

Slide 1 text

1/80 エンジニアリング 全高3m超のバハムート像がスマホを通して躍動する！ ～『Cygames展 Artworks』ARコンテンツの開発プロセスと実装 ～ CTO室 エンジニア / 平野孝則 スキャンスタジオ 3Dスキャンマネージャー / 遠藤 嘉和

Slide 2

Slide 2 text

2/80 Cygames展 Artworksのガイドアプリ ARコンテンツの開発事例 本講演でお伝えすること 開発プロセス 実装手段 ARコンテンツを 作るための 全高3mのバハムート像を フォトスキャンした精密な3Dモデルを準備 ARにおける高精度なトラッキングと 高精細な3D表現を実現 の紹介

Slide 3

Slide 3 text

3/80 平野 孝則 CTO室 / エンジニア 2018年に株式会社Cygamesへ合流し、 各種技術の検証や実用化を経験。 Cygames展 ArtworksではAR施策における開発業 務を担当し、AR演出に関する技術検証とコンテンツ 開発を行っている。 遠藤 嘉和 スキャンスタジオ / 3Dスキャンマネージャー 2018年に株式会社Cygamesへ合流。 スキャンスタジオ責任者兼エンジニアとして、社内プ ロジェクト向けにスキャンデータの提供を行っている。 Cygames展 ArtworksではAR施策における 3Dスキャンを担当。 自己紹介

Slide 4

Slide 4 text

4/80 1. ARコンテンツ開発の流れ 2. 3mのバハムート像をトラッキングする方法 3. ARコンテンツを支えた3Dスキャン 4. ARコンテンツの実在感を高めるために 5. コンテンツをより良くするために 6. 今回のまとめ アジェンダ

Slide 5

Slide 5 text

5/80 Cygames展 Artworksとは? 『神撃のバハムート』『グランブルーファンタジー』など Cygamesの人気ゲームのアートワークが集結し 「最高のコンテンツの系譜」をたどる美術展 開催期間: 2023/09/02 (土) ～ 2023/10/03 (火) 場所:上野の森美術館

Slide 6

Slide 6 text

6/80 Cygames展 公式ガイドアプリ 展示内容をさらに楽しめる専用の公式ガイドアプリを 開催に合わせて期間限定リリース 館内マップ・展示ガイド 人気キャラクターたちによる音声ガイド

Slide 7

Slide 7 text

7/80 公式ガイドアプリのARコンテンツ

Slide 8

Slide 8 text

8/80 ARコンテンツ開発の流れ

Slide 9

Slide 9 text

9/80 技 術 検 証 本 制 作 仕 上 げ 最 終 調 整 準 備 会 場 で の 最 終 調 整 リ リ ー ス プ ロ ト タ イ プ 制 作 企 画 詰 め ARコンテンツ開発の流れ

Slide 10

Slide 10 text

10/80 技術検証 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め • 3mの立体物に対するAR表現の知見が社内にない • 企画が実現できるかがわからない どのような技術を用いれば実現できるか、 具体的な調査および検証を行う

Slide 11

Slide 11 text

11/80 プロトタイプ制作/企画詰め 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め エンジニアがUnity上で演出案を試作し 演出の見た目を確認 演出の実装方法や企画内容の方向性を決定 稲妻 マグマの光の照り返し 噴煙

Slide 12

Slide 12 text

12/80 本制作 エ ン ジ ニ ア が 組 み 込 み ア ー テ ィ ス ト が エ フ ェ ク ト 作 成 演 出 案 を 確 定 絵 コ ン テ 作 成 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め

Slide 13

Slide 13 text

13/80 仕上げ/最終調整準備 最終調整用のツール を作成 端末での動作確認を実施 描画処理の最適化 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め

Slide 14

Slide 14 text

14/80 会場での最終調整 • 会場でのバハムート像の 組み立てに立ち会い、 像の組み立て調整を依頼 • 現地の照明などの状況に 合わせてアーティストと 煙の濃さ等の最終調整を行う 技術検証 本制作 仕上げ 最終調整準備 会場での最終調整 リリース プロトタイプ制作 企画詰め

Slide 15

Slide 15 text

15/80 ARコンテンツ開発の流れ ARコンテンツの開発では試行錯誤とチャレンジ を行い、様々な知見を得ることができた 技 術 検 証 本 制 作 仕 上 げ 最 終 調 整 準 備 会 場 で の 最 終 調 整 リ リ ー ス プ ロ ト タ イ プ 制 作 企 画 詰 め

Slide 16

Slide 16 text

16/80 以下の知見をより具体的に解説する 1. 3mのバハムート像をトラッキングする方法 2. ARコンテンツを支えた3Dスキャン 3. ARコンテンツの実在感を高めるために 4. コンテンツをより良くするために 得られた知見について

Slide 17

Slide 17 text

17/80 3mのバハムート像を トラッキングする方法

Slide 18

Slide 18 text

18/80 現実世界の環境やオブジェクトを検出し その位置や動きを追跡する技術 トラッキングとは？ ARコンテンツでは、 カメラに映った映像に対して 3D演出を行う これを実現するために トラッキング技術が必要 ARコンテンツ カメラに映った映像 3D演出 トラッキング

Slide 19

Slide 19 text

19/80 トラッキング技術の大まかな区分 Image Tracking ⚫ 2Dの画像(マーカー、ポスター等)を認識 させる VPS ⚫ GPSやカメラ映像から高精度に位置情報を 推定する 3D Object Tracking ⚫ 立体物を認識させる

Slide 20

Slide 20 text

20/80 トラッキングにおける技術選定 3D Object Tracking 調査を実施 Image Tracking VPS ⚫ 立体物はターゲットにできない ⚫ ポスター等と像を同時に映すのが難しい 立体物はターゲットにできない ポスター等と像を同時に映すのが難しい ⚫ 立体物はターゲットにできない ⚫ ポスター等と像を同時に映すのが難しい 街中にキャラクターを登場させる用途向き 屋内イベントでの利用には不向き

Slide 21

Slide 21 text

21/80 トラッキングの技術要件 1. Android/iOS 両方で利用できる あ 2. トラッキング対象の設定が容易 あ 3. 全高3mのバハムート像を安定して トラッキングできる

Slide 22

Slide 22 text

22/80 トラッキング技術要件を満たした製品 1. Android/iOS 両方で利用できる 2. トラッキング対象の設定が容易 3. 全高3mのバハムート像を安定してトラッキングできる or Vuforia EasyAR

Slide 23

Slide 23 text

23/80 検証結果 トラッキング技術選定: 精度の検証 Vuforia • 高精度にトラッキングできる EasyAR • 十分な精度が出ない • はっきりした模様のテクス チャを持つ単純な立体形状 の認識が得意 • バハムート像のように複雑 なテクスチャを持つ形状の 認識には不向き

Slide 24

Slide 24 text

24/80 トラッキング技術選定 技術選定 実用性検証 採用 or 諦める Vuforia

Slide 25

Slide 25 text

25/80 実用性検証を進める上での課題 バハムート像での検証を待っていては コンテンツ制作が間に合わない！ • バハムート像は巨大(全高3m) • 制作にはそれなりの期間を要する • 完成は本番直前というスケジュールで制作進行中 本番のバハムート像はまだ無い

Slide 26

Slide 26 text

26/80 実用性検証の進行 3m程度の 他の物体での検証 形状の影響 : 調査不可 スケールの影響 : 調査可 ミニチュア バハムート像での検証 形状の影響 : 調査可 スケールの影響 : 調査不可 検証を「スケール」と「形状」に分け それぞれのトラッキングへの影響を調査する

Slide 27

Slide 27 text

27/80 スケールに関する検証 約3mの大きな物体であっても 十分高い精度でトラッキング可能 • 自宅近辺の公園を検証に利用 • 3m相当の3Dデータを作成し、どの程度トラッキングできるかを検証 本番に近い約3mの対象物でトラッキングを検証

Slide 28

Slide 28 text

28/80 形状に関する検証 ミニチュアを用いて Vuforiaの認識精度を検証 高さ 約30cm

Slide 29

Slide 29 text

29/80 1/10バハムート像での検証結果 認識自体はされたが、認識位置に大きなずれが発生

Slide 30

Slide 30 text

30/80 1/10バハムート像はなぜズレたのか？ 3Dモデルとミニチュアの形状に 差異があった 原 因 3Dデータと造形物の形状が 同一にならない可能性が高い 懸 念 実際の造形物と同一形状の 3Dモデルを用意する必要がある 対 策

Slide 31

Slide 31 text

31/80 ズレへの対応策 Cygames社内のスキャンスタジオに 造形物の3Dデータ化を依頼して検証する • 3Dデータを元に造形物を作成しても、 制作工程上3Dデータとのズレが発生する • 作成した造形物を元に3Dデータを作り直し、 トラッキングや表示を行うようにする

Slide 32

Slide 32 text

32/80 トラッキング精度も問題なく、十分な品質が担保できる スキャンした3Dデータで検証

Slide 33

Slide 33 text

33/80 実用性検証の結果 スケールが近い物体での検証 問題なし 技術選定 実用性検証 採用 Vuforia ミニチュアでの検証 問題なし

Slide 34

Slide 34 text

34/80 ARコンテンツを支えた 3Dスキャン

Slide 35

Slide 35 text

35/80 ARコンテンツを支えた3Dスキャン 1. 検証からデータ生成までの流れ 2. 技術検証用のミニチュアスキャン 3. 課題の洗い出しと本番に向けた準備 4. 実物のスキャン

Slide 36

Slide 36 text

36/80 検証からデータ生成までの流れ ミニチュア撮影 撮影準備 本番 データ生成

Slide 37

Slide 37 text

37/80 技術検証用のミニチュアスキャン

Slide 38

Slide 38 text

38/80 スキャン方法 スキャンにフォトグラメトリーを選択した理由 技術検証用にテクスチャが必要 本番の実物サイズを考慮

Slide 39

Slide 39 text

39/80 スキャンデータ生成 撮影カメラ位置

Slide 40

Slide 40 text

40/80 ミニチュア生成データ①

Slide 41

Slide 41 text

41/80 ミニチュア生成データ②

Slide 42

Slide 42 text

42/80 実物の撮影における課題 実物のバハムート像は大きい 高さは約3ｍ、上面の撮影が困難 エフェクト表現に高品質なテクスチャが必要 スキャン可能かどうかは素材次第

Slide 43

Slide 43 text

43/80 課題の解決策 実物のバハムート像 は大きい 大きい被写体には 広角レンズを使用

Slide 44

Slide 44 text

44/80 課題の解決策 エフェクト表現に 高品質なテクスチャ 必要 フォトグラメトリーに ストロボを使用 自社開発ストロボ機材 スキャン方法：フォトグラメトリー

Slide 45

Slide 45 text

45/80 手持ち撮影装置 自社開発ストロボ機材 スキャン方法：フォトグラメトリー

Slide 46

Slide 46 text

46/80 課題の解決策 スキャン可能か どうかは素材次第 本番のスキャンを 段階的に実施

Slide 47

Slide 47 text

47/80 スキャンの流れ パーツ 組み上げ 未塗装 組み上げ 塗装済

Slide 48

Slide 48 text

48/80 スキャン準備 ローリングタワー

Slide 49

Slide 49 text

49/80 スキャン用機材

Slide 50

Slide 50 text

50/80 撮影現場 ※塗装完成前のバハムートをスキャン

Slide 51

Slide 51 text

51/80 バハムート:スキャンデータ

Slide 52

Slide 52 text

52/80 バハムート:スキャンデータ 高さ:約3m 幅:約6m

Slide 53

Slide 53 text

53/80 バハムート:スキャンデータ ※塗装完成前のバハムートをスキャン ※塗装完成前のバハムートをスキャン

Slide 54

Slide 54 text

54/80 バハムート:頭部

Slide 55

Slide 55 text

55/80 バハムート：背中

Slide 56

Slide 56 text

56/80 ARコンテンツの 実在感を高めるために

Slide 57

Slide 57 text

57/80 ARコンテンツの実在感を高めるために 主な検証ポイント 1. ライティング（稲妻やマグマによる照り返し） 2. オクルージョン 3. 軽量版煙エフェクト 4. Unity as a Library

Slide 58

Slide 58 text

58/80 ARコンテンツの実在感を高めるために ライティング （稲妻やマグマによる照り返し） オクルージョン

Slide 59

Slide 59 text

59/80 ARコンテンツの実在感を高めるために 煙エフェクト (バハムート像の下半分を 囲うような形で配置されている) 軽量版煙エフェクト

Slide 60

Slide 60 text

60/80 ライティング（稲妻やマグマの照り返し） 展示されたバハムート像を実際に光らせることはできないので、 スキャンした3Dデータに対して専用の光源計算を行い、 その結果をカメラ画像に重ねる形でライティングを行う • 専用のシェーダーを作成して、 スキャンしたバハムート像の 3Dデータへ適応 • 精細な陰影表現のため ノーマルマップを適応 • Specular/Diffuseを計算し、 カメラ画像に加算描画する

Slide 61

Slide 61 text

61/80 オクルージョン 噴煙や雷は バハムートの背後にも 出現 オクルージョン なし オクルージョン あり バハムートに エフェクトが隠れると 実在感がより高まる

Slide 62

Slide 62 text

62/80 足下の煙エフェクトの描画負荷が原因 煙エフェクトの軽量版を実装 軽量版煙エフェクト 一部端末で FPSが低下する現象が発生

Slide 63

Slide 63 text

63/80 軽量版煙エフェクト: 実装 縮小バッファを用いた最適化 実機検証し FPS低下が改善することを確認 • 低解像度のテクスチャに煙を描画、 拡大して画面に合成 • URPのカスタムパスとして実装

Slide 64

Slide 64 text

64/80 軽量版煙エフェクト: 問題点 一部箇所のオクルージョンが甘くなる 通常版 軽量版 溶岩が見えている

Slide 65

Slide 65 text

65/80 軽量版煙エフェクト: 対応策 FPSが低下しない端末では通常版を再生 処理落ちを検出して軽量版に自動切り替え 処理落ちを検知する仕組みを実装 最終的な切り替え条件 45フレーム以上25FPS以下の状態が持続した場合 切り替え条件を調整して誤発動を抑制

Slide 66

Slide 66 text

66/80 ガイドアプリはKotlin Multiplatformを用いた ネイティブアプリとして開発を進めていた AR演出をアプリへ組み込むために • 手触りを重視するため、ガイドアプリ自体は他チームにて ネイティブアプリでの開発が進んでいた • しかしKotlin Multiplatformでは、複雑な3D演出を行うのは難しい • ARコンテンツをより高クオリティなものに仕上げるためには、 社内に多くの知見が貯まっているUnityを使用したいという思惑が

Slide 67

Slide 67 text

67/80 Unity as a Library Unityで開発した機能をモジュール化し iOSやAndroidなどのネイティブアプリに 組み込むことができる技術のこと 既存アプリにUnityで開発した機能を追加できる この技術を用いると Unityが得意とする機能の開発だけにUnityが使える

Slide 68

Slide 68 text

68/80 ガイドアプリでのUaaLの活用 ARコンテンツの開発にUnityを使用 社内のUnityの知見をARコンテンツ開発に活用しつつ 他機能の開発への影響を最小限に抑えられた

Slide 69

Slide 69 text

69/80 コンテンツをより良くするために

Slide 70

Slide 70 text

70/80 ARコンテンツ開発の実際の流れ 本章ではコンテンツ開発を通じて得られた ARコンテンツをより良くするための手法を紹介する 技 術 検 証 本 制 作 仕 上 げ 最 終 調 整 準 備 会 場 で の 最 終 調 整 リ リ ー ス プ ロ ト タ イ プ 制 作 企 画 詰 め

Slide 71

Slide 71 text

71/80 プロトタイプ制作における課題 スケールが異なりすぎるため AR演出案を正確に評価することは困難 本番のバハムート像はまだ無い

Slide 72

Slide 72 text

72/80 解決策としてバーチャル展示室を準備 バーチャル展示室 バハムート像周辺の 会場レイアウトをUnity上に再現 実際の会場の状況に近い形で 見栄えが確認できた

Slide 73

Slide 73 text

73/80 演出を確認しやすい環境を整える • トラッキング対象の物体がないと再生できない • 現物で頻繁にプレビューするのは難があった • ミニチュアでさえも設置場所に制約がある AR演出はプレビューが難しい • Vuforiaの機能のひとつ • 動画データをもとにUnityエディタ上でAR演出を再生できる 解決策: Video Playback機能を使用

Slide 74

Slide 74 text

74/80 演出を確認しやすい環境を整える

Slide 75

Slide 75 text

75/80 会場での最終調整 バハムート像は分解して会場に搬入するため 3Dスキャンのモデルと同じ形に組み上がるよう ARアプリで認識精度を確認しながらの調整が必要だった 現地で組み立てたバハムート像の 形状チェック・調整 会場の照明その他環境に合わせた エフェクトの最終調整

Slide 76

Slide 76 text

76/80 まとめ

Slide 77

Slide 77 text

77/80 まとめ 開発の過程で得られた知見 • 技術検証 → プロトタイプ制作/企画詰め → 本制作 → 仕上げ/最終調整準備 → 会場での最終調整 の流れで進行 ARコンテンツの開発事例を紹介 • 3mのバハムート像をトラッキングする方法 • 巨大なバハムート像を高精細に3Dスキャンする方法 • ARコンテンツの実在感をより高める描画等の技術 • コンテンツ制作を円滑に進めるために必要な取り組み

Slide 78

Slide 78 text

78/80 まとめ 巨大なバハムート像を高精細に3Dスキャンする方法 • 今回の要件ではVuforiaを用いるのが最適だと分かった • Vuforiaで3D Object Trackingの精度を高めるためには 造形物の3Dデータ化が不可欠であった 3mのバハムート像をトラッキングする方法 • 今回の要件ではフォトグラメトリーが適していた • 広角レンズや自社開発のストロボ機材、移動式の足場等の 機材を駆使することで効率的に撮影を進めることができた • 未塗装の段階からテスト撮影を行い、確実にスキャンできる 計画を立てながら3Dスキャンを実施

Slide 79

Slide 79 text

79/80 まとめ • 3Dスキャンデータを用いてライティングやオクルージョンを 行うことで、AR表現の実在感を高めることができる • FPS低下は実在感を下げる原因となるため、軽量版煙エフェク トや縮小バッファへのレンダリングなどでFPSの担保が必要 • Unity as a Libraryで、Unityを用いた描画表現の追求を 他機能への影響を最小限に抑えながら進められる環境を実現 ARコンテンツの実在感をより高める描画等の技術 • バーチャル展示室やVideo Playback等の制作を支援する機能 • 会場でのバハムート像やエフェクトの最終調整 コンテンツをより良くするための取り組み

Slide 80

Slide 80 text

80/80