Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to UnityとVuforiaで始めるAR開発
Similar to UnityとVuforiaで始めるAR開発 (20)
More from Takashi Yoshinaga
More from Takashi Yoshinaga (17)
Recently uploaded
Recently uploaded (15)
UnityとVuforiaで始めるAR開発
- 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. まずはUnityの基本操作
- 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. 閉じてOK
- 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. マウスでCGの位置を取得する
- 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. 完成