Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]

20,288 views

Published on

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

Published in: Technology

ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]

  1. 1. ARコンテンツ作成勉強会 #AR_Fukuoka #AR_Miyazaki #AR_Kumamoto #AR_Hiroshima UnityとVuforiaではじめるAR
  2. 2. 演習用データ • こちらからダウンロードしてください https://goo.gl/7uiAYN
  3. 3. ARコンテンツ作成の基本手順 ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
  4. 4. 開発の前に・・・ VuforiaでのARコンテンツ作成には ライセンスキーを事前に作る必要がある → https://developer.vuforia.com/ ① Develop ② License Manager ➂ Add License Key
  5. 5. ライセンスキーの作成 (1/3) ← Developmentを選択 ライセンス区分として無償版(Development) と有償版(Consumer or Enterprise)がある ← コンテンツ名 クリック
  6. 6. ライセンスキーの作成 (2/3) Confirm 規約に同意してライセンスキーを発行 チェック
  7. 7. ライセンスキーの作成 (3/3) ライセンスキーが発行されたことを確認 ライセンスキー クリック ※ライセンスキーは 原則、アプリ毎に 作成する
  8. 8. Unityのプロジェクトを作成 (1/2) Unityを起動後、画面右上のNEW PROJECTをクリック New
  9. 9. Unityのプロジェクトを作成 (2/2) プロジェクト名・保存場所・3Dを指定してCreate project 3D 最後に CreateProject プロジェクト名 保存場所
  10. 10. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① VuforiaをUnityに追加
  11. 11. VuforiaをUnityに追加 (1/3) [Assets] → [Import Package] → [Custom Package…] →
  12. 12. VuforiaをUnityに追加 (2/3) Import
  13. 13. VuforiaをUnityに追加 (3/3) Vuforiaフォルダ ができていればOK
  14. 14. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
  15. 15. webカメラの画像を取得・表示 (1/5)  Main Cameraを削除  代わりにAR用のカメラを 追加(次ページを参照) Delete
  16. 16. webカメラの画像を取得・表示 (2/5)  画面左下のAssetsから下記を開く [Vuforia] → [Prefabs]  ARCameraを画面左上の Hierarchyにドラッグ&ドロップ Prefabs
  17. 17. webカメラの画像を取得・表示 (3/5)  HierarchyのARCamearaをクリックして Inspector(画面右)を表示  Vuforia Behaviourの[Open Vuforia Configuration]をクリック AR Camera Open Vuforia configuration
  18. 18. webカメラの画像を取得・表示 (4/5)  App License Keyに事前にVuforiaの サイトで作成したライセンスキーを 貼りつける License Keyをコピペ
  19. 19. webカメラの画像を取得・表示 (5/5) ここにカメラの画像が表示される 実行/停止 ※次の作業に行く前に必ず停止すること(再生ボタンが黒くなっていればOK)
  20. 20. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
  21. 21. ターゲットのデータって? 人間にとっては認識しやすいが コンピュータにとっては認識が難しい コンピュータで認識しやすい目印 のデータを作成してあげる
  22. 22. ターゲットを作成 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database] VuforiaのDeveloper Portalサイトにアクセス&ログイン
  23. 23. ターゲットを作成 (2/5) 1. データベースの名称を指定 2. TypeはDeviceを指定 データベース名 この資料ではTest ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成 Create
  24. 24. ターゲットを作成 (3/5) Target Managerから使用するデータベース開く データベースを開く
  25. 25. ターゲットを作成 (4/5)  [Add Target]をクリック  Single Imageを選択  ターゲットとして 使用したい画像を選択 (ILoveAR.jpg)  Widthで画像の幅(m)を入力  [Add]をクリック 0.160.1
  26. 26. ターゲットを作成 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
  27. 27. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットのインポート & Sceneに配置 ビデオ映像 ターゲット CG
  28. 28. ターゲットをプロジェクトに追加 (1/2) [Assets] → [Import Package] → [Custom Package…] →
  29. 29. ターゲットをプロジェクトに追加 (2/2) クリック
  30. 30. ターゲットの利用 (1/5) Prefabs  画面左下のAssetsから下記を開く [Vuforia] → [Prefabs]  Image TargetsをHierarchyに ドラッグ&ドロップ
  31. 31. ターゲットの利用 (2/5) ② ImageTarget をクリック ① ターゲット(白い板)が出現 ③ DatabaseでTestを選択
  32. 32. 現状確認 ImageTarget(白い板)とターゲット(Test/ILoveAR) が関連づいた しかし・・・ ターゲットは真っ白なままなので、ターゲットとCGの 向きの関係をUnityエディタ上で確認するのが困難 現状 理想
  33. 33. ターゲットの利用 (3/5) ① Editor → QCAR → ImageTargetTexture → Test ③ 設定の変更  Texture TypeをDefaultに変更  Texture Shapeを2Dに変更  何処か関係のないところを適当にクリック ② クリック
  34. 34. ① Apply ターゲットの利用 (4/5) ② Image Targetをクリック
  35. 35. ターゲット画像が 割り当てられる ターゲットの利用 (5/5)
  36. 36. ① VuforiaをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
  37. 37. Asset StoreでCGを入手 [Window] → [Asset Store]
  38. 38. Asset StoreでCGを入手 Kyleで検索 CGを選択
  39. 39. Asset StoreでCGを入手 Download・Import  [Download]でファイルを ダウンロード  [Import]をクリック  Importing package ウィンドウが表示されたら [Import]をクリック Import
  40. 40. ターゲットとCGの関連付け (1/2) Robot Kyleが追加される
  41. 41. ターゲットとCGの関連付け (2/2)  Assetsから下記を開く [Robot Kyle] →[Model]  Rogot KyleをHierarchy中の ImageTargetにドラッグ&ドロップ Model
  42. 42. 確認 NGGOOD ImageTargetの子として登録 ドラッグ&ドロップ 使用するターゲットの子要素 としてCGを追加すること
  43. 43. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera デフォルト設定のままだと実行してもCGが表示されない
  44. 44. AR起動時のターゲットの利用設定  詳細情報(Inspector)の [Dataset]内で [Load Test Database]と [Activate]のチェックをオン Check
  45. 45. 動作確認
  46. 46. Unity+Vuforiaのハマリどころ その①: App License Keyの登録を必ず登録 その②: Load xx DatabaseとActivateをオンにする ライセンスキー チェック
  47. 47. この後の内容・・・  ターゲットの追加  既存CGの活用  Extended Tracking
  48. 48. ターゲットの追加 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database] 再びTarget Managerにアクセスし、Add Databaseを行う
  49. 49. Test2 ターゲットの追加 (2/5) 1. NameにTest2と入力 2. TypeはDeviceを指定 データベース名
  50. 50. ターゲットの追加 (3/5) Test2を開く
  51. 51. ターゲットの追加 (4/5)  [Add Target]をクリック  Single Imageを選択  ターゲットとして 使用したい画像を選択 (stones.jpg)  Widthで画像の幅を入力  [Add]をクリック 0.1
  52. 52. ターゲットの追加 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
  53. 53. ターゲットのインポート (方法その2) Import をダブルクリックしImport packageを開く
  54. 54. 2つ目のターゲットの設定 (1/2) Image TargetsをHierarchyにドラッグ&ドロップ Prefabs
  55. 55. 2つ目のターゲットの設定 (2/2)  Hierarchy(画面左)でImageTarget(1)を選択  Inspector内(画面右)でDatabaseを[Test2]にする  操作モードを[移動]にしてターゲットをずらす Image Target(1) 移動 少し横にずらす Test2
  56. 56. ターゲットの利用 (3/5) ① Editor → QCAR → ImageTargetTexture → Test ③ 設定の変更  Texture TypeをDefaultに変更  Texture Shapeを2Dに変更  何処か関係のないところを適当にクリック ② クリック
  57. 57. ① Apply ターゲットの利用 (4/5) ② Image Target(1)をクリック
  58. 58. 手持ちのCGを追加 (1/2) sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ Assets Sampleフォルダ Assets
  59. 59. 手持ちのCGを追加 (2/2) augmented_cityをImageTarget(1)に登録 augmented_city
  60. 60. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera
  61. 61. AR起動時のターゲットの利用設定  詳細情報(Inspector)の [Dataset]内で [Load Test2 Database]と [Activate]のチェックをオン Check
  62. 62. 動作確認 先に認識された方のターゲット上にCGが表示される
  63. 63. AR起動時のターゲットの利用設定  AR Cameraをクリック  詳細情報(Inspector)の Open Vuforia configuration をクリック ② Open Vuforia configuration ① AR Camera
  64. 64. 複数のマーカーを同時に使用する Max Simultaneous Tracked Imagesの数値を2に変更 2に変更
  65. 65. 動作確認 両方のターゲット上にCGが表示される
  66. 66. 実験:ターゲットを隠してみよう ターゲットを認識できなくなるとCGが表示できない 下から見上げたり
  67. 67. Extended Trackingを使用 Image Target BehaviourのExtended Trackingをオン Image Target チェック
  68. 68. 動作確認 ターゲットを見失ってもある程度は表示を継続
  69. 69. 参考 • Unity http://japan.unity3d.com/ • Vuforia https://developer.vuforia.com/ • 演習用データ https://goo.gl/7uiAYN • ARコンテンツ作成勉強会 http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/

×