ノンプログラミングで始める AR 開発入門

ARコンテンツ作成勉強会
ノンプログラミングで始めるAR開発入門

自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：九州先端科学技術研究所(ISIT)
専門：AR/VRの活用とモーションキャプチャ
コミュニティ：ARコンテンツ作成勉強会主催

ARコンテンツ作成勉強会の紹介
 2013年5月に勉強会をスタート
 ARコンテンツの作り方をハンズオン形式で学ぶ
 人数は5~10名程度の少人数で実施
 参加条件はAR/VRに興味がある人(知識不要)
 各地で開催 (福岡、熊本、宮崎、長崎、大分、鹿児島、山口、広島、関東、北海道)

Twitterと勉強会ページで情報を発信しています
#AR_Fukuoka Googleで「AR勉強会」で検索

サポートメンバー①
Yuta Ishibashi (@rupic_jp)
• 製造業品質管理
– 業務アプリケーション企画～保守
• C# VB Javascript Python
• Oracle SQLServer Postgres

サポートメンバー②
宮田尚行

#AR_Fukuoka
#エンジニアカフェ
今日のハッシュタグ

事前準備
ハンズオン素材
http://arfukuoka.lolipop.jp/efc/sample.zip
Vuforiaのアカウント
https://developer.vuforia.com
Unity 2018.4.8f1
https://unity3d.com/jp/unity/qa/lts-
releases?version=2018.4

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

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

Unityの操作画面(概要)
ゲーム空間の設計画面

ゲーム空間にCGを追加しよう
右クリック

①3D Object
②Cube

Cubeが追加される

実行してみよう
クリックして実行
クリックして終了
カメラから見た空間

オブジェクトの位置・向き・サイズを調整
移動回転拡大・縮小
①クリックして選択

