MRTK Graphics Tools Overview - 概要説明

1. MRTK Graphics Tools v0.4.0 Overview – 概要紹介 #HoloMagicians 株式会社神戸デジタル・ラボ 堀尾 風仁 / Futo Horio XRKaigi 2022 コミュニティオーガナイズドセッション
2. 堀 尾 風 仁 株 式 会 社 神 戸 デ ジ タ ル ・ ラ ボ コ ミ ュ ニ テ ィ 運 営 ・ H o l o M a g i c i a n s M i c r o s o f t M V P f o r M i x e d R e a l i t y Twitter アカウント @Futo_Horio
3. ・MRTK Graphics Tools とは ・機能とサンプルの紹介 ・導入手順 ・MRTK3 における MRGT の役割 本日お話すること
4. (前置き) なぜ MRTK Graphics Tools を調べようと思ったのか MRTK3 の HandInteractionExamples シーンを触っていて、Canvas + Volumetric UI が凄くキレイだったから Hierarchy ビュー Inspector ビュー Game ビュー (ゲーム再生時)
5. MRTK Graphics Tools for Unity とは MRデバイスのパフォーマンス性能の範囲内で、コンテンツの視覚的な忠実度 (visual fidelity) を向上させるために 作られたシェーダー、マテリアル、モデル、各種開発者向けツールを含む Unity パッケージ 動作環境: Unity 2020.x 以降 Release バージョン: v0.4.0 (※ GitHub 上では v0.4.17 が最新) ※ MRTK 2.x で、開発者から Standard Shader System (グラフィック) を MRTK から独立したパッケージとして扱えるようにして欲しいと要望を受け、 検討を重ねた結果、グラフィック周りの機能を抽出して、MRTK から独立したパッケージ、ドキュメント、サンプルを作成することになった。(意訳) [出典] Mixed Reality Dev Days: Discussion on Graphics Tools for Unity in MRTK3 (YouTube) ※ Unreal Engine 向けの Graphics Tools も別パッケージとして公開されています。
6. MRTK Graphics Tools (MRGT) と MRTK3 の依存関係 MRTK Graphics Tools for Unity とは [出典] MRTK3 Packages Overview - dependencies https://learn.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-overview/packages/packages-overview#dependencies パッケージを独立させた経緯の通り、 MRGT から MRTK3 への依存関係はない MRTK3 は Standard Shader System を MRGT として切り出しているので、 パッケージによっては、MRGT への依存あり ・MRTK Input (com.microsoft.mrtk.input) ・MRTK UX Core (com.microsoft.mrtk.uxcore) ・MRTK Standard Assets (com.microsoft.mrtk.standardassets) ・MRTK Extended Assets (com.microsoft.mrtk.extendedassets) ・MRTK Accessibility (com.microsoft.mrtk.accessibility)
7. Editor Samples Runtime Packages/MRTK Graphics Tools Assets/Samples/MRTK Graphics Tools/0.4.17 Acrylic (Experimental) UnityUI Mesh Outlines Mesh Instance Material Gallery Canvas Shadow (Experimental) MRTK Graphics Tools for Unity とは パッケージのフォルダ構造は、Editor、Runtime、Samples の3つ ※ Samples は初期インポートには含まれず、Window > Package Manager > MRTK Graphics Tools 経由で個別インポートする必要がある。 (MRTK 2.x サンプルと同じ方法) ※ GitHub 上から MRGT の Unity Package をダウンロードして、カスタムパッケージとしてインポートした場合は、Assets 配下に Editor、Runtime フォルダが配置される Unity プロジェクト 編集時に開発者を支援する機能が含まれているフォルダ e.g. Custom Inspector, Shader GUIs, Property Drawer, Unity Editor 上でのみ描画される Shader パッケージの機能の大半が含まれているフォルダ e.g. Shaders, Textures, Models, Scripts ※ 全てのコードとコンテンツが Player Build へコンパイル可能
8. Mesh Outlines Acrylic 機能とサンプル MRTK Graphics Tools には、以下の機能が含まれています。 UnityUI Tooling Accessibility Utilities Standard Shader ・Editor tooling / Editor ツール ・Measure tool / 測定ツール ・Standard Shader / 標準シェーダー ・UnityUI tooling / UnityUI ツール ・Animation / アニメーション ・Proximity Light / 近接ライト ・Hover Light / ホバーライト ・Clipping primitive / クリッピングプリミティブ ・Mesh Outline / メッシュアウトライン ・Acrylic / アクリル ・Accessibility utilities / アクセシビリティユーティリティ ・Material Instance / マテリアルインスタンス
9. ・Editor tooling / Editor ツール ・Measure tool / 測定ツール 機能とサンプル MRTK Graphics Tools には、以下の機能が含まれています。 ・Standard Shader / 標準シェーダー ・UnityUI tooling / UnityUI ツール ・Animation / アニメーション ・Proximity Light / 近接ライト ・Hover Light / ホバーライト ・Clipping primitive / クリッピングプリミティブ ・Mesh Outline / メッシュアウトライン ・Acrylic / アクリル ・Accessibility utilities / アクセシビリティユーティリティ ・Material Instance / マテリアルインスタンス Measure Tool Draw Modes > Mip map Take Screenshot
10. 機能とサンプル 最新リリース (v0.4.0) では、以下5つのサンプルシーンが用意されています。 Material Gallery UnityUI Mesh Outlines Acrylic (Experimental) Canvas Shadow (Experimental)
11. 導入手順 実際に MRTK Graphics Tools パッケージをインポートしてみる ※ Mixed Reality Feature Tool 経由でもインポートすることが可能です。 本資料の検証環境 Unity 2020.3.36f1 ・MRTK Graphics Tools v0.4.0 (via Unity Package Manager) ・Universal RP v10.9.0 ( MRTK Graphics Tools 依存パッケージ )
12. 導入手順 Unity Package Manager 経由で MRTK Graphics Tools をインポートする (1) ※ Mixed Reality Feature Tool 経由でもインポートすることが可能です。 1. Unity 2020.x 以降で新規プロジェクトを作成 2. Build Settings から Switch Platform (UWP) を実行 3. Window > Package Manager を開く 4. Package Manager の [+] ボタンを押して、 プルダウンメニューから Add package from git URL.. を選択
13. https://github.com/microsoft/MixedReality-GraphicsTools- Unity.git?path=/com.microsoft.mrtk.graphicstools.unity#v0.4.0 導入手順 Unity Package Manager 経由で MRTK Graphics Tools をインポートする (2) ※ URL 末尾に ハッシュ (URLフラグメント) を追加することで、 MRGT の特定のバージョン、ブランチ、コミットをインストール可能 詳しくは、MRGT GitHub ページを参照。 5. テキストフィールドに以下 URL を入力して [Add] ボタンを押下 Tips : インストールする MRGT バージョンを固定する方法
14. 導入手順 Unity Package Manager 経由で MRTK Graphics Tools をインポートする (3) (オプション) サンプルシーンは MRGT 本体をインストールした後に、 Package Manager 経由でインポートが可能 6. インストールが正常に終了すると、 左の図のような画面が表示されます。
15. 機能紹介 - UnityUI Element UnityUI Tooling で提供される ヘルパーコンポーネントとユーティリティ を使用すれば、 UnityUI でキレイでフレキシブルな 3D UI を作成することが可能です
16. UnityUI Tooling 機能には、大きく2つのコンポーネントが含まれています UI Behavior Component UI の性質に関するコンポーネント UI Graphic Component UI グラフィックの生成を補助するコンポーネント ・ScaleMeshEffect: UnityUI (Canvas) 上で Graphics Tools が提供するシェーダーを動作させるためのヘルパーコンポーネント (UI メッシュ構築時にメッシュのスケール情報を UV チャンネル属性へ保存) ・RectMask2DFast: 2Dのオブジェクトをマスクするコンポーネント (RectMask2D 軽量化) ・RoundedRectMask2D: 2Dのオブジェクトを角丸形状でマスクするコンポーネント (RectMask2DFast 派生) ・CanvasElementRoundedRect: 丸みを帯びた四角形メッシュを生成するコンポーネント ・CanvasElementBeveledRect: 丸みを帯びた四角形メッシュ (エッジ面取り) を生成するコンポーネント ・CanvasElementMesh: UnityUI 内で 3Dメッシュを表示するためのコンポーネント ( MeshRenderer を使用して実現可能だが、レイアウト機能の一部が機能しない問題を解決 ) RoundedRectMask2D CanvasElementRoundedRect CanvasElementBeveledRect CanvasElementMesh 機能紹介 - UnityUI Element
17. UnityUI Tooling が実現する MRTK3 Volumetric UI なぜ MRTK v2 の Non-Canvas UI から MRTK3 で Unity Canvas システムと RectTransform を統合した Volumetric UI に変わったのか？ MRTK 2.x Non-Canvas UI MRTK3 Volumetric UI with Canvas ✘ 物理以外の設計ユニットがない ✘ 配置がない ✘ 余白やパディングがない ✘ 柔軟なレイアウト、またはレスポンシブ レイアウトがない ✘ レイアウト、サイズ、構成の 1 つの順列ごとの個別のプレハブ ✘ コレクション レイアウトのサポートが非常に限られている (水平または垂直の構成可能なレイアウト) ✘ 絶対サイズの丸い角の半径やストローク幅など 基本的な設計機能がない ✘ スケールを使用して UI 要素のサイズを調整し、 破壊的に子を変更する必要がある ✘ マウスとキーボードのサポートが制限されている ✘ ゲームパッドをサポートしていない ✔ さまざまな物理的コンテキスト (3D 現実、2D 画面、テレビ/デスクトップ/モバイル/Web) に対応する柔軟な設計ユニット ✔ 統一感のある親子関係を持つレスポンシブ レイアウトに RectTransform の配置をフル サポート ✔ UnityUI AutoLayout グループを使用した RectTransform マージンとパディングのフル サポート ✔ UnityUI AutoLayout グループを使用した優先度と余白を含む Flex レイアウトのサポート ✔ コントロールの種類ごとに 1 つのプレハブ。任意のコンテンツやコンテキストに合わせて サイズを変更および調整可能 ✔ UnityUI AutoLayout グループの水平、垂直、グリッドのレイアウト Unity レイアウト インターフェイスの拡張機能を使用したカスタム レイアウトが可能 ✔ Mixed Reality グラフィックス ツール パッケージの高度な UI シェーダー機能により、 絶対サイズの丸い角の半径、ストローク幅、余白など、各種の高度なデザイン機能を実現 ✔ ゲームパッドと方向/相対ナビゲーションのサポート MRTK 2.x の Canvas 以外の UI システムは、インターフェイス デザイン システムで 期待される基本的な機能の多くが不足していたため、設計が非常に困難だった
18. MRTK3 Canvas ベースのボタンプレハブ構造 MRTK3 サンプルシーン (CanvasUITearsheet.unity) の１番シンプルなボタンの構造を確認する
19. MRTK3 Canvas ベースのボタンプレハブ構造 Action Button (Prefab) を使用して、ボタンが作成されています ※ MRTK3 では、MRTK 2.x のようにサイズごとのボタンプレハブは用意されておらず、Action Button (Prefab) のスケールを変更することで様々なカタチのボタンを生成可能 Hierarchy ビュー Game ビュー
20. MRTK3 Canvas ベースのボタンプレハブ構造 メニュー全体のバックプレートは CanvasElementRoundedRect ( MRGT コンポーネント ) で生成されている
21. MRTK3 Canvas ベースのボタンプレハブ構造 CanvasElementRoundedRect ( MRGT コンポーネント ) を使ってできること
22. MRTK3 Canvas ベースのボタンプレハブ構造 Action Button (Prefab) は、大きく以下３つのレイヤーで構成されています Backglow あり (ボタン押下時) Backglow なし (ボタン押下時) Action Button ・Backplate (背景プレート) ・Backglow (ボタン押下時のエフェクト用) ・Frontplate (フロントプレート – アイコン、ラベル含む)
23. MRTK3 Canvas ベースのボタンプレハブ構造 Action Button (Prefab) の各レイヤーオブジェクトごとに、MRGT のシェーダーが個別に用意されています メニュー全体のバックプレート Graphics Tools/Canvas/Backplate ボタンのバックプレート (backplate) Graphics Tools/Standard Canvas ボタンのバックグロー (backglow) Graphics Tools/Canvas/Glow ボタンのフロントプレート (frontplate) Graphics Tools/Canvas/Frontplate
24. MRTK3 Canvas ベースのボタン構造 MRTK3 が提供する Volumetric UI with Canvas では、少ないプレハブを組み合わせて柔軟な UI を作成することができます
25. 参考文献・出典 ・Mixed Reality Graphics Tools (Microsoft) https://learn.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-graphicstools/ ・microsoft/MixedReality-GraphicsTools-Unity (GitHub) https://github.com/microsoft/MixedReality-GraphicsTools-Unity ・Discussion on Graphics Tools for Unity in MRTK3 (YouTube) https://www.youtube.com/watch?v=rXbkJRhaBqE ・Building Volumetric UI with MRTK3 (Blog) https://techcommunity.microsoft.com/t5/mixed-reality-blog/building-volumetric-ui-with-mrtk3/ba-p/3631764 ・Building Rich UI for MR in MRTK3 (YouTube) https://www.youtube.com/watch?v=g2HF5HMy-2c 本資料作成時に、参考にしたサイト、YouTube 動画一覧
26. まとめ MRGT と MRTK3 Volumetric UI を試す際の注意点 ・Acrylic (Experimental) を動作させるには Universal Render Pipeline が必要 ・MRGT 固有のサンプルシーンを HoloLens 2 で試すためには、MRTK3 等を別途インポートする必要がある ・現在のリリースバージョンは v0.4.0 であり、各機能に対しての Getting Started 的なものはないので、 MRGT や MRTK3 のサンプルシーンを分解しながら、学んでいく必要があること ・MRTK v2 の Non-Canvas UI と比べ、Prefab 数が少なく、柔軟な UI を簡単に作成することが可能 ・Graphics Tools を使用することによって、MRTK3 のサンプルシーンで提供されているような Mesh ライクな UI を UnityUI 上で作成することができる ・バッチ処理等で 数百/数千規模の ボタン を生成する場合は、Non-Canvas UI の方が処理に向いている ・MRTK 2.x と比較して、Shader の種類が増えて、操作可能なプロパティも増えているのでよりリッチな UI 表現が可能に
27. Thank you！ Twitter アカウント @Futo_Horio #HoloMagicians