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
2k
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
850
MediaPipeのハンドトラッキングで作るARライトセイバー
takashiyoshinaga
1
200
UnityとZapWorksで始めようWebAR開発
takashiyoshinaga
0
3.2k
Getting Started with WebAR for HoloLens2 and Meta Quest
takashiyoshinaga
0
1.9k
Getting Started with HoloSDK
takashiyoshinaga
0
220
Getting Started with Non-Programming AR Development with MRTK v2.4.0
takashiyoshinaga
0
2k
Getting Started With MRTK (for Beginner)
takashiyoshinaga
0
660
始めようWebAR/VR開発
takashiyoshinaga
1
740
Getting Started with Azure Kinect DK
takashiyoshinaga
1
5.1k
Other Decks in Technology
See All in Technology
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
260
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.3k
Janus
bkuhlmann
1
490
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
180
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
150
ユーザーストーリーのレビューを自動化したみたの
bun913
1
380
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
470
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
180
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
180
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
190
On Your Data を超えていく!
hirotomotaguchi
2
620
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
How GitHub (no longer) Works
holman
304
140k
How STYLIGHT went responsive
nonsquared
92
4.8k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Side Projects
sachag
451
41k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Statistics for Hackers
jakevdp
789
220k
Thoughts on Productivity
jonyablonski
57
3.8k
How to name files
jennybc
64
93k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Become a Pro
speakerdeck
PRO
10
4.5k
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; } }
完成