Scene(設計画面)の視点を変えよう
[←] [→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右

Scene(設計画面)の視点を変えよう
視点を変えすぎて訳わからくなったら
Hierarchy内のオブジェクトをどれか
ダブルクリックすれば中央に来る

CGの詳細情報の編集：位置の指定
 オブジェクトの詳細の表示・追加・変更はInspectorタブ内で行う
 位置や角度、スケールを数字を用いて指定することも可能
[初期状態に戻す]
Positionを 0 0 0
Rotation 0 0 0
Scale 1 1 1

さらに位置を変えてみる
→Position 0 4 0

Cubeが上に移動する
※見づらい場合はズームアウトしてみよう

Cubeとカメラの位置関係が見えれば
この後の演習には差し支えないです

解説
Y
ZX
Unityでは横はX、奥行方向がZ、そして地面に対して垂直がY

さらに
Inspectorで操作できる詳細情報には
位置・角度・サイズ以外にも見た目(色や質感)
なども含まれる

色の変更：マテリアルの作成 (1/3)
マテリアル（色や質感の設定）を作成
①Assets
②右クリック

①Create
②Material

New Materialができているはず

色の変更：マテリアルの適用 (1/2)
オブジェクト（Cube）のマテリアルを開く
② Materials横の▼① Cube

色の変更：マテリアルの適用 (2/2)
オブジェクト（Cube）のマテリアルを開く
MaterialsのElement0
にドラッグ&ドロップ

色の変更：マテリアルの設定 (1/3)
①Cube
②New Materialに
置き換わっていればOK

New Material横の▼
Albedo横の□

色がつく

さらにさらに
Inspectorで操作できる詳細情報には
位置・角度・サイズ・見た目以外にも
オブジェクトの動きなども含まれる

CGの詳細情報の編集：物理演算の追加
①Cube
②AddComponent

CGの詳細情報の編集：物理演算の追加
選択したオブジェクトに物理法則(重力)を適用
①Physics
②Rigidbody
③Rigidbodyが追加される

現状を保存
ctrl / command + S

実行してみよう
落下する

次に行く前に
実行を止める！

少し遊んでみましょう(1/4)
①空白を右クリック
②3D Object
③Plane

Planeが追加される

①Plane
②位置を変更
Position 0 0 0

①Plane
②回転モード
③カメラのほうに傾ける

動作確認
落ちて転がる

不要なCGの削除
CubeとPlaneを選択して[Delete]キー
CubeとPlaneを削除

Unityを使ったコンテンツ作成のイメージ
Scene画面で配置
Game画面で表示
カメラ CG光源
[詳細情報(Inspectorタブ参照)]
・位置/角度/スケール
・質感(色, テカリ, 透明感など)
・独自の挙動
ただしUnityはゲーム開発環境であってAR専用ツールではない

カメラ CG光源
Unityを用いたARコンテンツの作成
Game画面で表示
UnityにAR開発ライブラリ(Vuforia,ARToolKitなど)を追加
[詳細情報(Inspectorタブ)]
・位置/角度/スケール
・質感(色, テカリ, 透明感など)
・独自の挙動
ビデオ映像ターゲット CG
 ターゲットの認識(画像処理)
 カメラの位置・姿勢計算

UnityとVuforiaの関係
 ターゲットの認識(画像処理)
 カメラの位置・姿勢計算
Game画面で表示
Unity標準サポートのARライブラリのを使用

今日の演習内容
https://youtu.be/GcQSAE0HKVY (1:00までの内容)

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

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

ライセンスキーの作成 (1/3)
← アプリ名を入力(半角英数)
チェックをオン
Confirm

ライセンスキーの作成 (3/3)
ライセンスキーが発行されたことを確認
※ライセンスキーは
原則、アプリ毎に
作成する
先ほど作ったライセンスをクリック
これがライセンスキー

Unity上でのVuforia利用設定 (1/4)
①File
②BuildSettings

Player Settings

②Vuforia Augmented Reality Support
①XR Settings

Accept

webカメラの画像を取得・表示 (1/5)
Main Cameraを削除

②Vuforia Engine
③ARCamera

①ARCamera
②Open Vuforia Engine Configuration

App License Keyに
Vuforiaのサイトで発行した
ライセンスキーを貼り付け

動作確認、その前に・・・
ctrl / command + S

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

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

ターゲットを作成 (1/5)
VuforiaのDeveloper Portalサイトにアクセス&ログイン
①Develop
②Target Manager
③Add Database

ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成
①データベース名この資料ではTest
②Device
③Create

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

 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして使用する画像を
選択(Sampleフォルダ内の
ILoveAR.jpg)
 Widthで画像の幅(m)を入力
 [Add]をクリック
0.160.1

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

ターゲットをプロジェクトに追加 (1/2)
①Assets
②Import Package
③Custom Package

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

ターゲットの利用 (1/2)
②Vuforia Engine
③Image

ターゲットの利用 (2/2)
①ImageTarget
をダブルクリック
②DataBase
でTestをクリック

せっかくなので
Asset Storeを使ってみよう

Asset StoreでCGを入手
①Window
②Asset Store

検索をクリックし、
Kyleで検索

Space Robot Kyle

ダウンロード

インポート

Import

ターゲットとCGの関連付け (1/2)
①RobotKyleが追加される
②表示するタブをSceneに戻しておく

①RobotKyle→Model

①RobotKyleに注目
②ImageTargetにドラッグ&ドロップ

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

ロボットがターゲット上にいればOK

ここまでのまとめ

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

Extended Trackingを使用
①ARCamera
②Open Vuforia Engine Configuration

Extended Trackingを使用
①Track Device Poseをオン
②Tracking modeをPOSITIONAL

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

ターゲットの追加 (1/5)
再びTarget Managerにアクセスし、Add Databaseを行う
①Develop
②Target Manager
③Add Database

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

Test2を開く

 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして使用する画像
を選択(sampleフォルダ内の
stones.jpg)
 Widthで画像の幅を入力
 [Add]をクリック
0.1

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

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

2つ目のターゲットの設定 (1/2)

①Vuforia Engine
②Image

 HierarchyでImageTarget (２つめ)を選択
 Inspector内(画面右)でDatabaseを[Test2]にする
 操作モードを[移動]にしてターゲットをずらす
③移動モード
①2つ目のImageTarget
②Test2を選択
④最後に少し移動させる

手持ちのCGを追加 (1/3)
①Assets

sample内のaugmented_cityフォルダをAssetsにドラッグ&ドロップ
Sampleフォルダ
Assets

augmented_cityを2つめのImageTargetに登録
augmenteda_city

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

AR起動時のターゲットの利用設定
①AR Camera
①Open Vuforia Configuration

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

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

ノンプログラミングで始める AR 開発入門

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie ノンプログラミングで始める AR 開発入門

Ähnlich wie ノンプログラミングで始める AR 開発入門 (20)

Mehr von Takashi Yoshinaga

Mehr von Takashi Yoshinaga (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

ノンプログラミングで始める AR 開発入門