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

1. 使ってみようSmartAR(基礎編)
#AR_Fukuoka
ARコンテンツ作成勉強会

2. SmartARについて
SmartARとは
 スマートフォン/PC用のARライブラリ(Android, iOS, Windows)
 JavaやC++を用いたネイティブアプリの開発が可能
 Unity用のライブラリもありノンプログラミングでの開発も可能
 ターゲット画像の事前登録を用いないARも可能 (スマホのみ)

3. 開発準備
WindowsのPCを用意してください
※MacではGame画面でのプレビューができません

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

11. SmartARをUnityに追加 (2/3)
Import

12. SmartARをUnityに追加 (3/3)
SmartARフォルダなど

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フォルダ

16. 忘れずに
Ctrl + S
今後もこまめに

17. webカメラの画像を取得・表示 (3/4)
クリック

18. webカメラの画像を取得・表示 (4/4)
画像表示

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

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

21. dictoolでターゲットを作成 (1/4)
SmartAR_SDK内のSmartAR_ToolフォルダにILoveAR.bmpを置く
※ 画像はpngとbmpに対応 (jpgは非対応なので注意)
sampleフォルダから
SmartAR_Tooolフォルダにコピペ
(※本当はどこにおいてもOK)
ターゲット作成ツール

22. dictoolでターゲットを作成 (2/4)
PowerShellを使ってSmartAR_Toolフォルダにアクセス
例) cd C:¥Users¥○○¥Desktop¥SmartAR_SDK¥SmartAR_Tool
① dictoolがあるフォルダ内の空白部分を
[Shift] + [右クリック]
② PowerShellウィンドウをここで開くをクリック
③ PowerShell画面に現在のフォルダ
のパスが表示されていることを確認

23. dictoolでターゲットを作成 (3/4)
dictool.exeを使ってデータファイルを作成する
【入力内容】
.¥dictool.exe build -image ILoveAR.bmp –physicalWidth 0.1
データ作成ツール -image 画像名 -physicalWidth 横幅(m)
最後にEnter

24. dictoolでターゲットを作成 (4/4)
データファイルが出力されるまでしばらく待つ
入力内容
出力されるファイル
ターゲットとしての評価を100点満点で表現(70点以上が望ましい)

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

26. ターゲットをプロジェクトに追加
ILoveAR.bmp.v9.dic を StreamingAssetsにドラッグ＆ドロップ
StreamingAssets

27. ターゲットの利用 (1/6)
 画面左下のAssetsから下記を開く
[SmartAR] → [Prefabs]
 SmartAR Targetを画面左上の
Hierarchyにドラッグ&ドロップ
Prefabs

28. ターゲットの利用 (2/6)
 SmartAR Target for Cameraの
Inspector内、Target Effectorの
TargetIDにてターゲットの名前をつける
※今のところILoveAR画像と無関係
① SmartAR Target
for Camera
② t1

29. ターゲットの利用 (3/6)
① SmartAR Camera ② SmartAR Controller

30. ターゲットの利用 (4/6)
① Recognizer Setting▼
② Recognition Mode
Target Tracking
【Recognition Modeについて】
 Target Tracking
→ 事前に作成したターゲット
 Scene Mapping
→ 動的に空間を認識

31. ターゲットの利用 (5/6)
Size: 1
※使用するターゲットの数
▼でTargetsを開く
Sizeに数値を入力し、Enterを
押すとElement 0が生成される

32. ターゲットの利用 (6/6)
FileName:
ILoveAR.bmp.v9.dic
Id: t1
SmartAR TargetのIDと、データファイル(.dic)
の関連付けをカメラのInspectorで行う
Element 0 ▼
関連付け

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

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

35. Asset StoreでCGを入手
Kyleで検索
Space Robot Kyle

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

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

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

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

40. 見た目の調整
Robot Kyle
Scaleを
150, 150, 150
Rotationを
0,180,0

41. 動作確認

42. Positionに関する話 (SmartAR ver. 1.1.1)
CGの座標は実空間の位置を2倍した値をPositionに入力して指定
例：マーカーの右上端(50,0,50)に置くなら(100,0,100)
Z
Y

43. SmartARのハマりどころ
 必ずOpenGLモードで起動しましょう
※それ以外のモードだと動作確認時に落ちます
 動作確認時にGame画面が真っ黒でSmartARの文字す
ら出ないことがあります。
その場合はあきらめてUnityを再起動しましょう
 Xcodeでビルドエラーが出たら、Build Settingsで
下記を確認。(情報提供：Shinji Hayai @_shinjism)
✓ Library Search Pathsのフォルダ階層の
区切り文字にバックスラッシュ「¥」があれば
通常のスラッシュ「/」に。
✓ Build OptionsのEnable Bitcodeを「No」に