Recommended
More Related Content
What's hot
What's hot (20)
Similar to ARコンテンツ作成勉強会:使ってみようSmartAR 基礎から支援ツール活用まで
Similar to ARコンテンツ作成勉強会:使ってみようSmartAR 基礎から支援ツール活用まで (20)
More from Takashi Yoshinaga
More from Takashi Yoshinaga (20)
Recently uploaded
Recently uploaded (9)
ARコンテンツ作成勉強会:使ってみようSmartAR 基礎から支援ツール活用まで
- 2. SmartARについて SmartARとは スマートフォン/PC用のARライブラリ(Android, iOS, Windows) JavaやC++を用いたネイティブアプリの開発が可能 Unity用のライブラリもありノンプログラミングでの開発も可能 ターゲット画像の事前登録を用いないARも可能 (スマホのみ)
- 4. 開発準備：SDKの準備 • 公式サイトにアクセス [Link] • SmartAR_SDK_Unity版と認識対象画像用 辞書作成 ツールをダウンロードし、わかりやすい場所に解凍
- 5. 開発準備：環境構築(1/3) • Unityがインストールされたフォルダを開く 例： C:¥Program Files¥Unity¥Editor • Unity.exeを右クリック → 送る → デスクトップ 送る デスクトップ
- 6. 開発準備：環境構築(2/3) • ショートカットの名前をSmartARに変更 • ショートカットを右クリックしプロパティを開く • リンク先のUnity.exe”の後ろに ␣-force-openglと入力 スペース -force-opengl
- 7. 開発準備：環境構築(3/3) OpenGLと表示 今作ったショートカット からUnityを起動 新規プロジェクトを作成・起動しOpenGLモードを確認 【ポイント】 SmartARでの開発の際はOpenGLモードが必須
- 8. ARコンテンツ作成の基本手順 ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
- 9. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① SmartAR SDKをUnityに追加
- 10. SmartARをUnityに追加 (1/3) SmartAR SDKのあるフォルダ → [SmartAR_SDK_Unity] → [SmartAR] → smartar_moving_camera ① Assets ② Import Package ③ Custom Package
- 13. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
- 14. webカメラの画像を取得・表示 (1/4) Main Cameraを削除 代わりにAR用のカメラを 追加(次ページを参照) Delete
- 15. webカメラの画像を取得・表示 (2/4) 画面左下のAssetsから下記を開く [SmartAR] → [Prefabs] SmartAR Cameraを画面左上の Hierarchyにドラッグ&ドロップ Prefabsフォルダ
- 20. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
- 22. dictoolでターゲットを作成 (1/4) SmartAR_SDK内のSmartAR_ToolフォルダにILoveAR.bmpを置く ※ 画像はpngとbmpに対応 (jpgは非対応なので注意) sampleフォルダから SmartAR_Tooolフォルダにコピペ (※本当はどこにおいてもOK) ターゲット作成ツール
- 23. dictoolでターゲットを作成 (2/4) PowerShellを使ってSmartAR_Toolフォルダにアクセス 例) cd C:¥Users¥○○¥Desktop¥SmartAR_SDK¥SmartAR_Tool ① dictoolがあるフォルダ内の空白部分を [Shift] + [右クリック] ② PowerShellウィンドウをここで開くをクリック ③ PowerShell画面に現在のフォルダ のパスが表示されていることを確認
- 24. dictoolでターゲットを作成 (3/4) dictool.exeを使ってデータファイルを作成する 【入力内容】 .¥dictool.exe build -image ILoveAR.bmp –physicalWidth 0.1 データ作成ツール -image 画像名 -physicalWidth 横幅(m) 最後にEnter
- 26. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットをUnityにインポート & 使用設定 ビデオ映像 ターゲット CG
- 28. ターゲットの利用 (1/6) 画面左下のAssetsから下記を開く [SmartAR] → [Prefabs] SmartAR Targetを画面左上の Hierarchyにドラッグ&ドロップ Prefabs
- 29. ターゲットの利用 (2/6) SmartAR Target for Cameraの Inspector内、Target Effectorの TargetIDにてターゲットの名前をつける ※今のところILoveAR画像と無関係 ① SmartAR Target for Camera ② t1
- 30. ターゲットの利用 (3/6) ① SmartAR Camera ② SmartAR Controller
- 31. ターゲットの利用 (4/6) ① Recognizer Setting▼ ② Recognition Mode Target Tracking 【Recognition Modeについて】 Target Tracking → 事前に作成したターゲット Scene Mapping → 動的に空間を認識
- 33. ターゲットの利用 (6/6) FileName: ILoveAR.bmp.v9.dic Id: t1 SmartAR TargetのIDと、データファイル(.dic) の関連付けをカメラのInspectorで行う Element 0 ▼ 関連付け
- 34. ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
- 35. Asset StoreでCGを入手 [Window] → [Asset Store]
- 37. Asset StoreでCGを入手 Download・Import [Download]でファイルを ダウンロード [Import]をクリック Importing package ウィンドウが表示されたら [Import]をクリック Import
- 39. ターゲットとCGの関連付け (2/2) Assetsから下記を開く [Robot Kyle] →[Model] Rogot KyleをHierarchy中の SmartAR Targetにドラッグ&ドロップ Model
- 41. 見た目の調整 Robot Kyle Scaleを 150, 150, 150 Rotationを 0,180,0
- 42. 動作確認
- 43. Positionに関する話 (SmartAR ver. 1.1.1) CGの座標は実空間の位置を2倍した値をPositionに入力して指定 例：マーカーの右上端(50,0,50)に置くなら(100,0,100) Z Y
- 44. ARコンテンツ作成の基本手順 (再) ① SmartAR SDKをUnityに追加 ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットをUnityにインポート & 使用設定 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
- 45. この後の内容・・・ ターゲットの追加 - 基本的に手順②-⑤を繰り返せば増やせる - 今回は開発支援ツール(非公式)の紹介 ダウンロードサイト SceneMappingモードについて
- 46. 支援ツールでターゲットを作成 (1/3) TargetMaker.exe を dictool.exe と同じフォルダに移す [Tools] [SmartAR_Tool] コピーまたは移動
- 47. 支援ツールでターゲットを作成(2/3) TargetMaker.exeを起動しOpenFileからcat.bmpを選択 Physical Widthで画像の幅0.14を入力(=14cm) 最後にSaveボタンをクリック 自動的にdictool.exeが実行される
- 48. 支援ツールでターゲットを作成 (3/3) UnityのAssets内にあるStreamingAssetsを開く dictoolと同じフォルダに作成された下記ファイルを追加 cat.bmp.v9.dic、 cat.png、 cat.tgt StreamingAssets
- 49. ターゲットの利用 (1/5) 画面左下のAssetsから下記を開く [SmartAR] → [Prefabs] SmartAR Targetを画面左上の Hierarchyにドラッグ&ドロップ Prefabs
- 50. ターゲットの利用 (2/5) SmartAR Target for Cameraの Inspector内、Target Effectorの TargetIDにてターゲットの名前をつける SmartAR Target for Camera(1) t2
- 51. ターゲットの利用 (3/5) ① SmartAR Camera ② SmartAR Controllerに注目
- 52. ターゲットの利用 (4/5) ① Sizeを2にしてEnter ② ターゲット(ILoveAR) の情報が複製される
- 54. TargetをUnityエディタ上に表示(1/4) [sample] → [Tools] → TargetVisualizer ① Assets ② Import Package ③ Custom Package
- 55. TargetをUnityエディタ上に表示(2/4) ① SmartAR_Target for Camera(1) ② Assets ② TargetInfo
- 56. TargetをUnityエディタ上に表示(3/4) ① Target Info ② cat.tgt
- 57. TargetをUnityエディタ上に表示(4/4) ① Target Info(1) ③ ちょっとずらす ② 注)TargetInfo(1)の子要素arTargetはいじらないこと
- 59. CGの追加 (2/2) Assetsから下記を開く [Kitten] →[Prefab] KittenNPCをSmartAR Target(1) にドラッグ&ドロップ Prefab
- 62. 複数のターゲットを同時に使用する Max Target Per Frameの数値を2に変更 SmartAR Camera Max Target Per Frame: 2
- 65. シーンマッピングモードを使用 Recognition ModeのSCENE_MAPPINGをオン SmartAR Camera SmartAR Controller Recognition Mode: SCENE MAPPING Misc Settings Show Landmark (確認用)
- 67. 参考 • Unity http://japan.unity3d.com/ • SmartAR http://www.sonydna.com/sdna/solution/SmartAR_SD K.html • SmartARの紹介 (by サイバネット) http://www.cybernet.co.jp/ar-vr/products/smartar/ • SmartAR開発支援ツール (by 吉永) http://www.vizyoshinaga.sakura.ne.jp/tools4smartar/ • ARコンテンツ作成勉強会 http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/