WebVR文化祭 2016/11/23

1. HoloLens 2Dでもここまでできる
2016/11/23 初音玲

2. 自己紹介
初音 玲
仕事略歴
• システム企画
• インフラ構築
• 業務アプリ構築
• DB設計、構築、各種支援
略歴
• Microsoft MVP (2008/04-2017/03)
• Oracle ACE (2008/04-:日本で２人目)
• TMCNテクニカルエバンジェリスト
2

3. アジェンダ
Microsoft HoloLens
Microsoft Holographic
MRプログラミング
3

4. Microsoft HoloLens
4

5. 5

6. 6

7. 7

8. HoloLensは単体動作するMRデバイス
8

9. たくさんのセンサー
9

10. Microsoft Holographic
10

11. Microsoft Holographic
提供時期
• 2016年6月発表
• Intel Project Alloy
→2017年後半にハードをオープンソース化
• Windows10には2017年に提供予定
内容
• HoloLensのUWPベースのMR稼働環境をサードパーティ
製品向けに公開
詳細は？
• 2016/12月のWinHECで公開予定
11

12. Build 14971～
12

13. MRプログラミング
13

14. 開発環境
OS Windows 10 x64 Enterprise/Pro/Edication
CPU 64bit 4 core以上
RAM 8GB
BIOS Hardware Virtualization / SLAT / DEP
GPU DirectX 11.0以上 / WDDM 1.2 Driver以上
14

15. 開発ツール (2016/09/24現在)
Visual Studio 2015 Update 3
• Tools 1.4
• Windows 10 SDK 10.0.10586
HoloLens Emulator build 10.0.14393.0
Unity HoloLens Technical Preview 5.4.0f3
HoloToolkit-Unity
Vuforia 6.1 ←New
15

16. HoloLensアプリの配布
Windwosストアから配布可能
16

17. HoloLensアプリの種類
2Dアプリ
• 額縁の中に表示
• 額縁を空間に配置できる
• UWPアプリ
Holographicアプリ
• 視野全体に表示
• 奥行や立体音響も利用可能
• Unityが内部で動作するUWPアプリ
17

18. 2Dアプリの作り方
UWPアプリとして作成する
マウス操作やキーボード操作を多用しない
音声入力を活用しよう！
18

19. UWPの画面デザイナはHoloLens対応済
19

20. 2Dアプリ作成上の注意点
HoloLensでの操作性を考える
• マウス操作やキーボード操作を前提としない
HoloLensでの表示を考える
• 全画面、絶対ムリ
• 額縁アプリ
• （まだ）視点移動に合わせて移動できない
20

21. 注意を守ったサンプル
音声合成でお知らせ
Cognitive Service – Face API
年齢と性別判定
音声認識「good morning」
カメラプレビュー
21

22. UWPはとにかく簡単
カメラ
22
_mediaCapture = new MediaCapture();
var settings = new MediaCaptureInitializationSettings;
await _mediaCapture.InitializeAsync(settings);
await _mediaCapture.StartPreviewAsync();

23. UWPはとにかく簡単
音声認識
23
var result = await this.Speech.CompileConstraintsAsync();
this.Speech.ContinuousRecognitionSession.StartAsync();

