1.
MRTK-Unreal(UX Tools) を
利用した HoloLens 2 アプリ
開発
加藤 広務

2.
自己紹介
加藤 広務
MR Engineer
メーカーでミドルウェアの開発・企画を
経験後、フィーチャーフォンのコンテン
ツ・商品企画に従事。その後スマートフ
ォンのゲーム開発に携わるが、HoloLens
発売をきっかけに HoloLab へ転職し、現
在は MR コンテンツの開発を中心とした
活動を行っている。
株式会社ホロラボ

3.
• HoloLens 2 向けの開発環境の準備・設定
• MRTK-Unreal (UX Tools) 概要
• MRTK-Unreal (UX Tools) を利用したアプリ開発方法
• ストリーミングの方法
• アプリパッケージの作成
• 実機へのデプロイ
本セッションで理解できること

4.
• Microsoft が開発している頭部装着型コンピューターデバイス
• 現実空間とバーチャルな空間を融合した複合現実（MR：
Mixed Reality）の体験を可能とする
HoloLens 2 概要
画像：https://www.microsoft.com/ja-jp/hololens

5.
• MRアプリケーションの開発を
高速化するために設計された
コンポーネントのセット
• 各コンポーネントにはプラグ
イン、サンプル、ドキュメン
トが含まれる
• 現在は UX Tools for Unreal
で構成されている
MRTK-Unreal (MixedRealityToolkit-Unreal) とは?
MRTK-Unreal
プラグイン
サンプル
ドキュメント
UX
Tools
for
Unreal

6.
• 対応プラットフォームとデバイス
• 現在は HoloLens 2 を最優先で対応中
• 将来的にはマルチプラットフォームをサポート
• サポートされる Unreal Engine のバージョン
• HoloLens 2 の開発自体は UE4.23.0 以降で対応済み
• MRTK-Unreal のコンポーネントを使用するには UE4.25.0 以降が必要
• 安定性
• まだ開発の初期段階にあり、破壊的変更が起こり得る
MRTK-Unreal の現状

7.
UX Tools for Unreal とは？
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

8.
• MRTK-Unreal で最初にリリースされたコンポーネント
• 現在 HoloLens 2 のみサポート
• 一般的な UX 機能のコード、ブループリント、サンプルアセ
ットが含まれている
UX Tools for Unreal とは？

9.
開発環境

10.
• Windows 10
• Unreal Engine バージョン 4.25 以降
• Visual Studio 2019（バージョン 16.2 以降）
• C ++によるデスクトップ開発
• ユニバーサル Windows プラットフォーム (UWP) の開発
• USB デバイスの接続
• Windows 10 SDK (ビルド 18362 以降)
開発環境の準備
参考サイト：https://docs.microsoft.com/ja-jp/windows/mixed-reality/develop/install-the-tools?tabs=unreal#installation-checklist

11.
• Epic Games Launcher のインストールオプションの対応プ
ラットフォームにある HoloLens 2 にチェックを入れ適用ボ
タンを押す
開発環境設定

12.
本セッションで利用した環境
• Unreal Engine 4.25.4
• Visual Studio Professional 2019 16.6.2
• Windows 10 SDK 10.0.18362.0
• UX Tools 0.10.0

13.
プロジェクト作成

14.
• [New Project Categories] で [Games] を選択して [Next]
をクリックする
プロジェクトの作成

15.
• [Blank] テンプレートを選択して [Next] をクリックする
プロジェクトの作成

16.
プロジェクトの作成
• [C++]
[Scalable 3D or 2D]
[Mobile / Tablet]
[No Starter Content]
に変更する
• プロジェクト名を入力し
[Create Project]をクリ
ックする

17.
• [Edit] > [Plugins] で以下 2 つのプラグインを有効にする
• HoloLens
• Microsoft Windows Mixed Reality
プラグイン設定

18.
• [File] > [New Level] を選
択し、 [Empty Level] を選
択する
• [Place Actors] タブから
[Basic] を選択し、
Player Start をシーンにド
ラッグする
レベルの作成

