Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuforia7 and Unity2018
Search
TakashiYoshinaga
June 05, 2018
Technology
0
2.1k
Vuforia7 and Unity2018
Panasonic Laboratory Fukuokaで開催したハンズオンの資料。Vuforia7とUnityを使ったARコンテンツ開発の基礎。
TakashiYoshinaga
June 05, 2018
Tweet
Share
More Decks by TakashiYoshinaga
See All by TakashiYoshinaga
Nreal Light / Air 開発入門ハンズオン
takashiyoshinaga
0
980
MediaPipeのハンドトラッキングで作るARライトセイバー
takashiyoshinaga
1
310
UnityとZapWorksで始めようWebAR開発
takashiyoshinaga
0
3.7k
Getting Started with WebAR for HoloLens2 and Meta Quest
takashiyoshinaga
0
2.2k
Getting Started with HoloSDK
takashiyoshinaga
0
250
Getting Started with Non-Programming AR Development with MRTK v2.4.0
takashiyoshinaga
0
2.2k
Getting Started With MRTK (for Beginner)
takashiyoshinaga
0
690
始めようWebAR/VR開発
takashiyoshinaga
1
870
Getting Started with Azure Kinect DK
takashiyoshinaga
1
5.5k
Other Decks in Technology
See All in Technology
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
プロセス改善による品質向上事例
tomasagi
1
1.6k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
RSNA2024振り返り
nanachi
0
500
2.5Dモデルのすべて
yu4u
2
610
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
We Have a Design System, Now What?
morganepeng
51
7.4k
Docker and Python
trallard
44
3.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
A better future with KSS
kneath
238
17k
A designer walks into a library…
pauljervisheath
205
24k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building Applications with DynamoDB
mza
93
6.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Practical Orchestrator
shlominoach
186
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Transcript
ARコンテンツ作成ハンズオン UnityとVuforiaではじめるAR 1,June,2018 @Panasonic Laboratory Fukuoka
自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:AR/VRの活用とモーションキャプチャ コミュニティ:ARコンテンツ作成勉強会 主催
Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索
FacebookグループのxR九州もよろしく
ここから本題
開発ツール:Unity Unityとは マルチプラットフォーム対応のゲームエンジンおよび開発環境 GUI上で視覚的にCGを配置したり機能を追加したりできる C#によるプログラミングで細かい挙動も記述可能 アセットストアで高品質なCGやアニメーションを入手できる
ARライブラリ:Vuforia Vuforiaとは ARコンテンツ作成ライブラリ(Android, iOS, HoloLens, etc…) JavaやC++を用いたネイティブアプリの開発が可能
Unity用のライブラリもありノンプログラミングでの開発も可能 開発方法に関するブログも比較的多い
演習環境 • Unity 2018.1.1f1 • Vuforia 7
演習用データ • こちらからダウンロードしてください https://goo.gl/7uiAYN
使用するマーカー
まずはUnityの基本操作
Unityのプロジェクトを作成 (1/2) Unityを起動後、画面右上のNEWをクリック New
Unityのプロジェクトを作成 (2/2) プロジェクト名・保存場所・3Dを指定してCreate project 3D 最後にクリック プロジェクト名 保存場所
Unityの操作画面(概要) ゲーム空間の設計画面
ゲーム空間にCGを追加しよう 右クリック 3DObject → Cube
実行してみよう クリックして実行 クリックして終了 カメラから見た空間
オブジェクトの位置・向き・サイズを調整 クリックして選択 移動 回転 拡大・縮小
Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右 他にもいろいろ → http://goo.gl/Lq1ILT
CGの詳細情報の編集:位置の指定 クリック 選択したオブジェクトの 現在の詳細情報→ (x,y,z)を(0,5,0)に オブジェクトの詳細の 表示・追加・変更は Inspectorで行う
例えば、Transformの Positionを変更すると 位置が変わる
CGの詳細情報の編集:色の設定 (1/3) ②右クリック ③ Create マテリアル(色や質感の設定)を作成 ④ Material ①Assets
CGの詳細情報の編集:色の設定 (2/3) オブジェクト(Cube)のマテリアルを開く マテリアルが 作成された ② Materials横の▼ ③ Element 0横の
① Cube
CGの詳細情報の編集:色の設定 (3/3) オブジェクト(Cube)にマテリアルを割り当てて色を設定 ①先ほど作った マテリアル ②NewMaterial横の▼ ③Albedo ④好きな色を選ぶ
CGの詳細情報の編集:物理演算の追加 Add Component 選択したオブジェクトに物理法則(重力)を適用 Physics Rigidbody
実行してみよう
少し遊んでみましょう(1/3) ① 右クリック Plane
少し遊んでみましょう(2/3) 少し傾ける Position (0,0,0) Plane
少し遊んでみましょう(3/3)
Sceneの保存 コンテンツ作成中はこまめに[Ctrl]+[s]で保存
不要なCGの削除 Delete CubeとPlaneを選択して[Delete]キー
ここからAR演習
ARコンテンツ作成の基本手順 ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート &
Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
開発の前に・・・ VuforiaでのARコンテンツ作成には ライセンスキーを事前に作る必要がある → https://developer.vuforia.com/ ① Develop ② License Manager
➂ Get Development Key
ライセンスキーの作成 (1/3) ← アプリ名を入力(半角英数) チェック Confirm
ライセンスキーの作成 (3/3) ライセンスキーが発行されたことを確認 ライセンスキー クリック ※ライセンスキーは 原則、アプリ毎に 作成する
① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① Unity上でVuforiaを利用できるようにする
Unity上でのVuforia利用設定 (1/3) Player Edit Project Settings
Unity上でのVuforia利用設定 (2/3) Vuforia Augmented Realityをオン
Unity上でのVuforia利用設定 (3/3) Accept
① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
webカメラの画像を取得・表示 (1/5) Main Cameraを削除 代わりにAR用のカメラを 追加(次ページを参照) Delete
webカメラの画像を取得・表示 (2/5) 右クリック Vuforia AR Camera
webカメラの画像を取得・表示 (3/5) HierarchyのARCamearaをクリック してInspector(画面右)を表示 Vuforia Behaviourの[Open Vuforia Configuration]をクリック
AR Camera Open Vuforia configuration
webカメラの画像を取得・表示 (4/5) App License Keyに、さきほどVuforia のサイトで作成したライセンスキーを貼る License Keyをコピペ
webカメラの画像を取得・表示 (5/5) ここにカメラの画像が表示される 実行/停止 ※次の作業に行く前に必ず停止すること(再生ボタンが黒くなっていればOK)
① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
ターゲットのデータって? 人間にとっては認識しやすいが コンピュータにとっては認識が難しい コンピュータで認識しやすい目印 のデータを作成してあげる
ターゲットを作成 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database]
VuforiaのDeveloper Portalサイトにアクセス&ログイン
ターゲットを作成 (2/5) 1. データベースの名称を指定 2. TypeはDeviceを指定 データベース名 この資料ではTest ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成 Create
ターゲットを作成 (3/5) Target Managerから使用するデータベース開く データベースを開く
ターゲットを作成 (4/5) [Add Target]をクリック Single Imageを選択 ターゲットとして
使用したい画像を選択 (ILoveAR.jpg) Widthで画像の幅(m)を入力 [Add]をクリック 0.16 0.1
ターゲットを作成 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットのインポート & Sceneに配置 ビデオ映像 ターゲット CG
ターゲットをプロジェクトに追加 (1/2) [Assets] → [Import Package] → [Custom Package…] →
ターゲットをプロジェクトに追加 (2/2) クリック
ターゲットの利用 (1/2) 右クリック Vuforia Image
ターゲットの利用 (2/2) ① ImageTarget をクリック ② DatabaseでTestを選択
① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置
⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
Asset StoreでCGを入手 [Window] → [Asset Store]
Asset StoreでCGを入手 Kyleで検索 CGを選択
Asset Storeで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
確認 NG GOOD ImageTargetの子として登録 ドラッグ&ドロップ 使用するターゲットの子要素 としてCGを追加すること
動作確認
この後の内容・・・ ターゲットの追加 既存CGの活用 Extended Tracking
ターゲットの追加 (1/5) 以下の順にクリック [Develop] → [Target Manager] → [Add Database]
再びTarget Managerにアクセスし、Add Databaseを行う
Test2 ターゲットの追加 (2/5) 1. NameにTest2と入力 2. TypeはDeviceを指定 データベース名
ターゲットの追加 (3/5) Test2を開く
ターゲットの追加 (4/5) [Add Target]をクリック Single Imageを選択 ターゲットとして
使用したい画像を選択 (stones.jpg) Widthで画像の幅を入力 [Add]をクリック 0.1
ターゲットの追加 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
ターゲットのインポート (方法その2) Import をダブルクリックしImport packageを開く
2つ目のターゲットの設定 (1/2) 右クリック Vuforia Image
2つ目のターゲットの設定 (2/2) HierarchyでImageTarget (2つめ)を選択 Inspector内(画面右)でDatabaseを[Test2]にする 操作モードを[移動]にしてターゲットをずらす Image
Target 移動 少し横にずらす Test2
手持ちのCGを追加 (1/2) sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ Assets Sampleフォルダ Assets
手持ちのCGを追加 (2/2) augmented_cityを2つめのImageTargetに登録 augmented_city
動作確認 先に認識された方のターゲット上にCGが表示される
AR起動時のターゲットの利用設定 AR Cameraをクリック 詳細情報(Inspector)の Open Vuforia configuration をクリック
② Open Vuforia configuration ① AR Camera
複数のマーカーを同時に使用する Max Simultaneous Tracked Imagesの数値を2に変更 2に変更
動作確認 両方のターゲット上にCGが表示される
実験:ターゲットを隠してみよう ターゲットを認識できなくなるとCGが表示できない 下から見上げたり
Extended Trackingを使用 Image Target BehaviourのExtended Trackingをオン Kyleが乗っている Image Target チェック
動作確認 ターゲットを見失ってもある程度は表示を継続
これからやる事
マウスの挙動を取得するスクリプトの作成 右クリック Create Empty スクリプトを記述するためのGame Objectを作成
マウスの挙動を取得するスクリプトの追加 Game Object Add Component スクリプトを追加するためAdd Componentをクリック
マウスの挙動を取得: Scriptの追加(2/2) New Script TestScript (自由に決めてもOK) Create and Add
GameObjectにスクリプト(プログラム)が追加される TestScriptをダブルクリックして編集画面を開く
マウス押下時にキャラクタを回転させる
ボタン押下時検出とCGの回転 public class TestScript : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void
Start () { cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { } } 回転 回転 回転 フレームごとにちょっとずつ回転
ボタン押下時検出とCGの回転 public class TestScript : MonoBehaviour { GameObject cg; //
Start関数は初期化のために一度だけ実行される void Start () { //GameObjectからRobot Kyleを探してcgに代入 cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { //Input.GetMouseButton(0)で左ボタンの押下をチェック if (Input.GetMouseButton (0)) { //Rotate関数でY軸を中心に1度ずつ(0,1,0)回転 cg.transform.Rotate(0,1,0); } } }
マウスでCGを移動させる
右クリック時にマウスの位置を取得 GameObject cg; void Start () { //GameObjectからRobot Kyleを探してcgに代入 cg
= GameObject.Find ("Robot Kyle"); } void Update () { if (Input.GetMouseButton (0)) { cg.transform.Rotate(new Vector3(0,1,0)); } else if (Input.GetMouseButton (1)) { //Input.mousePositionでマウスのスクリーン座標を取得 //print関数で二次元座標(x, y)を出力 print (Input.mousePosition.x + "," + Input.mousePosition.y); } }
動作確認 右クリックしながら カーソルを移動 Consoleタブに 座標が出力される
今やったこと スクリーン上のカーソルの座標(x,y)を取得 y x Imput.mousePosition で取得した座標(x,y)
これからやること Imput.mousePosition で取得した座標(x,y) ここにCGを移動 スクリーン上の座標をマーカー平面上の座標に変換 y x
スクリーン座標 → マーカ平面座標の手順の基本 カメラからスクリーン上のカーソルまでのベクトルv ray を取得 v ray
がマーカー平面に到達する倍率を算出してv ray にかける a 1倍 2倍 a倍
2次元座標を3次元座標に変換 :コーディング else if (Input.GetMouseButton (1)) { print (Input.mousePosition.x +
"," + Input.mousePosition.y); //カメラ中心からスクリーンへの視線方向のベクトルを取得 Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); //rayを用いて倍率を計算 (内積を使用) float a = ray.origin.y / Vector3.Dot(new Vector3(0, -1, 0), ray.direction); //倍率を視線方向のベクトルに掛ける Vector3 pos = ray.origin + ray.direction * a; //算出された座標をCGの位置に反映 cg.transform.position=pos; }
キーボード入力によるサイズの変更 void Update () { if (Input.GetMouseButton (0)) { /*CGの回転に関するコード*/
} else if (Input.GetMouseButton (1)) { /*CGの位置指定に関するコード*/ } //Input.GetKeyで現在押しているキーのチェック if (Input.GetKey (KeyCode.UpArrow)) { //CGの表示倍率(localScale)を1.01倍ずつ大きくする cg.transform.localScale *= 1.01f; } else if (Input.GetKey (KeyCode.DownArrow)) { cg.transform.localScale *= 0.99f; } }
完成