Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20171218_HoloLens読書会vol.2発表資料

2,443 views

Published on

第2回 HoloLens参考書 読書会の資料
https://techplay.jp/event/640968

Published in: Technology
  • Be the first to comment

20171218_HoloLens読書会vol.2発表資料

  1. 1. 第2回 HoloLens参考書 読書会 2017/12/18 山中 大輔
  2. 2. 今回お伝えする内容 HoloLensアプリにおける、 代表的な入力方法とその実装方法を理解しよう!
  3. 3. HoloLensアプリの主な操作方法 • Gaze 頭を動かして画面に表示されたカーソルを動かす • Gesture ハンドジェスチャーを使ってデバイスに入力を伝える • Voice 音声を使ってデバイスに入力する
  4. 4. Gaze 頭を動かして 画面上のカーソルを操作する オブジェクトにカーソルを重ねて そのオブジェクトを選択する ⇒パソコンにおけるマウス移動に相当する
  5. 5. Gesture Air Tap Hold Manipulation Bloom クリック ドラッグ メニューの開閉 アプリの終了 ものをつまむ ようなイメージ 指を倒して 持ち上げる 花が咲き誇る ようなイメージ ⇒パソコンにおけるマウスクリック操作に相当する
  6. 6. Voice Select Remove Drag Adjust Scroll SkypeStore ⇒キーワードによる操作 ⇒自由文入力 This is a pen. I want to search about soccer.
  7. 7. ユーザが操作できるHoloアプリを作ろう • Step.1 MixedRealityToolkit-Unity(MRTK)を導入しよう • Step.2 便利なプレハブをシーンに配置しよう • Step.3 スクリプトを書こう HoloLensアプリ開発において、 ユーザのジェスチャー入力を取り扱うまでのステップバイステップ
  8. 8. ユーザが操作できるHoloアプリを作ろう • Step.1 MixedRealityToolkit-Unity(MRTK)を導入しよう • Step.2 便利なプレハブをシーンに配置しよう • Step.3 スクリプトを書こう HoloLensアプリ開発において、 ユーザのジェスチャー入力を取り扱うまでのステップバイステップ
  9. 9. MixedRealityToolkit-Unityとは HoloLensアプリ開発に役立つ部品がたくさん入ったライブラリ https://github.com/Microsoft/MixedRealityToolkit-Unity
  10. 10. MRTKをUnityに導入する リリースページへ
  11. 11. MRTKをUnityに導入する 使用しているUnityのバージョンに合わせてパッケージをダウンロードする • 参考書ではUnity 5.6用のパッケージが使用されています • 今回は新しい&安定している上記のUnity 2017.1.2f1用のパッケージを使用します
  12. 12. MRTKをUnityに導入する ダウンロードしたファイルを 「Project」にドラッグ&ドロップ
  13. 13. ユーザが操作できるHoloアプリを作ろう • Step.1 MixedRealityToolkit-Unity(MRTK)を導入しよう • Step.2 便利なプレハブをシーンに配置しよう • Step.3 スクリプトを書こう HoloLensアプリ開発において、 ユーザのジェスチャー入力を取り扱うまでのステップバイステップ
  14. 14. 便利なプレハブをシーンに配置しよう • プレハブとは シーン上に配置できるオブジェクトのテンプレート スクリプトからワンラインで複製できる Unityエディタ上からドラッグ&ドロップで配置もできる HierarchyからProjectにドラッグ&ドロップでプレハブを 作ることもできる
  15. 15. 便利なMRTKのプレハブたち • HoloLensCamera HoloLensアプリ用にチューンされたカメラオブジェクト • InputManager Gaze、Gesture、Voice操作をアプリで使えるようにしてくれる • DefaultCursor Holo Shellと同じカーソルを使えるようにしてくれる • SpatialMapping 周辺環境をスキャンしメッシュを貼ってくれる
  16. 16. 便利なMRTKのプレハブたち • HoloLensCamera HoloLensアプリ用にチューンされたカメラオブジェクト • InputManager Gaze、Gesture、Voice操作をアプリで使えるようにしてくれる • DefaultCursor Holo Shellと同じカーソルを使えるようにしてくれる • SpatialMapping 周辺環境をスキャンしメッシュを貼ってくれる
  17. 17. ユーザが操作できるHoloアプリを作ろう • Step.1 MixedRealityToolkit-Unity(MRTK)を導入しよう • Step.2 便利なプレハブをシーンに配置しよう • Step.3 スクリプトを書こう HoloLensアプリ開発において、 ユーザのジェスチャー入力を取り扱うまでのステップバイステップ
  18. 18. Gazeの仕組み Ray Rayとオブジェクトが衝突 ⇒フォーカスを当てている ・InputManager内のGazeManagerが、 毎フレーム、視線方向にRayを飛ばす Ray : Unity上で任意の地点/方向から発射できる光線のようなもの 衝突判定などに使われる
  19. 19. Gazeの仕組み 青矢印の方向に Rayを飛ばしている
  20. 20. Gazeの仕組み GazeManager Rayがヒットした オブジェクトはどれか Rayがヒットした オブジェクトはあるか Rayがヒットした 座標はどこか Rayはどこから 発射されたか ・GazeManagerからRayを飛ばした結果についていろいろな情報を取得できる
  21. 21. ジェスチャー入力の仕組み RawInteraction Sources GestureInput InputManager 手の動きを監視 入力イベントを通知 検出したジェスチャーを通知 フォーカスしている オブジェクト Hi!!! 入力ソース
  22. 22. スクリプトを書いてみる 最重要‼ メソッドにAirTapされたときの動作を書く
  23. 23. スクリプトを書いてみる スクリプトを オブジェクトにアタッチ
  24. 24. こんな感じで動く
  25. 25. 真・ジェスチャー入力の仕組み RawInteraction Sources GestureInput InputManager Gesture フォーカスしている オブジェクト Hi!!! GazeManager 1. GazeManagerから フォーカス対象を取得 2. オブジェクトがインタフェースを実装しているか確認 3. メソッドをコール
  26. 26. 取り扱えるジェスチャー ジェスチャー名 対応するインタフェース AirTap IInputClickHandler Hold IHoldHandler Manipulation IManipulationHandler Navigation INavigationHandler
  27. 27. Manipulationについて
  28. 28. Manipulationについて Started Updated Completed Canceled Manipulationの開始 Manipulation継続中 Manipulation終了 Manipulation中に 手をロスト
  29. 29. Manipulationについて ・Manipulation中は手の位置の座標を取得できる。(単位はメートル) Started Updated (0, 0, 0) (0.9, 0.2, 0.3) 開始時(Started)を(0,0,0)とした相対的な位置を Updateにて取得できる
  30. 30. Manipulationについて
  31. 31. ユーザが操作できるHoloアプリを作ろう • Step.1 MixedRealityToolkit-Unity(MRTK)を導入しよう • Step.2 便利なプレハブをシーンに配置しよう • Step.3 スクリプトを書こう HoloLensアプリ開発において、 ユーザのジェスチャー入力を取り扱うまでのステップバイステップ
  32. 32. Select Voice入力の仕組み SpeechInput Source InputManager 発声内容を監視 イベントを通知 フォーカスしている オブジェクト Hi!!! Select Adjust Save… リスト キーワードリストのどれかと一致した場合
  33. 33. Voice入力の実装 自分でMRTKのスクリプトを配置する
  34. 34. Voice入力の実装 キーワードリストを作る
  35. 35. Voice入力の実装 操作したいオブジェクトにMRTKのスクリプトを配置する
  36. 36. Voice入力の実装 キーワード認識時のスクリプトを用意
  37. 37. Voice入力の実装 MRTKのスクリプトを配置する 作成したスクリプトを配置する
  38. 38. Voice入力の実装 「+」ボタンを押すと、1行増える
  39. 39. Voice入力の実装 「Keyword」リストボックスを押して、キーワードを選択
  40. 40. Voice入力の実装 「+」ボタンを押す
  41. 41. Voice入力の実装 作成したスクリプトがアタッチされている オブジェクトを選択する(ここでは自分自身)
  42. 42. Voice入力の実装 Functionリストから キーワード認識時に動かすメソッドを選択
  43. 43. 応用編)入力イベントの伝搬 ・フォーカスを当てているオブジェクト以外にも入力イベントを通知できる ・通知するオブジェクトに優先順位をつけることができる グローバルリスナーに 入力イベントを通知 モーダルオブジェクトに 入力イベントを通知 フォーカスオブジェクトに 入力イベントを通知 フォールバックオブジェク トに入力イベントを通知 グローバルリスナーが 登録されている モーダルオブジェクト が登録されている and I/Fが実装されている オブジェクトに フォーカスを当てている and I/Fが実装されている フォールバックオブジェ クトが登録されている and I/Fが実装されている END yes yes yes yes no no no
  44. 44. 応用編)サンプル • 何もないとこをAir Tap⇒Cubeが出現 • CubeをAirTap⇒落ちる • CubeをManipulation⇒移動
  45. 45. 応用編)入力イベントの伝搬 ・何もないところをAirTapしたときに反応させる ⇒フォーカスを当てていないときの動作を設定する (フォーカス関係無し) グローバルリスナーに 入力イベントを通知 モーダルオブジェクトに 入力イベントを通知 フォーカスオブジェクトに 入力イベントを通知 フォールバックオブジェク トに入力イベントを通知 グローバルリスナーが 登録されている モーダルオブジェクト が登録されている and I/Fが実装されている オブジェクトに フォーカスを当てている and I/Fが実装されている フォールバックオブジェ クトが登録されている and I/Fが実装されている END yes yes yes yes no no no
  46. 46. 応用編)入力イベントの伝搬 ・CubeをAirTapしたときに反応させる ⇒IInputClickHandlerを実装するだけ グローバルリスナーに 入力イベントを通知 モーダルオブジェクトに 入力イベントを通知 フォーカスオブジェクトに 入力イベントを通知 フォールバックオブジェク トに入力イベントを通知 グローバルリスナーが 登録されている モーダルオブジェクト が登録されている and I/Fが実装されている オブジェクトに フォーカスを当てている and I/Fが実装されている フォールバックオブジェ クトが登録されている and I/Fが実装されている END yes yes yes yes no nono
  47. 47. 応用編)入力イベントの伝搬 ・CubeをManipulationで移動させる ⇒Manipulation中にフォーカスを外すと移動が終了してしまうので、 Manipulation中はフォーカスに関係なく移動するようにする グローバルリスナーに 入力イベントを通知 モーダルオブジェクトに 入力イベントを通知 フォーカスオブジェクトに 入力イベントを通知 フォールバックオブジェク トに入力イベントを通知 グローバルリスナーが 登録されている モーダルオブジェクト が登録されている and I/Fが実装されている オブジェクトに フォーカスを当てている and I/Fが実装されている フォールバックオブジェ クトが登録されている and I/Fが実装されている END yes yes yes yes no no no
  48. 48. 応用編)入力イベントの伝搬 Manipulation開始時に登録 Manipulation終了時に解放
  49. 49. 入力についてもっと詳しく知りたい人向け GazeManagerやInputManagerの実装について • MixedRealityToolkit-UnityのInputManagerを紐解く ~Gaze編~ http://blog.d-yama7.com/archives/1133 • MixedRealityToolkit-UnityのInputManagerを紐解く ~Gesture編~ http://blog.d-yama7.com/archives/1223 • MixedRealityToolkit-UnityのInputManagerを紐解く ~Voice編~ http://blog.d-yama7.com/archives/1281
  50. 50. 入力についてもっと詳しく知りたい人向け Unityが提供する標準APIも知っておくとよい • HoloLensで利用できるジェスチャー入力について(Unity 2017.1まで編) http://akihiro-document.azurewebsites.net/post/hololens_input20171/ • HoloLensで利用できるジェスチャー入力について(Unity 2017.2編) http://akihiro-document.azurewebsites.net/post/hololens_input20172/ (アキヒロ氏@ホロラボによる解説)
  51. 51. 参考書のサンプル • AirTapするとオブジェクトが動き出す • オブジェクトをGazeすると色が緑に変化する • Gazeした状態で「Change Color」と発話すると色が青に変化する
  52. 52. 参考書のサンプル • AirTapするとオブジェクトが動き出す • オブジェクトをGazeすると色が緑に変化する • Gazeした状態で「Change Color」と発話すると色が青に変化する
  53. 53. Unityでアニメーションを作る • アニメは「原画」と「動画」で出来ている • Unityで作れるアニメーションも、考え方は同じ 原画に相当(キーフレーム)
  54. 54. アニメーション作成手順(準備) • 2つのCubeをシーンに配置 LeftRect:Position(-0.5, 0, 4) Scale(1, 0.2, 0.2) RightRect:Position(0.5, 0, 4) Scale(1, 0.2, 0.2)
  55. 55. アニメーション作成手順(準備) • 「Window」⇒「Animation」からAnimationウィンドウを表示
  56. 56. アニメーション作成手順(準備) • LeftRectを選択した状態で、「Create」ボタンを押す
  57. 57. アニメーション作成手順(準備) • ダイアログが表示されるので「LeftRectIdle.anim」で保存
  58. 58. アニメーション作成手順(準備) • 「Create New Clip」を選択し、「LeftRectMove」を作る
  59. 59. アニメーション作成手順 • 「Add Property」を選択し、時間経過で動かしたい値を選択する • オブジェクトの位置をアニメーションさせたいので LectMoveアニメーションにて、Positionを選択する
  60. 60. アニメーション作成手順 • 「どこ」に「何秒」かけて動かしたいかを考えてキーフレームを配置する 録画ボタンを押し、0:20にキーフレームを配置
  61. 61. アニメーション作成手順 • キーフレームでのPositionを設定する 設定中のキーフレーム キーフレームの移動 インスペクタから設定
  62. 62. アニメーション作成手順 • 設定値(参考) LeftRectMove 0:20 - Position (-0.5, 0.2, 4) 0:40 – Position (-0.5, -0.2, 4) RightRectMove 0:20 - Position (0.5, -0.2, 4) 0:40 – Position (0.5, 0.2, 4)
  63. 63. 複数のアニメーションをまとめる メカニム • 状態遷移図を使ってアニメーション間の遷移を制御する ステート(ノード) トランジション パラメータ
  64. 64. トランジションの設定 • 遷移元のステートを右クリックし「Make Transition」を選択する
  65. 65. トランジションの設定 • 遷移先のステートを選択する
  66. 66. パラメータの設定 • 「Parameters」タブの「+」ボタンを押して追加する
  67. 67. スクリプトでアニメーションを制御する • 「LeftRect」「RightRect」に以下のスクリプトをアタッチ AirTapでパラメータを反転させる パラメータによって アニメーションを切り替え
  68. 68. メカニムをもっと活用する • 「RectIdle」から「RectMove」へのトランジションを作る
  69. 69. メカニムをもっと活用する • 遷移条件を追加して、boolパラメータ「idle」が falseとなったときに遷移するようにする 「+」ボタンを押して遷移条件を追加できる
  70. 70. メカニムをもっと活用する • 「RectMove」から「RectIdle」へのトランジションも同様に作る • 遷移条件はboolパラメータ「idle」がtrueとなったとき
  71. 71. メカニムをもっと活用する 不要
  72. 72. 参考書のサンプル • AirTapするとオブジェクトが動き出す • オブジェクトをGazeすると色が緑に変化する • Gazeした状態で「Change Color」と発話すると色が青に変化する
  73. 73. オブジェクトの色を動的に変える • スクリプトからオブジェクトのマテリアルにアクセスする • アクセスしたマテリアルを使って色を変える
  74. 74. マテリアルとは • マテリアル オブジェクトに適用するテクスチャ、シェーダーと、その設定値を保持し ている。表面の色や質感などのデータを保持しているもの。 • シェーダー マテリアルでの設定をもとに、描画を行うプログラム • テクスチャ オブジェクトの表面に貼り付けるビットマップ画像 https://docs.unity3d.com/jp/540/Manual/Shaders.html
  75. 75. テクスチャの取得 • アセットストアからダウンロードするのがオススメ
  76. 76. オブジェクトにテクスチャを貼る 画像をドラッグ&ドロップするだけ (マテリアルも自動で作られる)
  77. 77. フォーカスのタイミングを捕まえる • ジェスチャーと同様、インタフェースを実装する
  78. 78. フォーカスのタイミングを捕まえる(補足) • 参考書では「OnFocusEvent.cs」を使っている • HoloToolkit-Unity-Tests-vXXX.unitypackageに含まれていた • ちょっと前にこれらのスクリプトはリポジトリから消えた • IFocusableインタフェースを実装しUnityEventクラスを使って インスペクタから動作を設定できるようにしたもの • Voiceコマンドと同じように動作を設定するスクリプトと思え ばよい
  79. 79. マテリアルへのアクセス • マテリアルはRendererコンポーネントからアクセスできる
  80. 80. 参考書のサンプル • AirTapするとオブジェクトが動き出す • オブジェクトをGazeすると色が緑に変化する • Gazeした状態で「Change Color」と発話すると色が青に変化する
  81. 81. Voice入力はすでに説明したとおり! • Voice入力時の動作をスクリプトで定義する
  82. 82. Voice入力はすでに説明したとおり! • キーワードに応じた動作をインスペクタから設定する

×