24. UWPはとにかく簡単
Face API
24
var client = new FaceServiceClient(“API key");
var result = await client.DetectAsync(stream,
returnFaceAttributes: new[]
{
FaceAttributeType.Age,
FaceAttributeType.Gender,
FaceAttributeType.Smile,
});
if (result.Any())
{
var age = result.First().FaceAttributes.Age;
var gender = result.First().FaceAttributes.Gender;
}

25. UWPはとにかく簡単
音声合成
25
var synthesizer = new SpeechSynthesizer();
if (synthesizer.Voice != null)
{
var stream = await synthesizer.SynthesizeTextToStreamAsync(text);
this.Media.SetSource(stream, stream.ContentType);
this.Media.Play();
}

26. 実際にやってみよう
動作のキモ！
• 起動して適当に額縁を飾る！
• 見回せばHoloLensのカメラ映像が常に2Dアプリに！
• 「good morning」とあいさつすると年齢が分かる！
最終的なゴール
• 挨拶すれば→顔認証で名前を表示する
26

27. 2Dアプリ動作上の注意点
フォーカスが外れてもカメラはOK
フォーカスが外れるとユーザ操作がNG
• タップ取得できない
• キーボード入力も取得できない
• 音声認識が反応しない←想定外
• Xbox One Sコントローラーなら反応した←イマココ
27

28. UWPはとにかく簡単
ゲームパッド
28
private Gamepad Pad;
Gamepad.GamepadAdded += (object s, Gamepad e) => { this.Pad = e; };
Gamepad.GamepadRemoved += (object s, Gamepad e) => { this.Pad = null; };
while (true)
{
await Dispatcher.RunAsync(
CoreDispatcherPriority.Normal, async () =>
{
if (this.Pad == null)
{
return;
}
var reading = this.Pad.GetCurrentReading();
if ((reading.Buttons & GamepadButtons.A) == GamepadButtons.A)
{
await TakePhotoAsync();
}
});
await Task.Delay(TimeSpan.FromMilliseconds(5));
}

29. おまけ
29

30. Holographicアプリの作り方
Unityで作成する
UWPアプリとして出力する
HoloToolkit-Unityを使うと便利
30

31. HolographicアプリのHello World作成
Holographicアプリの特徴
カメラの位置がHoloLensの位置
• カメラ位置と方向がデフォルトであれば
Z=1にモノを配置すると、目の前1ｍの位置に表示される
31

32. HolographicアプリのHello World作成
1. Unityを立ち上げて、[New]-[Create project]
2. AssetsにHoloToolkit-UnityのAssetsをコピー
3. Assets-HoloToolkitの下の
Utilities-Prefabs-Main Cameraを配置
SpatialMapping-Prefabs-SpatialMappingを配置
Input-Prefabs-Cursorを配置
4. HoloToolkit-Configureメニューの下の
Apply HoloLens Scene Settingsメニューをクリック
Apply HoloLens Project Settingsメニューをクリック
Apply HoloLens Capability Settingsメニューをクリック
5. Build SettingsダイアログのBuildボタンをクリック
UWPフォルダに出力
32

33. HolographicアプリのHello World実行
1. 実機のSettings-Update & Security –
For Developers-Pairボタンクリック
2. USB接続
3. UWPフォルダの中にslnファイルを開く
x86でデバイスにデプロイ
PINにPairボタンクリックしたときのPIN入力
33

34. 実際にやってみよう
34

35. 地球儀を回そう
Unity Assetsストアの活用
地球はどこにおく？
• Scaleを0.01にして1mにおく？
• Scaleを0.05にして3mにおく？
35

36. 実際にやってみよう
36

37. 空間音響を試してみよう
1. HoloToolKitを使ってHoloWorldと同じ状態にする
2. [Edit]-[Project Setting]-[Audio]-[Spatializer]
[Spatializer Plugin]を「MS HRTF Spatializer」
3. [GameObject]-[3D Object]-[Cube]を配置
4. Cubeに
[Add Component]で[Sound Source]を追加
Audio ClipにWavファイル設定
[Play On Awake]のチェックを外す
[Spatialize]をチェック ←２の手順で増えている項目
[Spatial Blend]を「3D」
[Volume Rolloff]を「Custom Rolloff」
PlaySound.csを追加
37

38. 実際にやってみよう
38

39. 自分の周りを音が回るには？
自分＝HoloLens=Main Camera
Main Cameraの周りを回転させる
transform.RotateAround
自分は移動することに注意！
毎回カメラ位置を取得
39

40. 音源を移動させる
using UnityEngine;
public class MoveCube : MonoBehaviour {
public float Angle = 30f;
void Start () {
// カメラの位置を取得
var target = GameObject.Find("Main Camera").transform;
var targetPost = target.position;
// 物体の向きをZ（つまり正面）軸でランダムに回転
transform.Rotate(new Vector3(0, 0, Random.Range(0, 360)), Space.World);
}
void Update () {
// カメラの位置を取得
var target = GameObject.Find("Main Camera").transform;
var targetPos = target.position;
Vector3 axis = transform.TransformDirection(Vector3.up);
transform.RotateAround(targetPos, axis, Angle * Time.deltaTime);
}
}
40

41. 実際にやってみよう
41

42. まとめ
42

43. HoloLens 2Dアプリ
普通にUWPアプリ
操作方法の実装は、ちょっと工夫が必要
UWPのHolographic拡張はよ！
43

44. FIN
44