Vuforia7 and Unity2018

Panasonic Laboratory Fukuokaで開催したハンズオンの資料。Vuforia7とUnityを使ったARコンテンツ開発の基礎。

Transcript

1. ARコンテンツ作成ハンズオン UnityとVuforiaではじめるAR 1,June,2018 @Panasonic Laboratory Fukuoka
2. 自己紹介 氏名：吉永崇(Takashi Yoshinaga) 所属：九州先端科学技術研究所(ISIT) 専門：AR/VRの活用とモーションキャプチャ コミュニティ：ARコンテンツ作成勉強会 主催
3. Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索
4. FacebookグループのxR九州もよろしく
5. ここから本題
6. 開発ツール：Unity Unityとは  マルチプラットフォーム対応のゲームエンジンおよび開発環境  GUI上で視覚的にCGを配置したり機能を追加したりできる  C#によるプログラミングで細かい挙動も記述可能  アセットストアで高品質なCGやアニメーションを入手できる
7. ARライブラリ：Vuforia Vuforiaとは  ARコンテンツ作成ライブラリ(Android, iOS, HoloLens, etc…)  JavaやC++を用いたネイティブアプリの開発が可能  Unity用のライブラリもありノンプログラミングでの開発も可能  開発方法に関するブログも比較的多い
8. 演習環境 • Unity 2018.1.1f1 • Vuforia 7
9. 演習用データ • こちらからダウンロードしてください https://goo.gl/7uiAYN
10. 使用するマーカー
11. まずはUnityの基本操作
12. Unityのプロジェクトを作成 (1/2) Unityを起動後、画面右上のNEWをクリック New
13. Unityのプロジェクトを作成 (2/2) プロジェクト名・保存場所・3Dを指定してCreate project 3D 最後にクリック プロジェクト名 保存場所
14. Unityの操作画面(概要) ゲーム空間の設計画面
15. ゲーム空間にCGを追加しよう 右クリック 3DObject → Cube
16. 実行してみよう クリックして実行 クリックして終了 カメラから見た空間
17. オブジェクトの位置・向き・サイズを調整 クリックして選択 移動 回転 拡大・縮小
18. Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右 他にもいろいろ → http://goo.gl/Lq1ILT
19. CGの詳細情報の編集：位置の指定 クリック 選択したオブジェクトの 現在の詳細情報→ (x,y,z)を(0,5,0)に  オブジェクトの詳細の 表示・追加・変更は Inspectorで行う  例えば、Transformの Positionを変更すると 位置が変わる
20. CGの詳細情報の編集：色の設定 (1/3) ②右クリック ③ Create マテリアル（色や質感の設定）を作成 ④ Material ①Assets
21. CGの詳細情報の編集：色の設定 (2/3) オブジェクト（Cube）のマテリアルを開く マテリアルが 作成された ② Materials横の▼ ③ Element 0横の ① Cube
22. CGの詳細情報の編集：色の設定 (3/3) オブジェクト（Cube）にマテリアルを割り当てて色を設定 ①先ほど作った マテリアル ②NewMaterial横の▼ ③Albedo ④好きな色を選ぶ
23. CGの詳細情報の編集：物理演算の追加 Add Component 選択したオブジェクトに物理法則(重力)を適用 Physics Rigidbody
24. 実行してみよう
25. 少し遊んでみましょう(1/3) ① 右クリック Plane
26. 少し遊んでみましょう(2/3) 少し傾ける Position (0,0,0) Plane
27. 少し遊んでみましょう(3/3)
28. Sceneの保存 コンテンツ作成中はこまめに[Ctrl]+[s]で保存
29. 不要なCGの削除 Delete CubeとPlaneを選択して[Delete]キー
30. ここからAR演習
31. ARコンテンツ作成の基本手順 ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
32. 開発の前に・・・ VuforiaでのARコンテンツ作成には ライセンスキーを事前に作る必要がある → https://developer.vuforia.com/ ① Develop ② License Manager ➂ Get Development Key
33. ライセンスキーの作成 (1/3) ← アプリ名を入力(半角英数) チェック Confirm
34. ライセンスキーの作成 (3/3) ライセンスキーが発行されたことを確認 ライセンスキー クリック ※ライセンスキーは 原則、アプリ毎に 作成する
35. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① Unity上でVuforiaを利用できるようにする
36. Unity上でのVuforia利用設定 (1/3) Player Edit Project Settings
37. Unity上でのVuforia利用設定 (2/3) Vuforia Augmented Realityをオン
38. Unity上でのVuforia利用設定 (3/3) Accept
39. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
40. webカメラの画像を取得・表示 (1/5)  Main Cameraを削除  代わりにAR用のカメラを 追加(次ページを参照) Delete
41. webカメラの画像を取得・表示 (2/5) 右クリック Vuforia AR Camera
42. webカメラの画像を取得・表示 (3/5)  HierarchyのARCamearaをクリック してInspector(画面右)を表示  Vuforia Behaviourの[Open Vuforia Configuration]をクリック AR Camera Open Vuforia configuration
43. webカメラの画像を取得・表示 (4/5) App License Keyに、さきほどVuforia のサイトで作成したライセンスキーを貼る License Keyをコピペ
44. webカメラの画像を取得・表示 (5/5) ここにカメラの画像が表示される 実行/停止 ※次の作業に行く前に必ず停止すること(再生ボタンが黒くなっていればOK)
45. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
46. ターゲットのデータって？ 人間にとっては認識しやすいが コンピュータにとっては認識が難しい コンピュータで認識しやすい目印 のデータを作成してあげる
47. ターゲットを作成 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database] VuforiaのDeveloper Portalサイトにアクセス&ログイン
48. ターゲットを作成 (2/5) 1. データベースの名称を指定 2. TypeはDeviceを指定 データベース名 この資料ではTest ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成 Create
49. ターゲットを作成 (3/5) Target Managerから使用するデータベース開く データベースを開く
50. ターゲットを作成 (4/5)  [Add Target]をクリック  Single Imageを選択  ターゲットとして 使用したい画像を選択 (ILoveAR.jpg)  Widthで画像の幅(m)を入力  [Add]をクリック 0.16 0.1
51. ターゲットを作成 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
52. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットのインポート & Sceneに配置 ビデオ映像 ターゲット CG
53. ターゲットをプロジェクトに追加 (1/2) [Assets] → [Import Package] → [Custom Package…] →
54. ターゲットをプロジェクトに追加 (2/2) クリック
55. ターゲットの利用 (1/2) 右クリック Vuforia Image
56. ターゲットの利用 (2/2) ① ImageTarget をクリック ② DatabaseでTestを選択
57. ① Unity上でVuforiaを利用できるようにする ② 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. 動作確認
65. この後の内容・・・  ターゲットの追加  既存CGの活用  Extended Tracking
66. ターゲットの追加 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database] 再びTarget Managerにアクセスし、Add Databaseを行う
67. Test2 ターゲットの追加 (2/5) 1. NameにTest2と入力 2. TypeはDeviceを指定 データベース名
68. ターゲットの追加 (3/5) Test2を開く
69. ターゲットの追加 (4/5)  [Add Target]をクリック  Single Imageを選択  ターゲットとして 使用したい画像を選択 (stones.jpg)  Widthで画像の幅を入力  [Add]をクリック 0.1
70. ターゲットの追加 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
71. ターゲットのインポート (方法その2) Import をダブルクリックしImport packageを開く
72. 2つ目のターゲットの設定 (1/2) 右クリック Vuforia Image
73. 2つ目のターゲットの設定 (2/2)  HierarchyでImageTarget (２つめ)を選択  Inspector内(画面右)でDatabaseを[Test2]にする  操作モードを[移動]にしてターゲットをずらす Image Target 移動 少し横にずらす Test2
74. 手持ちのCGを追加 (1/2) sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ Assets Sampleフォルダ Assets
75. 手持ちのCGを追加 (2/2) augmented_cityを2つめのImageTargetに登録 augmented_city
76. 動作確認 先に認識された方のターゲット上にCGが表示される
77. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera
78. 複数のマーカーを同時に使用する Max Simultaneous Tracked Imagesの数値を2に変更 2に変更
79. 動作確認 両方のターゲット上にCGが表示される
80. 実験：ターゲットを隠してみよう ターゲットを認識できなくなるとCGが表示できない 下から見上げたり
81. Extended Trackingを使用 Image Target BehaviourのExtended Trackingをオン Kyleが乗っている Image Target チェック
82. 動作確認 ターゲットを見失ってもある程度は表示を継続
83. これからやる事
84. マウスの挙動を取得するスクリプトの作成 右クリック Create Empty スクリプトを記述するためのGame Objectを作成
85. マウスの挙動を取得するスクリプトの追加 Game Object Add Component スクリプトを追加するためAdd Componentをクリック
86. マウスの挙動を取得: Scriptの追加(2/2) New Script TestScript (自由に決めてもOK) Create and Add  GameObjectにスクリプト(プログラム)が追加される  TestScriptをダブルクリックして編集画面を開く
87. マウス押下時にキャラクタを回転させる
88. ボタン押下時検出とCGの回転 public class TestScript : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void Start () { cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { } } 回転 回転 回転 フレームごとにちょっとずつ回転
89. ボタン押下時検出とCGの回転 public class TestScript : MonoBehaviour { GameObject cg; // Start関数は初期化のために一度だけ実行される void Start () { //GameObjectからRobot Kyleを探してcgに代入 cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { //Input.GetMouseButton(0)で左ボタンの押下をチェック if (Input.GetMouseButton (0)) { //Rotate関数でY軸を中心に1度ずつ(0,1,0)回転 cg.transform.Rotate(0,1,0); } } }
90. マウスでCGを移動させる
91. 右クリック時にマウスの位置を取得 GameObject cg; void Start () { //GameObjectからRobot Kyleを探してcgに代入 cg = GameObject.Find ("Robot Kyle"); } void Update () { if (Input.GetMouseButton (0)) { cg.transform.Rotate(new Vector3(0,1,0)); } else if (Input.GetMouseButton (1)) { //Input.mousePositionでマウスのスクリーン座標を取得 //print関数で二次元座標(x, y)を出力 print (Input.mousePosition.x + "," + Input.mousePosition.y); } }
92. 動作確認 右クリックしながら カーソルを移動 Consoleタブに 座標が出力される
93. 今やったこと スクリーン上のカーソルの座標(x,y)を取得 y x Imput.mousePosition で取得した座標(x,y)
94. これからやること Imput.mousePosition で取得した座標(x,y) ここにCGを移動 スクリーン上の座標をマーカー平面上の座標に変換 y x
95. スクリーン座標 → マーカ平面座標の手順の基本  カメラからスクリーン上のカーソルまでのベクトルv ray を取得  v ray がマーカー平面に到達する倍率を算出してv ray にかける a 1倍 2倍 a倍
96. 2次元座標を3次元座標に変換 :コーディング else if (Input.GetMouseButton (1)) { print (Input.mousePosition.x + "," + Input.mousePosition.y); //カメラ中心からスクリーンへの視線方向のベクトルを取得 Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); //rayを用いて倍率を計算 (内積を使用) float a = ray.origin.y / Vector3.Dot(new Vector3(0, -1, 0), ray.direction); //倍率を視線方向のベクトルに掛ける Vector3 pos = ray.origin + ray.direction * a; //算出された座標をCGの位置に反映 cg.transform.position=pos; }
97. キーボード入力によるサイズの変更 void Update () { if (Input.GetMouseButton (0)) { /*CGの回転に関するコード*/ } else if (Input.GetMouseButton (1)) { /*CGの位置指定に関するコード*/ } //Input.GetKeyで現在押しているキーのチェック if (Input.GetKey (KeyCode.UpArrow)) { //CGの表示倍率(localScale)を1.01倍ずつ大きくする cg.transform.localScale *= 1.01f; } else if (Input.GetKey (KeyCode.DownArrow)) { cg.transform.localScale *= 0.99f; } }
98. 完成