19.
• [Place Actors] パネルの
[Lights] タブに切り替え、
Directional Light をシーン
にドラッグする
• [File] > [Save Current]
を選択し、レベルに Main
という名前を付けて
[Save] をクリックする
レベルの作成

20.
• [Contents Browser] で、
[Add New] >
[Miscellaneous] >
[Data Asset] をクリッ
クする
Mixed Reality プロジェクト設定
<AR セッション設定>

21.
• ARSessionConfig を選択し、
ARSessionConfig という名
前を付ける
• ARSessionConfig を開き、
既定の設定をすべてそのま
まにして [Save] をクリック
する
Mixed Reality プロジェクト設定
<AR セッション設定>

22.
参考：ARSessionConfig
<AR セッション設定>

23.
Mixed Reality プロジェクト設定
<AR セッション設定>
• レベル ブループリントを開
き右図の実装をする

24.
Mixed Reality プロジェクト設定
<ポーン設定>
• [Add New] > [Blueprint
Class] をクリックし、下部に
ある [All Classes] セクション
を展開する
• DefaultPawn を検索して選択
し、名前を MRPawn にする

25.
Mixed Reality プロジェクト設定
<ポーン設定>
• MRPawn を開き、
[CollisionCompon
ent] を選択し、
[Details] パネルの
Collision の
Collision Presets
を NoCollision に
変更する

26.
Mixed Reality プロジェクト設定
<ポーン設定>
• [Components] パネルから
[Add Component] >
[Camera] の順にクリックし、
Camera という名前を付ける
これで、プレーヤーカメラは
HoloLens 2 デバイスと移動で
きるようになる

27.
Mixed Reality プロジェクト設定
• [Add New] > [Blueprint Class] を
クリックし、下部にある [All
Classes] セクションを展開する
• GameModeBase を検索し、
MRGameMode という名前を付ける
<ゲームモード設定>

28.
Mixed Reality プロジェクト設定
<ゲームモード設定>
• MRGameMode を開き、
[Details] パネルの [Classes] セ
クションに移動し、 [Default
Pawn Class] を MRPawn に変
更する

29.
Mixed Reality プロジェクト設定
• [Edit] > [Project
Settings] を選択し、左
側のリストで [Map &
Modes] をクリックする
• Default GameMode を
MRGameMode に変更す
る
• Default Maps の2つを
Main に変更する
<ゲームモード設定>

30.
• Mobile VR レンダラーの使用
• Forward レンダラーの使用
• 頂点フォグの無効化
• オクルージョン カリングの無効化
• 深度ステンシルの無効化
• モバイル マルチビューの使用
• カスケードされたシャドウ マップの削減
パフォーマンスに関する推奨設定
参考：https://docs.microsoft.com/ja-jp/windows/mixed-reality/develop/unreal/performance-recommendations-for-unreal

31.
UX Tools

32.
• GitHub の releases ページから UXTools を取得する
• プロジェクトのルート階層に
Plugins フォルダを作成し、
その中に展開後のフォルダ
配下を格納する
UX Tools の取得 方法①（GitHub）
https://github.com/microsoft/MixedReality-UXTools-Unreal/releases

33.
UX Tools の取得 方法②（マーケットプレイス）
• マーケットプレイスで MRTK で検索すると表示される

34.
UX Tools の設定
• プラグインに追加されるのでチェックを入れ再起動する

35.
UX Tools の表示
①
②
③

36.
• エディターでマウスとキーボードの入力を使用して、ヘッド
マウントディスプレイ（HMD）やハンドトラッキングなどの
機能をシミュレートする
• Unreal エディターで再生し、HMD が接続されていない場合、
入力シミュレーションがアクティブになる
入力シミュレーション

