Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

21.534 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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/

×