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.
HoloLensでハンドトラッキング&音声入力
ARコンテンツ作成勉強会
#AR_Fukuoka
まずはUnityの操作の基本
プロジェクトを作成
(1) HoloToolkit-Unity-master.zipをわかりやすい場所に解凍
(2) Unityを起動後、画面右上のOPENをクリック
OPEN
プロジェクトを作成
HoloToolkit-Unity-masterフォルダを開き、[フォルダーの選択]をクリック
HoloToolkit-Unity-master
フォルダーの選択
HoloToolkit-Unity-master
Unityの操作画面(概要)
ゲーム空間の設計画面
空間に置いた
オブジェクト
の名称一覧
プロジェクトに追加されたAsset(CGやプログラムなど)の一覧
ゲーム空間にCGを追加しよう
右クリック
3D Object→Cube
実行してみよう
クリックして実行
クリックして終了
カメラから見た空間
オブジェクトの位置・向き・サイズを調整
クリックして選択
移動 回転 拡大・縮小
Scene(設計画面)の視点を変えよう
[←] [→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右
他にもいろいろ
→ http://goo.gl/Lq1ILT
数値を用いたCGのサイズ指定
クリック
Scaleを全て0.05に変更
※位置や大きさの単位はm
Inspector(≒詳細情報)
CGの詳細情報の編集:色の設定 (1/3)
②右クリック
③ Create
マテリアル(色や質感の設定)を作成
④ Material
①Assets
CGの詳細情報の編集:色の設定 (2/3)
作成したマテリアルの色(Albedo)を設定
(2) Albedoの右側をクリックし、色を選択
(1)作成したマテリアルをクリック
CGの詳細情報の編集:色の設定 (3/3)
オブジェクト(Cube)のマテリアルを開き、作成したマテリアルを割り当て
(2) Materialsの横の▼(1)Cube
(3) Element0に
ドラッグ&ドロップ
確認
色が反映されていればOK。あとから色の変更も可能。
Sceneの保存
Scene名
 [Ctrl]+[s]でダイアログを開き、好きな名前で保存
 コンテンツ作成中はこまめに[Ctrl]+[s]すること
本日作成するコンテンツ
https://youtu.be/2jRWHrl16ec
HoloToolKitを用いた開発
HoloLens Cameraの設定
Main Cameraを削除
※Deleteキー等を使用
HoloLens Cameraの設定
Assets → HoloToolkit → Input → Prefabs
HoloLensCameraを
ドラッグ&ドロップ
動作確認
[↑] [↓]で前進/後退
[←] [→]で左右移動
[Q] [E]で上下
右クリック+マウス移動で回転
SpatialMappingを用いた空間認識
Assets → HoloToolkit → SpatialMapping → Prefabs
SpatialMappingを
ドラッグ&ドロップ
実物体によるCGの隠れ(オクルージョン)を表現する...
イメージ
空間がメッシュ化
隠れる
手の位置を取得してCGを追従させる
このあとやりたい事
ジェスチャ入力を管理する機能を追加
HoloToolkit → Input → Prefabs
Input Managerをドラッグ&ドロップ
動作確認
実行
[Shift]を押すと手が表示され、
そのまま左クリックでAirTap
手の検出や位置を受け取るスクリプトを作成
空白を右クリック
CreateEmpty
スクリプトを貼りつけるための空のオブジェクトを作成
AirTapを受け取るスクリプトを作成
(1)GameObject
(2)Add Component
AirTapを受け取るスクリプトを作成
New Script
スクリプト名
例:Receiver
Create and Add
スクリプトが追加されてる
スクリプトファイルをVisualStudioで開く
Assets
スクリプト(Receiver)
をダブルクリック
スクリプトの記述
using HoloToolkit.Unity.InputModule;
public class Receiver : MonoBehaviour
{
// Start関数は初期化のために一度だけ実行される
void Sta...
不要コードの削除
public class Receiver : MonoBehaviour, ISourceStateHandler, IInputHandler
{
public void OnInputDown(InputEventDat...
このあとやる事
ジェスチャしたことを知っているのは
InputManager
ジェスチャ時のスクリプトを記述するのはこっち
InputManagerがジェスチャを認識した時にGameObjectに通知する
ジェスチャの受信設定と手の検出
//手を検出した時に呼ばれる関数
public void OnSourceDetected(SourceStateEventData eventData)
{
Debug.Log("手を検出");
}
//手を見...
動作確認
①実行
④手の検出/ロストが表示される
②Consoleタブ
③Shift
指の状態の取得
//人差指をおろした時に呼ばれる
public void OnInputDown(InputEventData eventData)
{
Debug.Log("Down");
}
//人差指を上げた時に呼ばれる
public v...
動作確認
①実行
④Up/Downも表示される
②Consoleタブ
③Shift
手の状態を保持する
bool drag = false; //ドラッグor開放の状態を保持する変数
public void OnInputDown(InputEventData eventData)
{
drag = true;
Debug.L...
手の位置を取得する準備
IInputSource currentInputSource; //入力情報
uint id; //入力情報のID
bool drag = false;
public void OnInputDown(InputEve...
手の位置にオブジェクトを追従させる
IInputSource currentInputSource; //入力情報
uint id; //入力情報のID
bool drag = false;
public GameObject obj; //C...
コード内のobjとUnityエディタ内のCubeを対応付ける
GameObject
コード内のobjとUnityエディタ内のCubeを対応付ける
CubeをReceiverスクリプトのObjにドラッグ&ドロップ
動作確認
Shift + クリックで
手(マウスカーソル)に追従
実機で動かそう:カメラの設定
HoloLensCameraのNearの値を0.2[m]に変更
※ 0.85が推奨されているがそれだと手元のCGが見えないため
①HoloLensCamera
②Nearを0.2に変更
実機で動かそう : 出力の際の設定
(1)Edit
(2)Project Settings
(3)Player
(4)ProductNameを
自分の名前に
(5)Windows Store App
実機で動かそう : 出力の際の設定
Short nameを
自分の名前に
icon Other Settings
Virtual Reality
Supported
Publishing Settings
Package Nameを
自分の名前に
実機で動かそう : 出力の際の設定
File
Build Settings
実機で動かそう : Build
①Add OpenScenes
②Windows Store
③Switch Platform
・ SDK
Universal 10
・ Target device
HoloLens
・ UWP Build Ty...
実機で動かそう : Build用フォルダの作成
Appと名前を付ける
新しいフォルダ
フォルダーの選択
実機で動かそう
プロジェクト名.sln
Appフォルダ
実機で動かそう : HoloLensへのデプロイ
x86
横の▼
Device
(USB接続の場合)
実機で動かそう : HoloLensへのデプロイ
Debug
Start Without
Debugging
動作確認
Trail Rendererで軌跡を描画する
Add Component
Cubeをクリック
Trail Rendererで軌跡を描画する
Trailと入力
【Trail Renderer】
■Material
前半で作ったマテリアル
をElementに追加
■Time
Infinityに変更
■MinVertexDistance
0....
動作確認
①実行
軌跡が描画される
※ただし1本のみ
複数の線を描画しよう
一本目 二本目
・・・
Cube生成 Cube生成
【考え方】
 今いじっているCubeは軌跡描画機能付きのオブジェクト
 ドラッグ開始毎にCubeを生成できれば複数の線も描画可能
複数の線を描画しよう
① Assets
② Cube
CubeをAssetsに
ドラッグ&ドロップ
③ 軌跡描画機能付きの
Cubeを再利用可能に
複数の線を描画しよう
Delete
複数の線を描画しよう
IInputSource currentInputSource;
uint id;
public GameObject obj; //線の描画に使用するGameObject
public GameObject origin...
複数の線を描画しよう
② GameObject
① Assets
CubeをOriginalに
ドラッグ&ドロップ
動作確認
①実行
複数の軌跡を
描画できる
線を一括削除する関数を作成
void Update () {
if (drag)
{
Vector3 pos;
currentInputSource.TryGetPosition(id, out pos);
obj.transform.posi...
音声入力で線を削除
② Add Component
① Input Manager
音声入力で線を削除
② Keyword Manager
① Keywordと入力
【Keyword Manager】
■Size
1
※認識させる単語数
■Keyword
reset
※認識させたい単語
■KeyCode
R
※UnityEdi...
音声入力で線を削除
① +をクリック
② GameObjectを選択
③ Receiver→ResetLine
Response()の項目にて、単語(reset)を認識した際に
実行される関数(Receiver内のResetLine関数)を設定
仕上げ
① SpatialMapping
② Surface Materialを
Occlusionに変更
完成
参考
本勉強会参加者の宮田さんがQiitaに手順をまとめてくれました。
サクッと作って試したい方は是非こちらを参照してください
http://qiita.com/miyatama/items/06e2b01cbdf4661bc81d
Upcoming SlideShare
Loading in …5
×

HoloLensハンズオン:ハンドトラッキング&音声入力編

6,723 views

Published on

ARコンテンツ作成勉強会 HoloLens編vol3で使用した資料

Published in: Technology
  • Be the first to comment

HoloLensハンズオン:ハンドトラッキング&音声入力編

  1. 1. HoloLensでハンドトラッキング&音声入力 ARコンテンツ作成勉強会 #AR_Fukuoka
  2. 2. まずはUnityの操作の基本
  3. 3. プロジェクトを作成 (1) HoloToolkit-Unity-master.zipをわかりやすい場所に解凍 (2) Unityを起動後、画面右上のOPENをクリック OPEN
  4. 4. プロジェクトを作成 HoloToolkit-Unity-masterフォルダを開き、[フォルダーの選択]をクリック HoloToolkit-Unity-master フォルダーの選択 HoloToolkit-Unity-master
  5. 5. Unityの操作画面(概要) ゲーム空間の設計画面 空間に置いた オブジェクト の名称一覧 プロジェクトに追加されたAsset(CGやプログラムなど)の一覧
  6. 6. ゲーム空間にCGを追加しよう 右クリック 3D Object→Cube
  7. 7. 実行してみよう クリックして実行 クリックして終了 カメラから見た空間
  8. 8. オブジェクトの位置・向き・サイズを調整 クリックして選択 移動 回転 拡大・縮小
  9. 9. Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右 他にもいろいろ → http://goo.gl/Lq1ILT
  10. 10. 数値を用いたCGのサイズ指定 クリック Scaleを全て0.05に変更 ※位置や大きさの単位はm Inspector(≒詳細情報)
  11. 11. CGの詳細情報の編集:色の設定 (1/3) ②右クリック ③ Create マテリアル(色や質感の設定)を作成 ④ Material ①Assets
  12. 12. CGの詳細情報の編集:色の設定 (2/3) 作成したマテリアルの色(Albedo)を設定 (2) Albedoの右側をクリックし、色を選択 (1)作成したマテリアルをクリック
  13. 13. CGの詳細情報の編集:色の設定 (3/3) オブジェクト(Cube)のマテリアルを開き、作成したマテリアルを割り当て (2) Materialsの横の▼(1)Cube (3) Element0に ドラッグ&ドロップ
  14. 14. 確認 色が反映されていればOK。あとから色の変更も可能。
  15. 15. Sceneの保存 Scene名  [Ctrl]+[s]でダイアログを開き、好きな名前で保存  コンテンツ作成中はこまめに[Ctrl]+[s]すること
  16. 16. 本日作成するコンテンツ https://youtu.be/2jRWHrl16ec
  17. 17. HoloToolKitを用いた開発
  18. 18. HoloLens Cameraの設定 Main Cameraを削除 ※Deleteキー等を使用
  19. 19. HoloLens Cameraの設定 Assets → HoloToolkit → Input → Prefabs HoloLensCameraを ドラッグ&ドロップ
  20. 20. 動作確認 [↑] [↓]で前進/後退 [←] [→]で左右移動 [Q] [E]で上下 右クリック+マウス移動で回転
  21. 21. SpatialMappingを用いた空間認識 Assets → HoloToolkit → SpatialMapping → Prefabs SpatialMappingを ドラッグ&ドロップ 実物体によるCGの隠れ(オクルージョン)を表現するために使用
  22. 22. イメージ 空間がメッシュ化 隠れる
  23. 23. 手の位置を取得してCGを追従させる このあとやりたい事
  24. 24. ジェスチャ入力を管理する機能を追加 HoloToolkit → Input → Prefabs Input Managerをドラッグ&ドロップ
  25. 25. 動作確認 実行 [Shift]を押すと手が表示され、 そのまま左クリックでAirTap
  26. 26. 手の検出や位置を受け取るスクリプトを作成 空白を右クリック CreateEmpty スクリプトを貼りつけるための空のオブジェクトを作成
  27. 27. AirTapを受け取るスクリプトを作成 (1)GameObject (2)Add Component
  28. 28. AirTapを受け取るスクリプトを作成 New Script スクリプト名 例:Receiver Create and Add スクリプトが追加されてる
  29. 29. スクリプトファイルをVisualStudioで開く Assets スクリプト(Receiver) をダブルクリック
  30. 30. スクリプトの記述 using HoloToolkit.Unity.InputModule; public class Receiver : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void Start () { } // Update関数は毎フレーム実行される void Update () { } } InputModuleの読み込みとISourceStateHandler, IInputHandlerを実装 , ISourceStateHandler, IInputHandler ISourceStateHandlerとIInputHandlerにカーソルを 合わせ、ヒントからInplement interfaceをそれぞれ選択
  31. 31. 不要コードの削除 public class Receiver : MonoBehaviour, ISourceStateHandler, IInputHandler { public void OnInputDown(InputEventData eventData) { throw new NotImplementedException(); } public void OnInputUp(InputEventData eventData) { throw new NotImplementedException(); } public void OnSourceDetected(SourceStateEventData eventData) { throw new NotImplementedException(); } public void OnSourceLost(SourceStateEventData eventData) { throw new NotImplementedException(); } throw new NotImplementedException(); throw new NotImplementedException(); throw new NotImplementedException(); throw new NotImplementedException();
  32. 32. このあとやる事 ジェスチャしたことを知っているのは InputManager ジェスチャ時のスクリプトを記述するのはこっち InputManagerがジェスチャを認識した時にGameObjectに通知する
  33. 33. ジェスチャの受信設定と手の検出 //手を検出した時に呼ばれる関数 public void OnSourceDetected(SourceStateEventData eventData) { Debug.Log("手を検出"); } //手を見失った時に呼ばれる関数 public void OnSourceLost(SourceStateEventData eventData) { Debug.Log("手をロスト"); } void Start () { InputManager.Instance.PushFallbackInputHandler(gameObject); } void Update () { } このスクリプトが貼り付けられている オブジェクト(gameObject)に ジェスチャの通知が来るように登録
  34. 34. 動作確認 ①実行 ④手の検出/ロストが表示される ②Consoleタブ ③Shift
  35. 35. 指の状態の取得 //人差指をおろした時に呼ばれる public void OnInputDown(InputEventData eventData) { Debug.Log("Down"); } //人差指を上げた時に呼ばれる public void OnInputUp(InputEventData eventData) { Debug.Log("Up"); } public void OnSourceDetected(SourceStateEventData eventData) { Debug.Log("手を検出"); } public void OnSourceLost(SourceStateEventData eventData) { Debug.Log("手をロスト"); }
  36. 36. 動作確認 ①実行 ④Up/Downも表示される ②Consoleタブ ③Shift
  37. 37. 手の状態を保持する bool drag = false; //ドラッグor開放の状態を保持する変数 public void OnInputDown(InputEventData eventData) { drag = true; Debug.Log("Down"); } public void OnInputUp(InputEventData eventData) { drag = false; Debug.Log("Up"); } public void OnSourceDetected(SourceStateEventData eventData) { Debug.Log("手を検出"); } public void OnSourceLost(SourceStateEventData eventData) { drag = false; Debug.Log("手をロスト"); }
  38. 38. 手の位置を取得する準備 IInputSource currentInputSource; //入力情報 uint id; //入力情報のID bool drag = false; public void OnInputDown(InputEventData eventData) { if (!eventData.InputSource.SupportsInputInfo (eventData.SourceId, SupportedInputInfo.Position)) { return; } currentInputSource = eventData.InputSource; id = eventData.SourceId; drag = true; Debug.Log("Down"); } 追加
  39. 39. 手の位置にオブジェクトを追従させる IInputSource currentInputSource; //入力情報 uint id; //入力情報のID bool drag = false; public GameObject obj; //Cubeの情報を覚えておく変数 public void OnInputDown(InputEventData eventData) { /*関数の中身を省略*/ } /*各関数(省略)*/ void Update () { if (drag) { Vector3 pos; currentInputSource.TryGetPosition(id, out pos); obj.transform.position = pos; } }
  40. 40. コード内のobjとUnityエディタ内のCubeを対応付ける GameObject
  41. 41. コード内のobjとUnityエディタ内のCubeを対応付ける CubeをReceiverスクリプトのObjにドラッグ&ドロップ
  42. 42. 動作確認 Shift + クリックで 手(マウスカーソル)に追従
  43. 43. 実機で動かそう:カメラの設定 HoloLensCameraのNearの値を0.2[m]に変更 ※ 0.85が推奨されているがそれだと手元のCGが見えないため ①HoloLensCamera ②Nearを0.2に変更
  44. 44. 実機で動かそう : 出力の際の設定 (1)Edit (2)Project Settings (3)Player (4)ProductNameを 自分の名前に (5)Windows Store App
  45. 45. 実機で動かそう : 出力の際の設定 Short nameを 自分の名前に icon Other Settings Virtual Reality Supported Publishing Settings Package Nameを 自分の名前に
  46. 46. 実機で動かそう : 出力の際の設定 File Build Settings
  47. 47. 実機で動かそう : Build ①Add OpenScenes ②Windows Store ③Switch Platform ・ SDK Universal 10 ・ Target device HoloLens ・ UWP Build Type D3D 最後にBuild
  48. 48. 実機で動かそう : Build用フォルダの作成 Appと名前を付ける 新しいフォルダ フォルダーの選択
  49. 49. 実機で動かそう プロジェクト名.sln Appフォルダ
  50. 50. 実機で動かそう : HoloLensへのデプロイ x86 横の▼ Device (USB接続の場合)
  51. 51. 実機で動かそう : HoloLensへのデプロイ Debug Start Without Debugging
  52. 52. 動作確認
  53. 53. Trail Rendererで軌跡を描画する Add Component Cubeをクリック
  54. 54. Trail Rendererで軌跡を描画する Trailと入力 【Trail Renderer】 ■Material 前半で作ったマテリアル をElementに追加 ■Time Infinityに変更 ■MinVertexDistance 0.05 ■Width 0.02 Trail Rendererを ダブルクリック
  55. 55. 動作確認 ①実行 軌跡が描画される ※ただし1本のみ
  56. 56. 複数の線を描画しよう 一本目 二本目 ・・・ Cube生成 Cube生成 【考え方】  今いじっているCubeは軌跡描画機能付きのオブジェクト  ドラッグ開始毎にCubeを生成できれば複数の線も描画可能
  57. 57. 複数の線を描画しよう ① Assets ② Cube CubeをAssetsに ドラッグ&ドロップ ③ 軌跡描画機能付きの Cubeを再利用可能に
  58. 58. 複数の線を描画しよう Delete
  59. 59. 複数の線を描画しよう IInputSource currentInputSource; uint id; public GameObject obj; //線の描画に使用するGameObject public GameObject original; //テンプレートとなるCubeを保持 List<GameObject> cubes = new List<GameObject>(); public void OnInputDown(InputEventData eventData) { if (!eventData.InputSource.SupportsInputInfo (eventData.SourceId, SupportedInputInfo.Position)){ return; } GameObject tmp = GameObject.Instantiate(original); obj = tmp; cubes.Add(tmp); //生成したCubeをすべて保持 currentInputSource = eventData.InputSource; id = eventData.SourceId; drag = true; Debug.Log("Down"); }
  60. 60. 複数の線を描画しよう ② GameObject ① Assets CubeをOriginalに ドラッグ&ドロップ
  61. 61. 動作確認 ①実行 複数の軌跡を 描画できる
  62. 62. 線を一括削除する関数を作成 void Update () { if (drag) { Vector3 pos; currentInputSource.TryGetPosition(id, out pos); obj.transform.position = pos; } } public void ResetLine() { for(int i = 0; i < cubes.Count; i++) { Destroy(cubes[i]); cubes[i] = null; } cubes.Clear(); } 追加
  63. 63. 音声入力で線を削除 ② Add Component ① Input Manager
  64. 64. 音声入力で線を削除 ② Keyword Manager ① Keywordと入力 【Keyword Manager】 ■Size 1 ※認識させる単語数 ■Keyword reset ※認識させたい単語 ■KeyCode R ※UnityEditor上で 仮想入力するため のKey
  65. 65. 音声入力で線を削除 ① +をクリック ② GameObjectを選択 ③ Receiver→ResetLine Response()の項目にて、単語(reset)を認識した際に 実行される関数(Receiver内のResetLine関数)を設定
  66. 66. 仕上げ ① SpatialMapping ② Surface Materialを Occlusionに変更
  67. 67. 完成
  68. 68. 参考 本勉強会参加者の宮田さんがQiitaに手順をまとめてくれました。 サクッと作って試したい方は是非こちらを参照してください http://qiita.com/miyatama/items/06e2b01cbdf4661bc81d

×