37.
• カメラ移動
• ハンドトラッキングのシミュレート
入力シミュレーション
操作 動作
W / Sキー 前後に移動
A / Dキー 横に移動
Q / Eキー 下上に移動
マウスの動き 頭の回転を制御
操作 動作
①左Shift / Altを押したままにする 左/右手をそれぞれ制御
① + マウスの左ボタン押下 「ピンチ」ジェスチャ、グリップ
① + マウスの中ボタン押下 「突く」ジェスチャ
① + マウスの右ボタン押したまま 手の回転（（T / Y）を2回押しでリセット）
① + ホームキー 平らな手のひらを上に向けてメニュージェスチャを実行
T / Yキー 手の視認性を切り替える（ロストのシミュレート）

38.
入力シミュレーション

39.
• 手の上下左右の指定位置にアクターが追従する機能
• アクターに UxtHandConstraint コンポーネントを追加する
ハンド コンストレイント
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/Docs/HandConstraintComponent.html

40.
ハンド コンストレイント

41.
• UX 要素とのインタラクショ
ンを行う機能
• UxtHandInteractionActor
をハンドごとにワールドに
追加する（MRPawn に右の
実装を追加する）
ハンドインタラクション
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

42.
ハンドインタラクション 事前設定

43.
ハンドインタラクション

44.
ボタン

45.
• スライダーをトラックに沿って動かすことで値を継続的に変
更できる機能
• UxtPinchSliderActor を選択して新しいアクターブループリ
ントを作成する
ピンチスライダー
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

46.
ピンチスライダー

47.
• バウンディングボックスのコーナー、エッジ、および面に表
示される領域つかむことで、アクターの位置、回転、サイズ
を変更できるようにする機能
• アクターに UxtBoundsControl コンポーネントを追加する
• 動作と外観は調整可能
バウンズコントロール
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

48.
バウンズコントロール

49.
• アクターをユーザーがピックアップして、移動、回転、また
は拡大縮小することが可能になる機能
• アクターに UxtGenericManipulator コンポーネントを追加す
る
マニピュレーション
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

50.
マニピュレーション

51.
• 手のひらがプレーヤーに面しているときにのみアクティブに
なるハンド コンストレイントを特殊化したもの
• アクターに PalmUpConstraint コンポーネントを追加する
ハンドメニュー
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

52.
ハンドメニュー

53.
• UI 機能のグループを表示・非表示する方法をユーザーに提供
する
• UI エレメントは、任意のアクターにアタッチして、その可視
性を親要素で制御できるようにするシーンコンポーネント
UI エレメント

54.
• UXTWidget コンポーネントにより、UXT インタラクション
を Widget コンポーネントと連携させることが可能
• Widget ブループリントを作成し UI を設計する
• アクターを作成し、Widget コンポーネントを追加する
• Widget クラスをWidget アセットに設定する
• UXTWidget コンポーネントを追加する
UMG サポート
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

55.
UMG サポート

56.
• サーフェスに対してオブジェクトを配置するために使用され
る遠方インタラクションの機能
• 空間メッシュに対してオブジェクトを配置する場合に便利
• 実世界との衝突を有効にするには、ARSessionConfig の次の
値を有効にする必要がある
Tap to Place
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

57.
Tap to Place

58.
• ユーザーの動作に追従する機能
• アクターに UxtFollow コンポーネントを追加する
フォロー
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/README.html

59.
フォロー

60.
• UX Tools には軽量な
マテリアルインスタ
ンスが含まれている
マテリアル

61.
• Mixed Reality デバイスでテキストを正しく効率的にレンダ
リングするように最適化されたものが用意されている
• アクターに UxtTextRenderActor コンポーネントを追加する
テキスト
画像：https://microsoft.github.io/MixedReality-UXTools-Unreal/Docs/Text.html

62.
テキスト

63.
ユーティリティ（アクターの整列）

64.
ユーティリティ（アイコン変更）

65.
Scrolling Collection (experimental)
画像：https://techcommunity.microsoft.com/t5/mixed-reality-blog/ux-tools-0-10-release-tap-to-place-menus-and-umg-support-now/ba-p/1773166

66.
Tooltips (experimental)
画像：https://techcommunity.microsoft.com/t5/mixed-reality-blog/ux-tools-0-10-release-tap-to-place-menus-and-umg-support-now/ba-p/1773166

