MRTK-Unreal(UX Tools) を利用した HoloLens 2 アプリ開発【UNREAL FEST EXTREME 2020 WINTER】

1.8K Views

November 17, 20

スライド概要

講演アーカイブ:
https://www.youtube.com/watch?v=vGMVi8Fu_pU

講演内容:
HoloLens は 頭部装着型のコンピューターデバイスで、現実空間とバーチャルな空間を融合した複合現実(MR:Mixed Reality)を体験でき、現在様々な業界で活用に向けての試行が始まっています。本講演では、UE4 および MixedRealityToolkit-Unreal(UX Tools)を利用した HoloLens 2 向けアプリの開発方法についてご説明いたします

講演者:
加藤 広務 ( 株式会社ホロラボ )

UNREAL FEST EXTREME 2020 WINTER 再生リスト
https://www.youtube.com/playlist?list=PLr_Cbd4sUDTzxG9a4TrU0Rg6-ApCJBCsI

https://unrealengine.jp/unrealfest/
#ue4fest

profile-image

エピック ゲームズ ジャパン

@EpicGamesJapan

スライド一覧

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
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.

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

5.

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

6.

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

7.

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

8.

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

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.

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

21.

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

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.

UX Tools の取得 方法①(GitHub) • GitHub の releases ページから UXTools を取得する • プロジェクトのルート階層に Plugins フォルダを作成し、 その中に展開後のフォルダ 配下を格納する 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.

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

55.

UMG サポート

56.

Tap to Place • サーフェスに対してオブジェクトを配置するために使用され る遠方インタラクションの機能 • 空間メッシュに対してオブジェクトを配置する場合に便利 • 実世界との衝突を有効にするには、ARSessionConfig の次の 値を有効にする必要がある 画像: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) • HoloLens で Microsoft Store にアクセスし Holographic Remoting Player アプリをダウンロードしてインストールする • HoloLens で Holographic Remoting Player アプリを起動する

72.

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

73.

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

74.

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

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.

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

85.

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

86.

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