MRTK Graphics Tools 概要紹介

# はじめに
今回は、XR Kaigi 2022 Day 2 のHoloLens Meetup セッションにてご紹介させていただいた **MRTK Graphics Tools for Unity** についての概要紹介をできればと思います。イベント当日に使用した資料は、以下URLから確認できます。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ef5d49be-d48b-2dd5-26b2-babf8d396402.png" width="500">
>
> [MRTK Graphics Tools Overview - 概要説明](https://speakerdeck.com/futo23/mrtk-graphics-tools-overview-gai-yao-shuo-ming) | SpeakerDeck


# MRTK Graphics Tools とは？

<img src="https://storage.googleapis.com/zenn-user-upload/320fe7aed11b-20221114.png" width="500">

:::note info
Graphics Tools for Unity は、Unity 2020.x 以降で利用可能です
:::

MRTK Graphics Tools for Unity (MRGT) は、MRデバイスのパフォーマンス性能の範囲内で Mixed Reality アプリケーションの視覚的な忠実性 (visual fidelity) を向上させるために作られたコード、シェーダー、アセット、サンプルを含む Unity Engine 向けパッケージです。パッケージ単独での使用、もしくは MRTK に含まれる他のパッケージと組み合わせて使用することが想定されています。

- [グラフィックス ツールとは — MRTK3](https://learn.microsoft.com/ja-jp/windows/mixed-reality/mrtk-unity/mrtk3-graphicstools/)
- [microsoft/MixedReality-GraphicsTools-Unity](https://github.com/microsoft/MixedReality-GraphicsTools-Unity) (GitHub)

**MRTK Graphics Tools が MRTK パッケージ群から独立した経緯**
MRTK 2.x で、開発者から Standard Shader System (グラフィック周り) を MRTK から独立したパッケージとして扱えるようにして欲しいと要望を受け、検討を重ねた結果、グラフィック周りの機能を抽出して、MRTK から独立したパッケージ、ドキュメント、サンプルを作成することになったようです。( 出典 : [Mixed Reality Dev Days: Discussion on Graphic Tools for Unity in MRTK3](https://www.youtube.com/watch?v=rXbkJRhaBqE) ) 

:::note warn
今回ご紹介するのは、Unity 向けのパッケージですが、Unreal Engine 向けの Graphics Tools も、別リポジトリとして公開されています。[microsoft/MixedReality-GraphicsTools-Unreal](https://github.com/microsoft/MixedReality-GraphicsTools-Unreal)
:::

# MRTK Graphics Tools と MRTK3 の依存関係について
MRTK Graphics Tools (MRGT) は、MRTKのバージョンアップ (MRTK 2.x → MRTK3) に伴い、MRTK から独立したパッケージとして管理されるようになった経緯からも推測できる通り、MRTK3 への依存関係はありません。※ ただし、MRTK3 は、MRTK 2.x で内包されていた Standard Shader System を MRGT パッケージとして切り出しているため、MRTK3 で UXコンポーネントを使用する際には、MRGTパッケージを併用することになります。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/321c059d-3656-8ad5-0542-8fc776463956.png" width="500">
>
>引用元 : [MRTK3 Packages Overview – dependencies](https://learn.microsoft.com/en-us/windows/mixed-reality/mrtk-unity/mrtk3-overview/packages/packages-overview#dependencies)

MRTK3 の以下パッケージで、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)

MRTK3 を使って Mixed Reality アプリケーションを開発する際は、ほとんど全てのシチュエーションで、MRTK Graphics Tools (MRGT) が必要になると言っても過言ではないと思います。少し話が逸れますが、MRTK3 の HandInteractionExample シーンの中に Canvas + Volumetric UI (以下、画像) というサンプルメニューが含まれており、このメニューのボタンやバックプレートに MRGT が使用されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8e3a5f5c-0a85-df28-7d11-6b92cc787280.png" width="800">

後述の MRGT の Unity UI Tooling 機能を用いることで、MRTK が提供する優れた Volumetric UI を Unity's Canvas 上で構築することができ、MRTK 2.x の UI 開発で課題となっていた Prefab 種類多すぎ問題や、レイアウト難しい問題が改善されています。ここで、なぜ MRTK 2.x から MRTK3 へのバージョンアップに伴い、Canvas UI が採用されたのかの経緯について、少しご紹介できればと思います。

元々、MRTK 2.x では Unity's Canvas System を使わない Non Canvas UI が採用されていました。( ※ Unity UI 上で Volumetric UI を構築することが困難だったため。) 3次元の物理環境での UI/UX を構築することが前提とされており、MRTK 独自の Prefab を使用してボタンやメニューを構築していたため、レイアウト機能やサイズ変更等が非常に煩雑で、設計が難しいというフィードバックが挙がっていました。デザインが美しく、すぐに使えるボタンが Prefab というカタチで提供されており、非常に助かる反面、ボタンを組み合わせてメニューを作成したり、動的なレイアウト変更を行うのは少し難しいなという印象を持っていました。このような経緯から、MRTK3 では Unity's Canvas システム上に MRTK の Volumetiric UI を構築するためのヘルパーコンポーネントやスクリプトを開発し、MRGT の Unity UI Tooling の機能として提供しています。これにより、Unity UI システムのさまざまな恩恵 (さまざまな物理コンテキストに対応したり、レスポンシブレイアウトを実現したり、プレハブのサイズ変更が容易にできるようになるなど..) を受けることができ、MRTK の Rich Volumetiric UI の設計&開発の柔軟性が向上することが期待されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/fa34670a-30ba-add9-3708-9113d4aeba04.png" width="800">

ちなみに、MRTK3 では Canvas UI が推奨されているので、これからの UI 開発は Canvas ベースになっていくとは思います。そうは言っても、MRTK 2.x での開発に慣れている方にとっては、Unity UI 上での UI 構築は少し学習コストが掛かります。また、膨大な数の Prefab 等をバッチ処理する際には、Non-Canvas UI の方が優れいていることもあり、MRTK3 では、Canvas, Non-Canvas どちらの種類の Prefab も用意されています。MRTK3 で提供される新しい機能 (Theming) は、まだ Canvas UI に対応していないようです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/f7dbf4b6-2daa-50c7-4aed-b4c422b93330.png" width="500">

# アーキテクチャ
MRGTパッケージは、スクリプトやコンポーネントの特性に応じて、
以下、3つのフォルダ (Editor, Runtime, Samples) に分類されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/52f42576-b354-1f9f-78b8-f0e48b0a846a.png" width="500">

| フォルダ名 | 概要 |
| --- | --- |
| Editor | Editor ディレクトリ内の全てファイルには、編集時に開発者を支援する機能が含まれています。例えば、Custom inspectors, shader GUIs, property drawers, Unity Editorでのみレンダリングされるシェーダーなどが用意されています。|
| Runtime | Rutime ディレクトリには、パッケージの機能が一番多く含まれており、すべてのコードとコンテンツはプレイヤービルドの中でコンパイルすることができます。ディレクトリ内は、大まかな機能エリアとアセットフォルダーに分けられています。(Shader, Texture, Model) |
| Samples | 2022/12/16 現在、サンプルは5種類 (後述) 用意されています。MRTK v2系のサンプルと同じく、Package Manager 経由でサンプルデータを随時インポートする方式が採用されています。 |

# 導入手順

:::note info
本記事では Unity 2021.3.6f1 を使用しております。
:::

既存の Unity プロジェクトに Graphics Tools をインポートするための手順は、以下の通りです。
今回は、Unity の Package Manager 経由で MRGT パッケージをインポートする手順をご紹介しますが、MixedRealityFeatureTool 経由でも MRGT をインポートすることが可能です。

1. まず Unity プロジェクトを開いて、メニューバーから ``Window > Package Manager`` を選択します。
<img src="https://storage.googleapis.com/zenn-user-upload/3bdce6d9829d-20221114.png" width="500">

2. Package Manager 内の ``+`` アイコンをクリックして、``Add packages from git URL...`` を選択します。
<img src="https://storage.googleapis.com/zenn-user-upload/ed2962d9c563-20221114.png" width="500">

3. 入力フィールドに ``https://github.com/microsoft/MixedReality-GraphicsTools-Unity.git?path=/com.microsoft.mrtk.graphicstools.unity#v0.4.0`` を貼り付けて、``Add`` ボタンをクリックします。
<img src="https://storage.googleapis.com/zenn-user-upload/6d4a075ddfc2-20221114.png" width="500">
<br/>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/448eed67-056e-4a9a-6100-2138c0affac8.png" width="300">


4. Graphics Tools は、Unity プロジェクトの ``packages`` 配下に、``MRTK Graphics Tools`` という名前で、インポートされます。

**Package Manager**
<img src="https://storage.googleapis.com/zenn-user-upload/58736d03ee43-20221114.png" width="400">

**Project ウィンドウ**
<img src="https://storage.googleapis.com/zenn-user-upload/fd9ec38a2a51-20221114.png" width="400">

:::note alert
サンプルは初期インポート時には含まれていないので、必要な場合は Package Manager で Graphics Tools を検索して、インポートを行う必要があります。
:::

# 主な機能とサンプル
MRTK Graphics Tools に含まれている主な機能は、以下になります。
MRTK 2.x に含まれていた Standard Shader や Proximity Light/Hover Light、Mesh Outline はもちろんのこと、
**Unity UI Tooling** や **Acrylic**、**Accessibility utilities** といった新しい機能も含まれています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ad86a4b6-5e25-08e3-b841-f5d2ba70e863.png" width="800">

開発時に Editor 上で使用するツールとしては、スクリーンショット撮影機能の他に、**Measure Tool (計測ツール)** ― オブジェクトの大きさ、オブジェクト間の距離等を現実世界のスケール値で簡単に計測できるツールや、**Mip map** と呼ばれるテクスチャの大きさを可視化する機能などが含まれています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/1a87ed11-f502-821a-1f46-2ffa263ab96d.png" width="800">

サンプルシーンは、以下5つのシーンが用意されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/d9e247df-9a41-b48f-3987-5bf459caa234.png" width="800">

- Material Gallery
- Unity UI
- Mesh Outlines
- Acrylic (Experimental)
- Canvas Shadow (Experimental)

以降、現在鋭意作成中です。


# MRTK3 Canvas ベースのボタンプレハブ構造について

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/89bfa71b-40aa-9b16-8505-fb652674decc.png" width="800">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/375ca81e-8f47-0fae-e597-23d9569ab85d.png" width="800">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/abafd013-e0aa-121a-758b-ad9a356db382.png" width="800">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2a0b824c-2b2f-c683-0c3a-1e223d9ff3cb.png" width="800">


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8ccf565e-9aa8-5312-7a95-cf4baae8bf02.png" width="300">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/58306c43-64b9-9ea4-969b-00596f70fa04.png" width="300">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c0b2325e-8708-fdfb-291e-f3f4eeb90a47.png" width="800">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/a283ee8a-cd98-56a3-7a0b-16126b5edca3.png" width="800">

# 参考文献
[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)