ARコンテンツ作成ハンズオン@Panasonic -UnityとVuforiaではじめるAR-

Panasonic Laboratory Fukuokaでのセミナー資料

Transcript

1. ARコンテンツ作成ハンズオン@Panasonic UnityとVuforiaではじめるAR 九州先端科学技術研究所 吉永崇
2. ARとは(1/2) “Augmented Reality”の略で、日本語で「拡張現実感」 とも呼ばれる。デジタルな情報(CG,音,etc..)を現実空間に 付加する技術全般を指す。特に視覚情報の付加が主流。
3. ARとは(2/2) そこに存在しない物を、あたかも存在するかのように見せる技術 CG
4. AR技術の普及 [最近の動向]  スマートフォンの普及・高性能化によりARが体験可能に  販売促進やゲームでのコンテンツが増えて身近な技術に  Microsoft, Google, Appleが力を入れ始めさらに注目 GPSベースのAR マーカーベースのAR 各種ツールの登場により体験だけでなく開発も身近に
5. 開発ツール：Unity Unityとは  マルチプラットフォーム対応のゲームエンジンおよび開発環境  GUI上で視覚的にCGを配置したり機能を追加したりできる  C#、JavaScriptなど主要なプログラミング言語に対応  アセットストアで高品質なCGやアニメーションを入手できる
6. ARライブラリ：Vuforia Vuforiaとは  ARコンテンツ作成ライブラリ(Android, iOS, HoloLens, etc…)  JavaやC++を用いたネイティブアプリの開発が可能  Unity用のライブラリもありノンプログラミングでの開発も可能  開発方法に関するブログも比較的多い
7. まずはUnityの基本操作
8. 演習用データ • こちらからダウンロードしてください https://goo.gl/7uiAYN
9. Unityのプロジェクトを作成 (1/2) Unityを起動後、画面右上のNEWをクリック New
10. Unityのプロジェクトを作成 (2/2) プロジェクト名・保存場所・3Dを指定してCreate project 3D 最後にクリック プロジェクト名 保存場所
11. Unityの操作画面(概要) ゲーム空間の設計画面
12. ゲーム空間にCGを追加しよう 右クリック 3DObject → Cube
13. 実行してみよう クリックして実行 クリックして終了 カメラから見た空間
14. オブジェクトの位置・向き・サイズを調整 クリックして選択 移動 回転 拡大・縮小
15. Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右 他にもいろいろ → http://goo.gl/Lq1ILT
16. CGの詳細情報の編集：位置の指定 クリック 選択したオブジェクトの 現在の詳細情報→ (x,y,z)を(0,5,0)に  オブジェクトの詳細の 表示・追加・変更は Inspectorで行う  例えば、Transformの Positionを変更すると 位置が変わる
17. CGの詳細情報の編集：色の設定 (1/3) ②右クリック ③ Create マテリアル（色や質感の設定）を作成 ④ Material ①Assets
18. CGの詳細情報の編集：色の設定 (2/3) オブジェクト（Cube）のマテリアルを開く マテリアルが 作成された ② Materials横の▼ ③ Element 0横の ① Cube
19. CGの詳細情報の編集：色の設定 (3/3) オブジェクト（Cube）にマテリアルを割り当てて色を設定 ①先ほど作った マテリアル ②NewMaterial横の▼ ③Albedo ④好きな色を選ぶ
20. CGの詳細情報の編集：物理演算の追加 Add Component 選択したオブジェクトに物理法則(重力)を適用 Physics Rigidbody
21. 実行してみよう
22. 少し遊んでみましょう(1/3) ① 右クリック Plane
23. 少し遊んでみましょう(2/3) 少し傾ける Position (0,0,0) Plane
24. 少し遊んでみましょう(3/3)
25. Sceneの保存 Scene名  [Ctrl]+[s]でダイアログを開き、好きな名前で保存  コンテンツ作成中はこまめに[Ctrl]+[s]すること
26. 不要なCGの削除 Delete 削除したいオブジェクトを選択して[Delete]キー
27. ARコンテンツ作成の基本手順 ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
28. 開発の前に・・・ VuforiaでのARコンテンツ作成には ライセンスキーを事前に作る必要がある → https://developer.vuforia.com/ 1 ① Develop ② License Manager ➂ Get Development Key
29. ライセンスキーの作成 (1/3) ← アプリ名を入力(半角英数) チェック Confirm
30. ライセンスキーの作成 (3/3) ライセンスキーが発行されたことを確認 ライセンスキー クリック ※ライセンスキーは 原則、アプリ毎に 作成する
31. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① VuforiaをUnityに追加
32. VuforiaをUnityに追加 (1/3) [Assets] → [Import Package] → [Custom Package…] →
33. VuforiaをUnityに追加 (2/3) Import
34. VuforiaをUnityに追加 (3/3) Vuforiaフォルダ ができていればOK
35. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
36. webカメラの画像を取得・表示 (1/5)  Main Cameraを削除  代わりにAR用のカメラを 追加(次ページを参照) Delete
37. webカメラの画像を取得・表示 (2/5)  画面左下のAssetsから下記を開く [Vuforia] → [Prefabs]  ARCameraを画面左上の Hierarchyにドラッグ&ドロップ Prefabs
38. webカメラの画像を取得・表示 (3/5)  HierarchyのARCamearaをクリックして Inspector(画面右)を表示  Vuforia Behaviourの[Open Vuforia Configuration]をクリック AR Camera Open Vuforia configuration
39. webカメラの画像を取得・表示 (4/5)  App License Keyに事前にVuforiaの サイトで作成したライセンスキーを 貼りつける License Keyをコピペ
40. webカメラの画像を取得・表示 (5/5) ここにカメラの画像が表示される 実行/停止 ※次の作業に行く前に必ず停止すること(再生ボタンが黒くなっていればOK)
41. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
42. ターゲットのデータって？ 人間にとっては認識しやすいが コンピュータにとっては認識が難しい コンピュータで認識しやすい目印 のデータを作成してあげる
43. ターゲットを作成 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database] VuforiaのDeveloper Portalサイトにアクセス&ログイン
44. ターゲットを作成 (2/5) 1. データベースの名称を指定 2. TypeはDeviceを指定 データベース名 この資料ではTest ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成 Ｃｒｅａｔｅ
45. ターゲットを作成 (3/5) Target Managerから使用するデータベース開く データベースを開く
46. ターゲットを作成 (4/5)  [Add Target]をクリック  Single Imageを選択  ターゲットとして 使用したい画像を選択 (ILoveAR.jpg)  Widthで画像の幅(m)を入力  [Add]をクリック 0.16 0.1
47. ターゲットを作成 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
48. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットのインポート & Sceneに配置 ビデオ映像 ターゲット CG
49. ターゲットをプロジェクトに追加 (1/2) [Assets] → [Import Package] → [Custom Package…] →
50. ターゲットをプロジェクトに追加 (2/2) クリック
51. ターゲットの利用 (1/5) Prefabs  画面左下のAssetsから下記を開く [Vuforia] → [Prefabs]  Image TargetsをHierarchyに ドラッグ&ドロップ
52. ターゲットの利用 (2/5) ② ImageTarget をクリック ① ターゲット(白い板)が出現 ③ DatabaseでTestを選択
53. 現状確認 ImageTarget(白い板)とターゲット(ILoveAR)が関連づいた しかし・・・ ターゲットは真っ白なままなので、ターゲットとCGの向きの 関係をUnityエディタ上で確認するのが困難 現状 理想
54. ターゲットの利用 (3/5) ① Editor → Vuforia → ImageTargetTexture → Test ③ 設定の変更  Texture TypeをDefaultに変更  Texture Shapeを2Dに変更  何処か関係のないところを適当にクリック ② クリック
55. ① Apply ターゲットの利用 (4/5) ② Image Targetをクリック
56. ターゲット画像が 割り当てられる ターゲットの利用 (5/5)
57. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
58. Asset StoreでCGを入手 [Window] → [Asset Store]
59. Asset StoreでCGを入手 Kyleで検索 CGを選択
60. Asset StoreでCGを入手 Download・Import  [Download]でファイルを ダウンロード  [Import]をクリック  Importing package ウィンドウが表示されたら [Import]をクリック Import
61. ターゲットとCGの関連付け (1/2) Robot Kyleが追加される
62. ターゲットとCGの関連付け (2/2)  Assetsから下記を開く [Robot Kyle] →[Model]  Rogot KyleをHierarchy中の ImageTargetにドラッグ&ドロップ Model
63. 確認 NG GOOD ImageTargetの子として登録 ドラッグ&ドロップ 使用するターゲットの子要素 としてCGを追加すること
64. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera デフォルト設定のままだと実行してもCGが表示されない
65. AR起動時のターゲットの利用設定  詳細情報(Inspector)の [Dataset]内で [Load Test Database]と [Activate]のチェックをオン Check
66. 動作確認
67. Unity+Vuforiaのハマリどころ その①： App License Keyの登録を必ず登録 その②： Load xx DatabaseとActivateをオンにする ライセンスキー チェック
68. この後の内容・・・  ターゲットの追加  既存CGの活用  Extended Tracking
69. ターゲットの追加 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database] 再びTarget Managerにアクセスし、Add Databaseを行う
70. Test2 ターゲットの追加 (2/5) 1. NameにTest2と入力 2. TypeはDeviceを指定 データベース名
71. ターゲットの追加 (3/5) Test2を開く
72. ターゲットの追加 (4/5)  [Add Target]をクリック  Single Imageを選択  ターゲットとして 使用したい画像を選択 (stones.jpg)  Widthで画像の幅を入力  [Add]をクリック 0.1
73. ターゲットの追加 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
74. ターゲットのインポート (方法その2) Import をダブルクリックしImport packageを開く
75. 2つ目のターゲットの設定 (1/2) Image TargetsをHierarchyにドラッグ&ドロップ Prefabs
76. 2つ目のターゲットの設定 (2/2)  Hierarchy(画面左)でImageTarget(1)を選択  Inspector内(画面右)でDatabaseを[Test2]にする  操作モードを[移動]にしてターゲットをずらす Image Target(1) 移動 少し横にずらす Test2
77. ターゲットの利用 (3/5) ① Editor → Vuforia → ImageTargetTexture → Test2 ③ 設定の変更  Texture TypeをDefaultに変更  Texture Shapeを2Dに変更  何処か関係のないところを適当にクリック ② クリック
78. ① Apply ターゲットの利用 (4/5) ② Image Target(1)をクリック
79. 手持ちのCGを追加 (1/2) sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ Assets Sampleフォルダ Assets
80. 手持ちのCGを追加 (2/2) augmented_cityをImageTarget(1)に登録 augmented_city
81. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera
82. AR起動時のターゲットの利用設定  詳細情報(Inspector)の [Dataset]内で [Load Test2 Database]と [Activate]のチェックをオン Check
83. 動作確認 先に認識された方のターゲット上にCGが表示される
84. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera
85. 複数のマーカーを同時に使用する Max Simultaneous Tracked Imagesの数値を2に変更 2に変更
86. 動作確認 両方のターゲット上にCGが表示される
87. 実験：ターゲットを隠してみよう ターゲットを認識できなくなるとCGが表示できない 下から見上げたり
88. Extended Trackingを使用 Image Target BehaviourのExtended Trackingをオン Image Target チェック
89. 動作確認 ターゲットを見失ってもある程度は表示を継続
90. 氏名：吉永崇(Takashi Yoshinaga) 所属：九州先端科学技術研究所(ISIT) ほか： ARコンテンツ作成勉強会主催 お問い合わせ： committee@arfukuoka.lolipop.jp #AR_Fukuoka