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.

SmartARの使い方(基本編)

5,393 views

Published on

6/11に行われたARコンテンツ作成勉強会の内容を一部抜粋

Published in: Technology
  • Be the first to comment

SmartARの使い方(基本編)

  1. 1. 使ってみようSmartAR(基礎編) #AR_Fukuoka ARコンテンツ作成勉強会
  2. 2. SmartARについて SmartARとは  スマートフォン/PC用のARライブラリ(Android, iOS, Windows)  JavaやC++を用いたネイティブアプリの開発が可能  Unity用のライブラリもありノンプログラミングでの開発も可能  ターゲット画像の事前登録を用いないARも可能 (スマホのみ)
  3. 3. 開発準備 WindowsのPCを用意してください ※MacではGame画面でのプレビューができません
  4. 4. 開発準備:SDKの準備 • 公式サイトにアクセス [Link] • SmartAR_SDK_Unity版と認識対象画像用 辞書作成 ツールをダウンロードし、わかりやすい場所に解凍
  5. 5. 開発準備:環境構築(1/3) • Unityがインストールされたフォルダを開く 例: C:¥Program Files¥Unity¥Editor • Unity.exeを右クリック → 送る → デスクトップ 送る デスクトップ
  6. 6. 開発準備:環境構築(2/3) • ショートカットの名前をSmartARに変更 • ショートカットを右クリックしプロパティを開く • リンク先のUnity.exe”の後ろに ␣-force-openglと入力 スペース -force-opengl
  7. 7. 開発準備:環境構築(3/3) OpenGLと表示  今作ったショートカット からUnityを起動  新規プロジェクトを作成・起動しOpenGLモードを確認 【ポイント】 SmartARでの開発の際はOpenGLモードが必須
  8. 8. ARコンテンツ作成の基本手順 ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
  9. 9. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① SmartAR SDKをUnityに追加
  10. 10. SmartARをUnityに追加 (1/3) SmartAR SDKのあるフォルダ → [SmartAR_SDK_Unity] → [SmartAR] → smartar_moving_camera ① Assets ② Import Package ③ Custom Package
  11. 11. SmartARをUnityに追加 (2/3) Import
  12. 12. SmartARをUnityに追加 (3/3) SmartARフォルダなど
  13. 13. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
  14. 14. webカメラの画像を取得・表示 (1/4)  Main Cameraを削除  代わりにAR用のカメラを 追加(次ページを参照) Delete
  15. 15. webカメラの画像を取得・表示 (2/4)  画面左下のAssetsから下記を開く [SmartAR] → [Prefabs]  SmartAR Cameraを画面左上の Hierarchyにドラッグ&ドロップ Prefabsフォルダ
  16. 16. 忘れずに Ctrl + S 今後もこまめに
  17. 17. webカメラの画像を取得・表示 (3/4) クリック
  18. 18. webカメラの画像を取得・表示 (4/4) 画像表示
  19. 19. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
  20. 20. ターゲットのデータって? 人間にとっては認識しやすいが コンピュータにとっては認識が難しい コンピュータで認識しやすい目印 のデータを作成してあげる
  21. 21. dictoolでターゲットを作成 (1/4) SmartAR_SDK内のSmartAR_ToolフォルダにILoveAR.bmpを置く ※ 画像はpngとbmpに対応 (jpgは非対応なので注意) sampleフォルダから SmartAR_Tooolフォルダにコピペ (※本当はどこにおいてもOK) ターゲット作成ツール
  22. 22. dictoolでターゲットを作成 (2/4) PowerShellを使ってSmartAR_Toolフォルダにアクセス 例) cd C:¥Users¥○○¥Desktop¥SmartAR_SDK¥SmartAR_Tool ① dictoolがあるフォルダ内の空白部分を [Shift] + [右クリック] ② PowerShellウィンドウをここで開くをクリック ③ PowerShell画面に現在のフォルダ のパスが表示されていることを確認
  23. 23. dictoolでターゲットを作成 (3/4) dictool.exeを使ってデータファイルを作成する 【入力内容】 .¥dictool.exe build -image ILoveAR.bmp –physicalWidth 0.1 データ作成ツール -image 画像名 -physicalWidth 横幅(m) 最後にEnter
  24. 24. dictoolでターゲットを作成 (4/4) データファイルが出力されるまでしばらく待つ 入力内容 出力されるファイル ターゲットとしての評価を100点満点で表現(70点以上が望ましい)
  25. 25. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットをUnityにインポート & 使用設定 ビデオ映像 ターゲット CG
  26. 26. ターゲットをプロジェクトに追加 ILoveAR.bmp.v9.dic を StreamingAssetsにドラッグ&ドロップ StreamingAssets
  27. 27. ターゲットの利用 (1/6)  画面左下のAssetsから下記を開く [SmartAR] → [Prefabs]  SmartAR Targetを画面左上の Hierarchyにドラッグ&ドロップ Prefabs
  28. 28. ターゲットの利用 (2/6)  SmartAR Target for Cameraの Inspector内、Target Effectorの TargetIDにてターゲットの名前をつける ※今のところILoveAR画像と無関係 ① SmartAR Target for Camera ② t1
  29. 29. ターゲットの利用 (3/6) ① SmartAR Camera ② SmartAR Controller
  30. 30. ターゲットの利用 (4/6) ① Recognizer Setting▼ ② Recognition Mode Target Tracking 【Recognition Modeについて】  Target Tracking → 事前に作成したターゲット  Scene Mapping → 動的に空間を認識
  31. 31. ターゲットの利用 (5/6) Size: 1 ※使用するターゲットの数 ▼でTargetsを開く Sizeに数値を入力し、Enterを 押すとElement 0が生成される
  32. 32. ターゲットの利用 (6/6) FileName: ILoveAR.bmp.v9.dic Id: t1 SmartAR TargetのIDと、データファイル(.dic) の関連付けをカメラのInspectorで行う Element 0 ▼ 関連付け
  33. 33. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
  34. 34. Asset StoreでCGを入手 [Window] → [Asset Store]
  35. 35. Asset StoreでCGを入手 Kyleで検索 Space Robot Kyle
  36. 36. Asset StoreでCGを入手 Download・Import  [Download]でファイルを ダウンロード  [Import]をクリック  Importing package ウィンドウが表示されたら [Import]をクリック Import
  37. 37. ターゲットとCGの関連付け (1/2) Robot Kyleが追加される
  38. 38. ターゲットとCGの関連付け (2/2)  Assetsから下記を開く [Robot Kyle] →[Model]  Rogot KyleをHierarchy中の SmartAR Targetにドラッグ&ドロップ Model
  39. 39. 確認 NGGOOD SmartAR Targetの子として登録 ドラッグ&ドロップ 使用するターゲットの子要素 としてCGを追加すること
  40. 40. 見た目の調整 Robot Kyle Scaleを 150, 150, 150 Rotationを 0,180,0
  41. 41. 動作確認
  42. 42. Positionに関する話 (SmartAR ver. 1.1.1) CGの座標は実空間の位置を2倍した値をPositionに入力して指定 例:マーカーの右上端(50,0,50)に置くなら(100,0,100) Z Y
  43. 43. SmartARのハマりどころ  必ずOpenGLモードで起動しましょう ※それ以外のモードだと動作確認時に落ちます  動作確認時にGame画面が真っ黒でSmartARの文字す ら出ないことがあります。 その場合はあきらめてUnityを再起動しましょう  Xcodeでビルドエラーが出たら、Build Settingsで 下記を確認。(情報提供:Shinji Hayai @_shinjism) ✓ Library Search Pathsのフォルダ階層の 区切り文字にバックスラッシュ「¥」があれば 通常のスラッシュ「/」に。 ✓ Build OptionsのEnable Bitcodeを「No」に

×