Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à オープンソースで始めるAR/VR開発
Similaire à オープンソースで始めるAR/VR開発 (20)
Plus de Takashi Yoshinaga
Plus de Takashi Yoshinaga (18)
Dernier
Dernier (7)
オープンソースで始めるAR/VR開発
- 3. VR・ARの概要
- 4. VR・ARの概要
- 7. VRで主に使われる刺激 人の知覚の割合は視覚が8割以上 (照明学会編 電気書院 1980) 視覚 環境 触覚 嗅覚
- 8. 元祖HMD(Head Mounted Display) 1968, by Ivan Sutherland
- 10. HMDの普及 HMDの低価格化・高性能化により個人やビジネスでの活用が増加 Google CardboardOculus DK1 遠隔会議 不動産 $300 100円~ 活用
- 11. スマホ用ヘッドセット
- 12. VR専用ヘッドセット(HMD) HTC Vive Windows MR [特徴] 自分の足で空間を自由に歩き、手を使ってCGを操作 • HTC Vive：部屋に計測器を設置して位置・角度を取得 • Windows MR : HMDにセンサを搭載して位置・角度を取得 映像の生成ためにハイスペックなPCとの接続が必要
- 13. VR専用ヘッドセット(HMD) [特徴] スタンドアロン型のためVRの体験にケーブルや外部PCが不要。 • Oculus Go：視点は頭の向きにのみ追従。 (3DoF) • Mirage Solo : 視点は頭の向きと位置に追従 。 (6DoF) • Oculusから6DoF対応のOculusQuestも発売予定(2019年) Oculus Go Mirage Solo
- 14. 動作例：Windows MR
- 15. VR・ARの概要
- 16. VR・ARの概要
- 17. ARとは(1/2) Augmented Realityの略。日本語で「拡張現実感」 とも呼ばれる。デジタルな情報(CG,音,etc..)を現実空間に 付加する技術全般を指す。特に視覚情報の付加が主流。
- 21. アプリケーション例：マーカーレスAR 空間にCGを配置し、自由な位置・向きから観察できる ARCore(Google), ARKit(Apple)が提供されている
- 22. アプリケーション例：WebAR Webブラウザでの動作をサポートを開始 【メリット】 アプリをダウンロードが不要 ⁃ ARの体験がより手軽に WebとARの切り替えがシームレスに - 文章や映像を用いるより立体感や サイズ感を直感的に提示しやすい - ECサイト等の表現の幅が広がる 背景をカメラの映像でなく仮想環境 に置き換えればVRコンテンツも可能 https://youtu.be/W1CK_FIj7gg
- 23. アプリケーション ウィンドウ 3Dオブジェクト AR専用デバイス：Microsoft HoloLens HoloLensとは Microsoft社が発売した次世代型ウェアラブルコンピュータ マーカー画像を用いず、空間にオブジェクトを配置可能 頭部に装着して使用するため作業しながら利用できる ジェスチャ操作
- 27. VR/AR開発は？
- 31. A-Frame Webブラウザ上で3D表現を簡単に実現するためのライブラリ HTMLのタグを書くだけで3Dオブジェクトを配置できる Firefox、Chromeなど主要なブラウザがWebVR対応を表明 Windows MRやHTC ViveなどのHMD、スマホVRにも対応 他のライブラリと組み合わせればARも実現できる (開発途上)
- 34. まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
- 35. まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転：マウスでドラッグ 左右：[A][D]キー 前後：[W][S]キー ※前後左右は自分がどちらに動くかで考える
- 42. 基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
- 45. ソースの確認 <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"> </script> </head> <body> <a-scene background="color: #ECECEC"> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
- 46. ソースの確認 <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> 基本図形はa-xxxタグで提供されている https://aframe.io/docs/0.8.0/primi tives/a-box.html(例：a-boxの詳細) 位置 回転 色
- 48. 動作確認
- 49. アレンジしよう タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
- 50. アレンジしよう タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 rotation(傾き)：各軸を中心とした回転で表現 color(色)：カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
- 51. <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> 不要なオブジェクトの削除 HTMLの記述の中からタグを削るだけ 開発時もこの基本サンプルから不要な 情報を削除した後に、アレンジすると楽 <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
- 54. テクスチャ画像をアップロード
- 55. ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> </a-scene> </body> a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更 srcの右辺に画像のURLを貼り付ける ここを変更
- 56. アニメーションの追加 <a-sphere position="0 1.25 -5" radius="1.25" src="テクスチャのURL" shadow> <a-animation attribute = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from ="0 0 0" ←開始時の角度(0,0,0) to = "0 360 0" ←終了時の角度(0,360,0) repeat = "-1" ←繰り返し回数 > </a-animation> </a-sphere> a-animationタグを用いてアニメーションに関する設定を行う Z X Y
- 57. 同じ速度で回転させる <a-animation attribute = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from = "0␣0␣0" ←開始時の角度(0,0,0) to = "0␣360␣0" ←終了時の角度(0,360,0) repeat = "-1" ←繰り返し回数 easing = "linear" ←速度の変化 > </a-animation> easingを追加し、"linear"にすると同じ速度で動くようになる。 ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → http://easings.net/ja
- 59. タグの追加 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene background="color: #000000"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛 > </a-animation> </a-sphere> <a-sky src="背景画像のURL"></a-sky> </a-scene> </body> a-skyタグを利用し、背景情報として画像のURLを指定すればOK a-skyを追加
- 60. ほか、A-Frameで利用できるデータの例 • 文字列 <a-text> • 音 <a-sound> • ビデオ <a-video> • 3Dファイル obj <a-obj-model> glTF <a-gltf-model> COLLADA <a-collada-model> • VRコントローラによる入力 HTC Vive <a-entity vive-controls="hand: left"> WindowsMR <a-entity windows-motion-controls="hand: left">
- 61. AR開発は？
- 62. A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 ちなみにARToolKitは元祖オープンソースARライブラリ 画像の取得 ・ 二値化等の画像処理 ・ マーカの検出 位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
- 63. AR.jsをインポート & カメラ画像の表示 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/ aframe-ar.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 追加 <a-sky src="画像URL"></a-sky>
- 64. マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合<a-marker></a-marker>でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれを表示したい 追加
- 66. 理由と解決方法(1) <a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> 0 0 0 x y z -5 1.25 0 1.25 0
- 67. 理由と解決方法(2) コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる マーカーの位置の計算はカメラが原点にあることを前提としているため要修正 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position=“0 1.25 0" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y
- 70. MRToolKitと開発環境 開発ライブラリ：MixedRealityToolKit (MRToolKit) HoloLensやWinMR対応システムの開発を支援するツールキット 様々なサンプルプログラムを提供 ジェスチャやカーソルの挙動、空間認識をわずかな手間で利用できる 開発環境上(Unity)で視点の移動をする機能なども提供 → 実機がなくても開発可能 開発環境：Unity マルチプラットフォーム対応のゲームエンジンおよび開発環境 GUI上で視覚的にCGを配置したり機能を追加したりできる C#でインタラクティブな挙動を記述することが可能 アセットストアで高品質なCGやエフェクトを入手可能
- 73. ゲーム空間にCGを追加しよう ①空白を右クリック ② 3D Object → Cube
- 76. MRToolKitを用いた開発
- 77. HoloLens用の設定 ①MixedRealityToolKit ② Apply Mixed Reality Project Settings
- 78. HoloLens Cameraの設定 (1/2) Main Cameraを削除 → Deleteキー
- 79. HoloLens Cameraの設定 (2/2) ①Assets → HoloToolkit → Input → Prefabs ②MixedRealityCameraParent ③Hierarchyに ドラッグ&ドロップ
- 80. 動作確認 [←] [→]で左右移動 [↑] [↓]で前進/後退 [Q] [E]で上下 右クリック+マウス移動で回転 ①実行
- 81. カーソルの追加 ①Assets → HoloToolkit → Input → Prefabs → Cursor ②BasicCursor ③Hierarchyにドラッグ&ドロップ
- 83. カーソルの挙動やジェスチャを管理する機能を追加 ① HoloToolkit → Input → Prefabs ②Input Manager
- 85. 両手操作で移動・回転・スケーリング ① Two Handで検索 ②Two Hand Manipulatableをクリック
- 86. 両手操作で移動・回転・スケーリング ①Cube ② Two Hand Manipulatable が追加されていることを確認
- 87. 両手操作で移動・回転・スケーリング [Manipulation Mode] • Move 両手で移動 • Scale 両手で拡大縮小 • Rotate 両手で回転 ※上記を組み合わせることが可能 [Rotation Constraint] • 回転する軸(X,Y,Z)を固定 [Enable One Hand Movement] • 片手で移動or両手で移動
- 89. 実機で動作確認 Build
- 91. 実機で動かそう : HoloLensへのデプロイ Debug Start Without Debugging
- 98. オープンソースHMD: Project North Star 視野角100°,120fpsの光学シースルー型ARデバイス