Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MRTK Graphics Tools Overview - 概要説明

MRTK Graphics Tools Overview - 概要説明

堀尾風仁 Futo Horio

December 15, 2022
Tweet

More Decks by 堀尾風仁 Futo Horio

Other Decks in Technology

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) の1番シンプルなボタンの構造を確認する

    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) は、大きく以下3つのレイヤーで構成されています
    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