ARコンテンツ作成勉強会で使用した資料の主要部分の抜粋

1. ARコンテンツ作成勉強会
#AR_Fukuoka #AR_Miyazaki #AR_Kumamoto #AR_Hiroshima
UnityとVuforiaではじめるAR

2. 演習用データ
• こちらからダウンロードしてください
https://goo.gl/7uiAYN

3. ARコンテンツ作成の基本手順
① VuforiaをUnityに追加
② AR用カメラの設定と画像の表示
③ ターゲット(マーカー)データの作成
④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示
ビデオ映像 ターゲット CG

4. 開発の前に・・・
VuforiaでのARコンテンツ作成には
ライセンスキーを事前に作る必要がある
→ https://developer.vuforia.com/
① Develop
② License Manager
➂ Add License Key

5. ライセンスキーの作成 (1/3)
← Developmentを選択
ライセンス区分として無償版(Development)
と有償版(Consumer or Enterprise)がある
← コンテンツ名
クリック

6. ライセンスキーの作成 (2/3)
Confirm
規約に同意してライセンスキーを発行
チェック

7. ライセンスキーの作成 (3/3)
ライセンスキーが発行されたことを確認
ライセンスキー
クリック
※ライセンスキーは
原則、アプリ毎に
作成する

8. Unityのプロジェクトを作成 (1/2)
Unityを起動後、画面右上のNEW PROJECTをクリック
New

9. Unityのプロジェクトを作成 (2/2)
プロジェクト名・保存場所・3Dを指定してCreate project
3D
最後に
CreateProject
プロジェクト名
保存場所

10. ① VuforiaをUnityに追加
② AR用カメラの設定と画像の表示
③ ターゲット(マーカー)データの作成
④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示
ARコンテンツ作成の基本手順
ビデオ映像 ターゲット CG
① VuforiaをUnityに追加

11. VuforiaをUnityに追加 (1/3)
[Assets]
→ [Import Package]
→ [Custom Package…]
→

12. VuforiaをUnityに追加 (2/3)
Import

13. VuforiaをUnityに追加 (3/3)
Vuforiaフォルダ
ができていればOK

14. ① VuforiaをUnityに追加
② AR用カメラの設定と画像の表示
③ ターゲット(マーカー)データの作成
④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示
ARコンテンツ作成の基本手順
② AR用カメラの設定と画像の表示
ビデオ映像 ターゲット CG

15. webカメラの画像を取得・表示 (1/5)
 Main Cameraを削除
 代わりにAR用のカメラを
追加(次ページを参照)
Delete

16. webカメラの画像を取得・表示 (2/5)
 画面左下のAssetsから下記を開く
[Vuforia] → [Prefabs]
 ARCameraを画面左上の
Hierarchyにドラッグ&ドロップ
Prefabs

17. webカメラの画像を取得・表示 (3/5)
 HierarchyのARCamearaをクリックして
Inspector(画面右)を表示
 Vuforia Behaviourの[Open Vuforia
Configuration]をクリック
AR Camera
Open Vuforia configuration

18. webカメラの画像を取得・表示 (4/5)
 App License Keyに事前にVuforiaの
サイトで作成したライセンスキーを
貼りつける
License Keyをコピペ

19. webカメラの画像を取得・表示 (5/5)
ここにカメラの画像が表示される
実行/停止
※次の作業に行く前に必ず停止すること(再生ボタンが黒くなっていればOK)

20. ① VuforiaをUnityに追加
② AR用カメラの設定と画像の表示
③ ターゲット(マーカー)データの作成
④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示
ARコンテンツ作成の基本手順
③ ターゲット(マーカー)データの作成
ビデオ映像 ターゲット CG

21. ターゲットのデータって？
人間にとっては認識しやすいが
コンピュータにとっては認識が難しい
コンピュータで認識しやすい目印
のデータを作成してあげる

22. ターゲットを作成 (1/5)
以下の順にクリック
[Develop]
→ [Target Manager]
→ [Add Database]
VuforiaのDeveloper Portalサイトにアクセス&ログイン

23. ターゲットを作成 (2/5)
1. データベースの名称を指定
2. TypeはDeviceを指定
データベース名
この資料ではTest
ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成
Ｃｒｅａｔｅ

24. ターゲットを作成 (3/5)
Target Managerから使用するデータベース開く
データベースを開く

25. ターゲットを作成 (4/5)
 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして
使用したい画像を選択
(ILoveAR.jpg)
 Widthで画像の幅(m)を入力
 [Add]をクリック
0.160.1

26. ターゲットを作成 (5/5)
[Download Dataset]
→ [Unity Editor]
→ [Download]
分かり易い場所に保存

27. ① VuforiaをUnityに追加
② AR用カメラの設定と画像の表示
③ ターゲット(マーカー)データの作成
④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示
ARコンテンツ作成の基本手順
④ ターゲットのインポート & Sceneに配置
ビデオ映像 ターゲット CG

28. ターゲットをプロジェクトに追加 (1/2)
[Assets]
→ [Import Package]
→ [Custom Package…]
→

29. ターゲットをプロジェクトに追加 (2/2)
クリック

30. ターゲットの利用 (1/5)
Prefabs
 画面左下のAssetsから下記を開く
[Vuforia] → [Prefabs]
 Image TargetsをHierarchyに
ドラッグ&ドロップ

31. ターゲットの利用 (2/5)
② ImageTarget
をクリック
① ターゲット(白い板)が出現
③ DatabaseでTestを選択

