Tweet
Tweet

Slide 1

Slide 1 text

MRTK Graphics Tools v0.4.0 Overview – 概要紹介 #HoloMagicians 株式会社神戸デジタル・ラボ 堀尾 風仁 / Futo Horio XRKaigi 2022 コミュニティオーガナイズドセッション

Slide 2

Slide 2 text

堀 尾 風 仁 株 式 会 社 神 戸 デ ジ タ ル ・ ラ ボ コ ミ ュ ニ テ ィ 運 営 ・ 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

Slide 3

Slide 3 text

・MRTK Graphics Tools とは ・機能とサンプルの紹介 ・導入手順 ・MRTK3 における MRGT の役割 本日お話すること

Slide 4

Slide 4 text

(前置き) なぜ MRTK Graphics Tools を調べようと思ったのか MRTK3 の HandInteractionExamples シーンを触っていて、Canvas + Volumetric UI が凄くキレイだったから Hierarchy ビュー Inspector ビュー Game ビュー (ゲーム再生時)

Slide 5

Slide 5 text

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 も別パッケージとして公開されています。

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

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 へコンパイル可能

Slide 8

Slide 8 text

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 / マテリアルインスタンス

Slide 9

Slide 9 text

・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

Slide 10

Slide 10 text

機能とサンプル 最新リリース (v0.4.0) では、以下5つのサンプルシーンが用意されています。 Material Gallery UnityUI Mesh Outlines Acrylic (Experimental) Canvas Shadow (Experimental)

Slide 11

Slide 11 text

導入手順 実際に 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 依存パッケージ )

Slide 12

Slide 12 text

導入手順 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.. を選択

Slide 13

Slide 13 text

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 バージョンを固定する方法

Slide 14

Slide 14 text

導入手順 Unity Package Manager 経由で MRTK Graphics Tools をインポートする (3) (オプション) サンプルシーンは MRGT 本体をインストールした後に、 Package Manager 経由でインポートが可能 6. インストールが正常に終了すると、 左の図のような画面が表示されます。

Slide 15

Slide 15 text

機能紹介 - UnityUI Element UnityUI Tooling で提供される ヘルパーコンポーネントとユーティリティ を使用すれば、 UnityUI でキレイでフレキシブルな 3D UI を作成することが可能です

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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 システムは、インターフェイス デザイン システムで 期待される基本的な機能の多くが不足していたため、設計が非常に困難だった

Slide 18

Slide 18 text

MRTK3 Canvas ベースのボタンプレハブ構造 MRTK3 サンプルシーン (CanvasUITearsheet.unity) の１番シンプルなボタンの構造を確認する

Slide 19

Slide 19 text

MRTK3 Canvas ベースのボタンプレハブ構造 Action Button (Prefab) を使用して、ボタンが作成されています ※ MRTK3 では、MRTK 2.x のようにサイズごとのボタンプレハブは用意されておらず、Action Button (Prefab) のスケールを変更することで様々なカタチのボタンを生成可能 Hierarchy ビュー Game ビュー

Slide 20

Slide 20 text

MRTK3 Canvas ベースのボタンプレハブ構造 メニュー全体のバックプレートは CanvasElementRoundedRect ( MRGT コンポーネント ) で生成されている

Slide 21

Slide 21 text

MRTK3 Canvas ベースのボタンプレハブ構造 CanvasElementRoundedRect ( MRGT コンポーネント ) を使ってできること

Slide 22

Slide 22 text

MRTK3 Canvas ベースのボタンプレハブ構造 Action Button (Prefab) は、大きく以下３つのレイヤーで構成されています Backglow あり (ボタン押下時) Backglow なし (ボタン押下時) Action Button ・Backplate (背景プレート) ・Backglow (ボタン押下時のエフェクト用) ・Frontplate (フロントプレート – アイコン、ラベル含む)

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

MRTK3 Canvas ベースのボタン構造 MRTK3 が提供する Volumetric UI with Canvas では、少ないプレハブを組み合わせて柔軟な UI を作成することができます

Slide 25

Slide 25 text

参考文献・出典 ・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 動画一覧

Slide 26

Slide 26 text

まとめ 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 表現が可能に

Slide 27

Slide 27 text

Thank you！ Twitter アカウント @Futo_Horio #HoloMagicians