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

ARコンテンツ作成勉強会
#AR_Fukuoka #AR_Miyazaki #AR_Kumamoto #AR_Hiroshima
UnityとVuforiaではじめるAR

演習用データ
• こちらからダウンロードしてください
https://goo.gl/7uiAYN

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

開発の前に・・・
VuforiaでのARコンテンツ作成には
ライセンスキーを事前に作る必要がある
→ https://developer.vuforia.com/
① Develop
② License Manager
➂ Add License Key

ライセンスキーの作成 (1/3)
← Developmentを選択
ライセンス区分として無償版(Development)
と有償版(Consumer or Enterprise)がある
← コンテンツ名
クリック

Confirm
規約に同意してライセンスキーを発行
チェック

ライセンスキーが発行されたことを確認
ライセンスキー
クリック
※ライセンスキーは
原則、アプリ毎に
作成する

Unityのプロジェクトを作成 (1/2)
Unityを起動後、画面右上のNEW PROJECTをクリック
New

Unityのプロジェクトを作成 (2/2)
プロジェクト名・保存場所・3Dを指定してCreate project
3D
最後に
CreateProject
プロジェクト名
保存場所

VuforiaをUnityに追加 (1/3)
[Assets]
→ [Import Package]
→ [Custom Package…]
→

Import

Vuforiaフォルダ
ができていればOK

webカメラの画像を取得・表示 (1/5)
 Main Cameraを削除
 代わりにAR用のカメラを
追加(次ページを参照)
Delete

 画面左下のAssetsから下記を開く
[Vuforia] → [Prefabs]
 ARCameraを画面左上の
Hierarchyにドラッグ&ドロップ
Prefabs

 HierarchyのARCamearaをクリックして
Inspector(画面右)を表示
 Vuforia Behaviourの[Open Vuforia
Configuration]をクリック
AR Camera
Open Vuforia configuration

 App License Keyに事前にVuforiaの
サイトで作成したライセンスキーを
貼りつける
License Keyをコピペ

ここにカメラの画像が表示される
実行/停止
※次の作業に行く前に必ず停止すること(再生ボタンが黒くなっていればOK)

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

ターゲットを作成 (1/5)
以下の順にクリック
[Develop]
→ [Target Manager]
→ [Add Database]
VuforiaのDeveloper Portalサイトにアクセス&ログイン

1. データベースの名称を指定
2. TypeはDeviceを指定
データベース名
この資料ではTest
ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成
Ｃｒｅａｔｅ

Target Managerから使用するデータベース開く
データベースを開く

 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして
使用したい画像を選択
(ILoveAR.jpg)
 Widthで画像の幅(m)を入力
 [Add]をクリック
0.160.1

[Download Dataset]
→ [Unity Editor]
→ [Download]
分かり易い場所に保存

ターゲットをプロジェクトに追加 (1/2)
[Assets]
→ [Import Package]
→ [Custom Package…]
→

ターゲットをプロジェクトに追加 (2/2)
クリック

ターゲットの利用 (1/5)
Prefabs
 画面左下のAssetsから下記を開く
[Vuforia] → [Prefabs]
 Image TargetsをHierarchyに
ドラッグ&ドロップ

② ImageTarget
をクリック
① ターゲット(白い板)が出現
③ DatabaseでTestを選択

現状確認
ImageTarget(白い板)とターゲット(Test/ILoveAR)
が関連づいた
しかし・・・
ターゲットは真っ白なままなので、ターゲットとCGの
向きの関係をUnityエディタ上で確認するのが困難
現状理想

① Editor → QCAR → ImageTargetTexture → Test
③ 設定の変更
 Texture TypeをDefaultに変更
 Texture Shapeを2Dに変更
 何処か関係のないところを適当にクリック
② クリック

① Apply
② Image Targetをクリック

ターゲット画像が
割り当てられる

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

Kyleで検索
CGを選択

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

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

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

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

AR起動時のターゲットの利用設定
 AR Cameraをクリック
 詳細情報(Inspector)の
をクリック
② Open Vuforia configuration
① AR Camera
デフォルト設定のままだと実行してもCGが表示されない

[Dataset]内で
[Load Test Database]と
[Activate]のチェックをオン
Check

Unity+Vuforiaのハマリどころ
その①： App License Keyの登録を必ず登録
その②： Load xx DatabaseとActivateをオンにする
ライセンスキー
チェック

この後の内容・・・
 ターゲットの追加
 既存CGの活用
 Extended Tracking

ターゲットの追加 (1/5)
以下の順にクリック
[Develop]
→ [Target Manager]
→ [Add Database]
再びTarget Managerにアクセスし、Add Databaseを行う

Test2
1. NameにTest2と入力
2. TypeはDeviceを指定
データベース名

Test2を開く

 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして
使用したい画像を選択
(stones.jpg)
 Widthで画像の幅を入力
 [Add]をクリック
0.1

[Download Dataset]
→ [Unity Editor]
→ [Download]
分かり易い場所に保存

ターゲットのインポート (方法その2)
Import
をダブルクリックしImport packageを開く

2つ目のターゲットの設定 (1/2)
Image TargetsをHierarchyにドラッグ&ドロップ
Prefabs

2つ目のターゲットの設定 (2/2)
 Hierarchy(画面左)でImageTarget(1)を選択
 Inspector内(画面右)でDatabaseを[Test2]にする
 操作モードを[移動]にしてターゲットをずらす
Image Target(1)
移動
少し横にずらす Test2

① Apply
② Image Target(1)をクリック

手持ちのCGを追加 (1/2)
sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ
Assets
Sampleフォルダ
Assets

手持ちのCGを追加 (2/2)
augmented_cityをImageTarget(1)に登録
augmented_city

 AR Cameraをクリック
をクリック
② Open Vuforia configuration
① AR Camera

[Dataset]内で
[Load Test2 Database]と
[Activate]のチェックをオン
Check

動作確認
先に認識された方のターゲット上にCGが表示される

複数のマーカーを同時に使用する
Max Simultaneous Tracked Imagesの数値を2に変更
2に変更

動作確認
両方のターゲット上にCGが表示される

実験：ターゲットを隠してみよう
ターゲットを認識できなくなるとCGが表示できない
下から見上げたり

Extended Trackingを使用
Image Target BehaviourのExtended Trackingをオン
Image Target
チェック

動作確認
ターゲットを見失ってもある程度は表示を継続

参考
• Unity
http://japan.unity3d.com/
• Vuforia
https://developer.vuforia.com/
• 演習用データ
https://goo.gl/7uiAYN
• ARコンテンツ作成勉強会
http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/

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

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

More Related Content

What's hot

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

More from Takashi Yoshinaga