67.
UX Tools Game
• UX Tools のすべての主要機
能を紹介する HoloLens 2
のサンプルアプリ
• GitHub のリリースページで、
あらかじめパッケージ化さ
れたアプリが配布されてい
る

68.
ストリーミング

69.
• Unreal Editor で実行して
いるアプリを HoloLens で
体験できるようにするもの
• PC で実行するため、リッ
チなコンテンツ表現が可能
• パッケージ化前の動作確認
としても利用できる
ストリーミング
画像：https://docs.unrealengine.com/en-US/Platforms/AR/HoloLens2/QuickStartStreaming/index.html

70.
• HoloLens は以下情報を PC に送信し PC はレンダリングされ
たフレームを HoloLens に送り返す
• アイトラッキング
• ハンドジェスチャー
• 音声
• 現在のデバイスポーズ（位置・回転）
• 空間マッピング入力
ストリーミング

71.
• HoloLens で Microsoft Store にアクセスし Holographic
Remoting Player アプリをダウンロードしてインストールする
• HoloLens で Holographic Remoting Player アプリを起動する
ストリーミング設定（HoloLens）

72.
• HoloLens で Holographic Remoting Player アプリを起動する
ストリーミング設定（HoloLens）
画像：https://docs.unrealengine.com/en-US/Platforms/AR/HoloLens2/QuickStartStreaming/index.html

73.
• [Edit] > [Project Settings] > [Platforms] > [Windows
Mixed Reality] > [Holographic Remoting] に移動する
• [Enable Remoting for Editor] を有効にし、HoloLens の IP
アドレスを [IP of HoloLens to remote to] に入力する
• Connect ボタンをクリックする
ストリーミング設定（Editor）

74.
• [Play] モードを VR Preview に変更し実行する
ストリーミング設定（Editor）

75.
ストリーミング DEMO

76.
パッケージ作成・デプロイ

77.
アプリのパッケージ化
• [Edit] > [Project
Settings] を選択する
• [Description] を選択する
• [About] の [Project
Name] を入力する
• [Publisher] の
[Company
Destinguished Name]
を入力する

78.
アプリのパッケージ化
• [Platforms] の
[HoloLens] を選択する
• [Packaging] の
[Signing Certificate]
にある Generate new
ボタンを押す

79.
アプリのパッケージ化
• 秘密キーのパスワードを作成するように求めるメッセージが
表示されたら、テスト目的の場合は [None] をクリックする

80.
アプリのパッケージ化
• [File] > [Package
Project] の [HoloLens]
を選択する

81.
• デバイス ポータルを開き [Views] > [Apps] に移動する
• [Deploy apps] の ファイルを選択 ボタンを押す
• 作成したアプリパッケージ(.appxbundle)を選択する
実機へのデプロイ（デバイスポータル）

82.
実機へのデプロイ（Unreal Editor）
• [Launch] ボタンの横にあるドロップ
ダウン矢印をクリックする
• 最初は HoloLens デバイスオプション
が淡色表示になっているので、
[Device Manager] を開く

83.
実機へのデプロイ（Unreal Editor）
• [Add An Unlisted Device]
セクションを展開する
• Select a Platform ボタンを
押し [HoloLens] を選択する

84.
• デバイスの IP アドレス:ポート番号とデバイスポータルの
ログイン ID・パスワードを入力する
• Add ボタンを押し、デバイスマネージャを閉じる
• 追加した HoloLens が選択されていることを確認し
[Launch] ボタンを押す
実機へのデプロイ（Unreal Editor）
USB 経由で接続されている場合は 127.0.0.1:10080

85.
参考：MixedReality-Unreal-Samples
URL : https://github.com/microsoft/MixedReality-Unreal-Samples
• UnrealEngine で構築された Mixed Realty プロジェクトの
サンプルアプリケーションが GitHub で公開されている

86.
• 以上になります、ご視聴いただきありがとうございました。