32. 現状確認
ImageTarget(白い板)とターゲット(Test/ILoveAR)
が関連づいた
しかし・・・
ターゲットは真っ白なままなので、ターゲットとCGの
向きの関係をUnityエディタ上で確認するのが困難
現状 理想

33. ターゲットの利用 (3/5)
① Editor → QCAR → ImageTargetTexture → Test
③ 設定の変更
 Texture TypeをDefaultに変更
 Texture Shapeを2Dに変更
 何処か関係のないところを適当にクリック
② クリック

34. ① Apply
ターゲットの利用 (4/5)
② Image Targetをクリック

35. ターゲット画像が
割り当てられる
ターゲットの利用 (5/5)

36. ① VuforiaをUnityに追加
② AR用カメラの設定と画像の表示
③ ターゲット(マーカー)データの作成
④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示
ARコンテンツ作成の基本手順
⑤ CGとターゲットを関連付けてAR表示
ビデオ映像 ターゲット CG

37. Asset StoreでCGを入手
[Window]
→ [Asset Store]

38. Asset StoreでCGを入手
Kyleで検索
CGを選択

39. Asset StoreでCGを入手
Download・Import
 [Download]でファイルを
ダウンロード
 [Import]をクリック
 Importing package
ウィンドウが表示されたら
[Import]をクリック
Import

40. ターゲットとCGの関連付け (1/2)
Robot Kyleが追加される

41. ターゲットとCGの関連付け (2/2)
 Assetsから下記を開く
[Robot Kyle] →[Model]
 Rogot KyleをHierarchy中の
ImageTargetにドラッグ&ドロップ
Model

42. 確認
NGGOOD
ImageTargetの子として登録
ドラッグ&ドロップ
使用するターゲットの子要素
としてCGを追加すること

43. AR起動時のターゲットの利用設定
 AR Cameraをクリック
 詳細情報(Inspector)の
Open Vuforia configuration
をクリック
② Open Vuforia configuration
① AR Camera
デフォルト設定のままだと実行してもCGが表示されない

44. AR起動時のターゲットの利用設定
 詳細情報(Inspector)の
[Dataset]内で
[Load Test Database]と
[Activate]のチェックをオン
Check

45. 動作確認

46. Unity+Vuforiaのハマリどころ
その①： App License Keyの登録を必ず登録
その②： Load xx DatabaseとActivateをオンにする
ライセンスキー
チェック

47. この後の内容・・・
 ターゲットの追加
 既存CGの活用
 Extended Tracking

48. ターゲットの追加 (1/5)
以下の順にクリック
[Develop]
→ [Target Manager]
→ [Add Database]
再びTarget Managerにアクセスし、Add Databaseを行う

49. Test2
ターゲットの追加 (2/5)
1. NameにTest2と入力
2. TypeはDeviceを指定
データベース名

50. ターゲットの追加 (3/5)
Test2を開く

51. ターゲットの追加 (4/5)
 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして
使用したい画像を選択
(stones.jpg)
 Widthで画像の幅を入力
 [Add]をクリック
0.1

52. ターゲットの追加 (5/5)
[Download Dataset]
→ [Unity Editor]
→ [Download]
分かり易い場所に保存

53. ターゲットのインポート (方法その2)
Import
をダブルクリックしImport packageを開く

54. 2つ目のターゲットの設定 (1/2)
Image TargetsをHierarchyにドラッグ&ドロップ
Prefabs

55. 2つ目のターゲットの設定 (2/2)
 Hierarchy(画面左)でImageTarget(1)を選択
 Inspector内(画面右)でDatabaseを[Test2]にする
 操作モードを[移動]にしてターゲットをずらす
Image Target(1)
移動
少し横にずらす Test2

56. ターゲットの利用 (3/5)
① Editor → QCAR → ImageTargetTexture → Test
③ 設定の変更
 Texture TypeをDefaultに変更
 Texture Shapeを2Dに変更
 何処か関係のないところを適当にクリック
② クリック

57. ① Apply
ターゲットの利用 (4/5)
② Image Target(1)をクリック

58. 手持ちのCGを追加 (1/2)
sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ
Assets
Sampleフォルダ
Assets

59. 手持ちのCGを追加 (2/2)
augmented_cityをImageTarget(1)に登録
augmented_city

60. AR起動時のターゲットの利用設定
 AR Cameraをクリック
 詳細情報(Inspector)の
Open Vuforia configuration
をクリック
② Open Vuforia configuration
① AR Camera

61. AR起動時のターゲットの利用設定
 詳細情報(Inspector)の
[Dataset]内で
[Load Test2 Database]と
[Activate]のチェックをオン
Check

62. 動作確認
先に認識された方のターゲット上にCGが表示される

63. AR起動時のターゲットの利用設定
 AR Cameraをクリック
 詳細情報(Inspector)の
Open Vuforia configuration
をクリック
② Open Vuforia configuration
① AR Camera

64. 複数のマーカーを同時に使用する
Max Simultaneous Tracked Imagesの数値を2に変更
2に変更

65. 動作確認
両方のターゲット上にCGが表示される

66. 実験：ターゲットを隠してみよう
ターゲットを認識できなくなるとCGが表示できない
下から見上げたり

67. Extended Trackingを使用
Image Target BehaviourのExtended Trackingをオン
Image Target
チェック

68. 動作確認
ターゲットを見失ってもある程度は表示を継続

69. 参考
• Unity
http://japan.unity3d.com/
• Vuforia
https://developer.vuforia.com/
• 演習用データ
https://goo.gl/7uiAYN
• ARコンテンツ作成勉強会
http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/