![AR技術の普及
[最近の動向]
? スマートフォンの普及?高性能化によりARが体験可能に
? 販売促進やゲームでのコンテンツが増えて身近な技術に
? Microsoft, Google, Appleも力を入れ普及が加速
GPSベースのARマーカーベースのAR
各種ツールの登場により体験だけでなく開発も身近に](https://image.slidesharecdn.com/oita2019ss-190608043918/85/Unity-Vuforia-AR-9-320.jpg)
![Scene(設計画面)の視点を変えよう
[←] [→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右](https://image.slidesharecdn.com/oita2019ss-190608043918/85/Unity-Vuforia-AR-21-320.jpg)
![Unityを使ったコンテンツ作成のイメージ
Scene画面で配置
Game画面で表示
カメラ CG光源
[詳細情報(Inspectorタブ参照)]
?位置/角度/スケール
?質感(色, テカリ, 透明感など)
?独自の挙動
Unityはゲーム開発環境であってAR専用ツールではない](https://image.slidesharecdn.com/oita2019ss-190608043918/85/Unity-Vuforia-AR-44-320.jpg)
![カメラ CG光源
Unityを用いたARコンテンツの作成
Scene画面で配置
Game画面で表示
UnityにAR開発ライブラリ(Vuforia,ARToolKitなど)を追加
[詳細情報(Inspectorタブ)]
?位置/角度/スケール
?質感(色, テカリ, 透明感など)
?独自の挙動
ビデオ映像 ターゲット CG
? ターゲットの認識(画像処理)
? カメラの位置?姿勢計算](https://image.slidesharecdn.com/oita2019ss-190608043918/85/Unity-Vuforia-AR-45-320.jpg)
![ターゲットを作成 (4/5)
? [Add Target]をクリック
? Single Imageを選択
? ターゲットとして
使用したい画像を選択
(ilovear.jpg)
? Widthで画像の幅(m)を入力
? [Add]をクリック
0.160.1](https://image.slidesharecdn.com/oita2019ss-190608043918/85/Unity-Vuforia-AR-70-320.jpg)
![ターゲットを作成 (5/5)
[Download Dataset]
→ [Unity Editor]
→ [Download]
分かり易い場所に保存](https://image.slidesharecdn.com/oita2019ss-190608043918/85/Unity-Vuforia-AR-71-320.jpg)
鲍苍颈迟测と痴耻蹿辞谤颈补で始める础搁开発
- 2. 自己紹介 氏名：吉永崇(Takashi Yoshinaga) 所属：九州先端科学技術研究所(ISIT) 専門：AR/VRの活用とモーションキャプチャ コミュニティ：ARコンテンツ作成勉強会 主催
- 3. ARコンテンツ作成勉強会の紹介 ? 2013年5月に勉強会をスタート ? ARコンテンツの作り方をハンズオン形式で学ぶ ? 人数は5~10名程度の少人数で実施 ? 参加条件はAR/VRに興味がある人(知識不要) ? 各地で開催 (福岡、熊本、宮崎、長崎、大分、鹿児島、山口、広島、関東)
- 6. ここから本题
- 9. AR技術の普及 [最近の動向] ? スマートフォンの普及?高性能化によりARが体験可能に ? 販売促進やゲームでのコンテンツが増えて身近な技術に ? Microsoft, Google, Appleも力を入れ普及が加速 GPSベースのARマーカーベースのAR 各種ツールの登場により体験だけでなく開発も身近に
- 10. 開発ツール：Unity Unityとは ? マルチプラットフォーム対応のゲームエンジンおよび開発環境 ? GUI上で視覚的にCGを配置したり機能を追加したりできる ? C#によるプログラミングで細かい挙動も記述可能 ? アセットストアで高品質なCGやアニメーションを入手できる
- 11. ARライブラリ：Vuforia Vuforiaとは ? ARコンテンツ作成ライブラリ(Android, iOS, HoloLens, etc…) ? JavaやC++を用いたネイティブアプリの開発が可能 ? Unity用のライブラリもありノンプログラミングでの開発も可能 ? 開発方法に関するブログも比較的多い ? Unity2017からUnityの機能の一部として取り込まれた
- 12. まずは鲍苍颈迟测の基本操作
- 34. スクリプトの編集 ダブルクリック
- 35. スクリプトを使って立方体を回転 public class TestScript : MonoBehaviour { // 初期化のために初回に一回だけ実行される void Start () { } // 毎フレーム(数10ミリ秒おきに)実行される void Update () { } }
- 36. スクリプトを使って立方体を回転 public class TestScript : MonoBehaviour { // 初期化のために初回に一回だけ実行される void Start () { } // 毎フレーム(数10ミリ秒おきに)実行される void Update () { //毎フレームY軸を中心に0.5度ずつ回転 transform.Rotate(0, 0.5f, 0, Space.Self); } }
- 40. スクリプトを使って立方体を回転 public class TestScript : MonoBehaviour { // 初期化のために初回に一回だけ実行される void Start () { } // 毎フレーム(数10ミリ秒おきに)実行される void Update () { if (Input.GetMouseButton (0)) { //毎フレームY軸を中心に0.5度ずつ回転 transform.Rotate(0, 0.5f, 0, Space.Self); } } }
- 43. 不要なCGの削除 Cubeを削除
- 44. Unityを使ったコンテンツ作成のイメージ Scene画面で配置 Game画面で表示 カメラ CG光源 [詳細情報(Inspectorタブ参照)] ?位置/角度/スケール ?質感(色, テカリ, 透明感など) ?独自の挙動 Unityはゲーム開発環境であってAR専用ツールではない
- 45. カメラ CG光源 Unityを用いたARコンテンツの作成 Scene画面で配置 Game画面で表示 UnityにAR開発ライブラリ(Vuforia,ARToolKitなど)を追加 [詳細情報(Inspectorタブ)] ?位置/角度/スケール ?質感(色, テカリ, 透明感など) ?独自の挙動 ビデオ映像 ターゲット CG ? ターゲットの認識(画像処理) ? カメラの位置?姿勢計算
- 46. UnityとVuforiaの関係 ビデオ映像 ターゲット CG ? ターゲットの認識(画像処理) ? カメラの位置?姿勢計算 Scene画面で配置 Game画面で表示 Unity標準サポートのARライブラリの を使用
- 48. ARコンテンツ作成の基本手順 ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
- 49. 開発の前に??? VuforiaでのARコンテンツ作成には ライセンスキーを事前に作る必要がある → https://developer.vuforia.com/ ①Develop②License Manager ③Get Development Key
- 52. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ビデオ映像 ターゲット CG ① Unity上でVuforiaを利用できるようにする
- 55. Unity上でのVuforia利用設定 (3/4) Vuforia Augmented Reality Support
- 57. 闭じて翱碍
- 58. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ② AR用カメラの設定と画像の表示 ビデオ映像 ターゲット CG
- 61. Import
- 62. webカメラの画像を取得?表示 (3/5) ①ARCamera ②Open Vuforia Engine Configuration
- 63. webカメラの画像を取得?表示 (4/5) App License Keyに Vuforiaのサイトで発行した ライセンスキーを貼り付け
- 65. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ③ ターゲット(マーカー)データの作成 ビデオ映像 ターゲット CG
- 67. ターゲットを作成 (1/5) VuforiaのDeveloper Portalサイトにアクセス&ログイン ①Develop ②Target Manager ③Add Database
- 70. ターゲットを作成 (4/5) ? [Add Target]をクリック ? Single Imageを選択 ? ターゲットとして 使用したい画像を選択 (ilovear.jpg) ? Widthで画像の幅(m)を入力 ? [Add]をクリック 0.160.1
- 71. ターゲットを作成 (5/5) [Download Dataset] → [Unity Editor] → [Download] 分かり易い場所に保存
- 72. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ④ ターゲットのインポート & Sceneに配置 ビデオ映像 ターゲット CG
- 77. ① Unity上でVuforiaを利用できるようにする ② AR用カメラの設定と画像の表示 ③ ターゲット(マーカー)データの作成 ④ ターゲットのインポート & Sceneに配置 ⑤ CGとターゲットを関連付けてAR表示 ARコンテンツ作成の基本手順 ⑤ CGとターゲットを関連付けてAR表示 ビデオ映像 ターゲット CG
- 86. 动作确认
- 88. Extended Trackingを使用 ①ARCamera ②Open Vuforia Engine Configuration
- 89. Extended Trackingを使用 ①Track Device Poseをオン ②Tracking modeをPOSITIONAL
- 94. マウスで颁骋の位置を取得する
- 95. 右クリック時にマウスの位置を取得 void Start () { } void Update () { if (Input.GetMouseButton (0)) { transform.Rotate(0, 0.5f, 0, Space.Self); } else if (Input.GetMouseButton (1)) { //Input.mousePositionでマウスのスクリーン座標を取得 //print関数で二次元座標(x, y)を出力 print (Input.mousePosition.x + "," + Input.mousePosition.y); } }
- 99. スクリーン座標 → マーカ平面座標の手順の基本 ? カメラからスクリーン上のカーソルまでのベクトルvrayを取得 ? vrayがマーカー平面に到達する倍率を算出してvrayにかける ? ??? a? ??? ? ??? 1倍 2倍 a倍
- 100. 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の位置に反映 transform.position=pos; }
- 101. 原点の設定 ①ARCamera ②Vuforia Behavior を見つける ③World Center Modeを FIRST_TARGETに変更
- 102. 完成