MRTK Graphics Tools Overview - 概要説明

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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)
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

    View Slide

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 依存パッケージ )
    

    View Slide

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.. を選択
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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 動画一覧
    

    View Slide

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

    View Slide

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

    View Slide