Microsoft Mesh - Custom Immersive Experience : Mesh Interactables概要

# Microsft Meshのサービスの1つとして提供される Custom Immersive Experience

前回に引続きMeshでカスタム環境を構築技術の解説をしていきたいと思います。

https://qiita.com/miyaura/items/423414fb052e45a907a4

今回はMicrosoft Meshのカスタム環境を構築する際によく使うであろうオブジェクトの操作に関する機能について紹介。今回は概要編としてMeshではどういったオブジェクト操作が可能なのか、実装時に設定できる項目に触れていきます。Mesh Interactablesはいくつかの操作タイプがあり、設定も細かいので、今回は操作タイプと共通で設定可能な項目について紹介します。各操作タイプの詳細については別記事で紹介したいと思います。

https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/configuring-for-avatar-movement-and-teleportation#layers-in-detail?wt.mc_id=WDIT-MVP-5003104

## Mesh Interactablesとは

Mesh InteractablesはMesh Toolkitの中にある機能の１つで空間内でユーザが鑑賞できるオブジェクトを作成するときに使用します。Mesh内ではオブジェクトを動かしたり装備したりといった操作が可能です。

https://learn.microsoft.com/ja-jp/mesh/develop/enhance-your-environment/avatar-and-object-interactions/interactables?wt.mc_id=WDIT-MVP-5003104

具体的には以下の4つの操作を実装することが可能です。

![2024-12-02-16-41-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/83cb6af3-985b-d6f9-c06e-37fbdcdf97e8.png)

|Type|概要|
|:-:|:-|
|Basic|操作対象に選ばれているかを検出できるオブジェクトに設定します。「ポインターを当てるとオブジェクトが動く」、「ボタンなどのアクションが伴う」といったオブジェクトを作成したい場合はこのタイプを設定します。このタイプについては、オブジェクトを移動させることはできません。|
|Manipulable|ユーザがTransform(移動、回転、サイズ変更)を操作できるオブジェクトを作成したい場合はこのタイプを設定します。|
|Equippable|ユーザが装備できるオブジェクトを作成したい場合はこのタイプを設定します。手に道具を持って何か別のアクションを行うといった体験を実現するために利用します。|
|Throwable|ユーザが投げることが出来るオブジェクトを作成したい場合はこのタイプを設定します。投擲の方向や強さを設定するとガイドが表示され、リリースするとその方向にオブジェクトを飛ばすことができます。|

:::note infomation
Meshではオブジェクトを投げる方法が2つあります。1つは上記で説明したThrowableを使う方法。もう１つがManipulableオブジェクトを利用し、オブジェクト操作中にリリースするすることで慣性を使って投げる方法です。Manipulableで投げる場合は、Meta Questでは問題ないのですが、PCの場合投げる方向に制約が出てしまうため、PCでの利用も想定される場合はThrowableの利用も検討します。
:::

## Mesh Interactablesの実装

Custom Immersive Expriencesの空間の中でユーザが操作するオブジェクトを作成する場合は、対象のオブジェクトにMesh Interactable Setupコンポーネントを追加し各種設定を行います。実行時にはこのコンポーネントの設定に合わせてMesh Interactable Bodyが生成され動作します。イベントが開催された直後のオブジェクトの状態はMesh Interactable Setupコンポーネントの設定に従い初期化されます。以降はイベントが終了するまでMesh Interactable Bodyの設定を基準に動作します。こういった仕組みを入れることでイベント内のオブジェクトの挙動に一貫性を持たせています。

|![2024-12-06-13-51-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/d69fce2d-1811-4f9c-d54c-04d11a13379f.png)|![2024-12-06-13-55-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/e96f7898-a9ca-d99f-174f-041adae51fac.png)|
|:-:|:-:|
|設計時|実行時|

:::note infomation
Mesh Interactable Setupコンポーネントを追加したオブジェクト（子要素含）にRigidBodyが含まれる場合は、自動的にRididBodyが管理下に置かれます。例えば、オブジェクト操作中はuseGravityがfalseになるなどオブジェクト操作に合わせて制御されます。
:::

次に、Mesh Interactablesを利用した実装について少し紹介します。各タイプ様々な設定をおこなえるため、本記事では各タイプ共通で行う設定の詳細を解説します。各タイプの詳細については別記事で紹介します。

Mesh Interactablesの各タイプには様々な設定項目があるのですが、共通して設定可能な要素は以下のものになります。

* Interaction Settings<BR>オブジェクト操作の基本的な設定項目
* Hilight Settings<BR>オブジェクトがフォーカスを持った場合のハイライト表示に関する設定項目

それぞれについて詳細を解説します。

### Interaction Settings

Interaction Settingsは各タイプにより少し設定は異なるのですが以下の項目は共通で持っています。オブジェクトが操作可能になる際の有効範囲やアバターのエフェクト等の設定を行えます。

![2024-12-06-03-07-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/23649682-9515-140d-39d5-600d8d142a70.png)

|設定項目|概要|設定値|
|:-:|:--|:-|
|Interaction Range|オブジェクトが操作可能になる範囲。ユーザーとオブジェクト間の距離がこの設定範囲内の時に機能します|m単位で設定|
|Aim IK arm on Hover|ユーザ操作によりオブジェクトがフォーカスを取得している時（Hover状態）、アバターがオブジェクトの方に腕を上げるかどうか設定します|<UL><LI>true:腕を上げる</LI><LI>false:腕を上げない</LI></UL>|
|Hover Hand Pos|Hover状態の時のアバターの手の形状（例:指差し、つかんでいる状態等）|<UL><LI>None</LI><LI>Hold Marker</LI><LI>Hold Rocket</LI><LI>Pinch</LI><LI>Cylinder</LI><LI>Ball</LI><LI>Reach</LI><LI>Gun</LI><LI>Point</LI><LI>Thumb Up</LI><LI>Hold Controller</LI></UL>|
|Hover Hand Pose Size|Hover Hand Posの設定値が[Pinch]、[Cylinder] および [Ball]の時の手の開き具合などを調整。それ以外の形状では0.5固定|0～1|


#### Hover Hand Pos

Hover Hand PosはオブジェクトがHover状態の時、アバターの手の形状を指定の形にすることができます。
この機能はPC版でのみ有効です。Meta Questの場合ハンドトラッキングやコントローラを使うため指が自由に動いてしまうため、
基本的には機能しません。

|設定項目|概要|アバターの見た目|
|:-:|:-|:-:|
| None | 設定なしアバターのデフォルトの状態 |-|
| Hold Marker | ペンなどを持った時の指の形状|![2024-12-12-03-44-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/d6dcee64-12ae-7e85-3f4a-4b4be7f6466e.png)|
| Hold Rocket | 打ち上げ花火（ふつうは持たない気がする）を持った時の指の形状|![2024-12-12-03-45-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/d2418a5c-6527-aade-76f0-e6beba2b825f.png)|
| Pinch | ピンチ操作（拡大縮小）時の指の形状|![2024-12-12-03-45-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/9c09508a-90ee-6937-7b55-f23b744b0fd4.png)|
| Cylinder | 筒状のものを持った時の指の形状|![2024-12-12-03-45-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/9eb65081-3378-ed27-e383-2cdb1d36fe6c.png)|
| Ball | 球状のものを持った時の指の形状|![2024-12-12-03-46-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/111cf377-48b0-8b72-8e4e-10815fea932f.png)|
| Reach | 指を伸ばして手に取る時の形状|![2024-12-12-03-46-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/7c2252b5-edd9-497b-903c-b73a8de88e32.png)|
| Gun | 銃を持った時の指の形状|![2024-12-12-03-46-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/47f5c78a-1f97-7a13-3e72-3c72046b898b.png)|
| Point | 指差しの形状|![2024-12-12-03-46-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/0631f786-1414-53e5-d976-586fac7afe07.png)|
| Thumb Up | いわゆる「いいね」の形状|![2024-12-12-03-47-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/38b8f85a-a1f5-92ae-b3e2-93298b636af0.png)|
| Hold Controller |操作対象を持っている形状|![2024-12-12-03-47-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/440c4e1a-f196-7454-d935-628ef5508cb2.png)|

:::note infomation
Hover Hand Posと同じ設定要素を持つものが他にもいくつかあります。例えばオブジェクトを装備するEquippableでは装備中の手の形状として[Hand Pose Shape]という設定項目を持っています。この設定項目も上記と同じ形状を設定することが出来ます。
:::

一部の設定値は、指の開きなどを調整することができます。例えばBallの場合は以下のように設定が可能です。

|0|0.5|1|
|:-:|:-:|:-:|
| ![2024-12-12-03-48-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/680e70b9-da96-2ff8-9c38-70eb05a10cee.png)| ![2024-12-12-03-47-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/8fe54ccb-29d3-b3f8-556d-665cb42a3f1c.png)| ![2024-12-12-03-48-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/e7286c7d-aaea-ddd3-865e-59b9d1fedd4f.png)|

### Highlight Settings

Highlight Settingsはオブジェクトの選択状態などに応じてハイライト表現を入れるための設定項目です。
主に以下のような項目が用意されています。Highlight Mechanismの設定に応じて多少項目が変わります。

![2024-12-06-03-00-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/9af40ba9-f711-785f-24f5-de4a22d447bf.png)


|設定項目|概要|設定値|
|:-:|:--|:-|
|Hovered|ユーザ操作によりオブジェクトがフォーカスを取得している時（Hover状態）,HighLight設定をオブジェクトに反映する/しないを設定|<UL><LI>true:ハイライト有効</LI><LI>false:ハイライト無効</LI></UL>|
|Selected|ユーザ操作によりオブジェクトを選択している時（Select状態）,HighLight設定をオブジェクトに反映する/しないを設定|<UL><LI>true:ハイライト有効</LI><LI>false:ハイライト無効</LI></UL>|
|Highlight Mechanism|オブジェクトに適用するHighLight設定|<UL><LI>Sharder Properties</LI><LI>Mesh Outline</LI><LI>Inner Glow</LI></UL>|
|Highlight Color|HighLightに設定する色を設定|色を指定|
|Highlight Transition Duration|Highlight Mechanismを適用するDuration時間を設定。長くするほどゆっくりとHighLight設定が反映されます。|数値で指定|

#### Highlight Mechanism

オブジェクトをハイライト状態にする際にどういった効果のつけ方をするか設定します。

* Sharder Properties
* Mesh Outline 
* Inner Glow


##### Sharder Properties
Sharderのプロパティを変更したハイライト表現。
マテリアルのSharderプロパティを直接変更します。

※現状この機能は有効に機能していない可能性あり

![2024-12-15-06-23-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/c9253111-3035-1eee-c126-a0ff0ec1d94c.png)

|設定項目|概要|設定値|
|:-:|:--|:-:|
|Highlight Amount Properties|Float値で定義されたSharderプロパティの値を指定します。指定されたプロパティに対して-1～1の範囲で変化させます。|Sharderプロパティ名|
|Highlight Amount Properties|Colorで定義されたSharderプロパティの値を指定します。指定されたプロパティに対して元のColor値をHighlight Color値に変更およびもとに戻す制御を行います。|Sharderプロパティ名|


##### Mesh Outline
オブジェクトのアウトラインを強調するハイライト表現
フォーカスや選択時に、オブジェクトの周囲が広がるような表現が利用できます。

|![2024-12-15-06-34-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/c593ec85-63db-cc5e-9216-02e59dc5e8b2.png)|![2024-12-15-06-35-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/1a6ce035-c52b-b5d1-cc87-9f81d3ed2dae.png)|
|:-:|:-:|
|元の状態|ハイライト状態|

![2024-12-15-06-09-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/6cb5bd8b-850a-32a9-4b19-82a7c553f829.png)|

|設定項目|概要|設定値|
|:-:|:--|:-:|
|Highlight Outline Width|アウトラインの幅を設定します|任意設定|
|Custom Outline Material|アウトラインに使用するマテリアルをカスタムする場合に設定。Meshでのこの機能はSharderプロパティのVertex Extrusionに関する情報を変化させています。このため該当のパラメータに関する設定が有効になっていないといけません。もしカスタマイズする場合はデフォルトのマテリアルをコピーして作るのが無難|任意設定|
|Highlight Outline Stencil Write|アウトラインに使用するマテリアルをカスタムする場合に設定。この設定は上記のパラメータと合わせて利用します。このマテリアルはオブジェクト本体のマテリアル表現に影響します。Highlight　Outline Materialで設定したマテリアルだけ使うとオブジェクト本体の見た目もアウトラインのマテリアルに置き換わってしまいます。これを防ぐためにこのプロパティで設定したマテリアルを使用します。Custom Outline Materialで作った表現をくりぬいて元のオブジェクトの見た目にしています。こちらの設定もしカスタマイズする場合はデフォルトのマテリアルをコピーして作るのが無難|任意設定|
|Outline Exclusion Mode|このアウトライン表現を適用しないオブジェクトを設定する際のモード。|<UL><LI>None:全てに適用</LI><LI>Tag:一致するタグは除外</LI><LI>Name Start With:指定文字列から始まるオブジェクト名は除外</LI><LI>Name Contains:指定文字列を含むオブジェクト名は除外</LI></UL>|


##### Inner Glow
スポットライトで照らしたような表現でオブジェクトのフォーカスや選択を表現します。パラメータは以下のようになっています。

|![2024-12-15-06-33-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/40e495e8-07fc-bcee-c2f0-d903be9495e5.png)|![2024-12-15-06-33-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/48c5618c-5fc1-0307-636b-c34f727da32b.png)|
|:-:|:-:|
|元の状態|ハイライト状態|

![2024-12-15-06-03-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/05c33dac-063a-f3a5-3a51-a8585a984225.png)


|設定項目|概要|設定値|
|:-:|:--|:-:|
|Custom Highlight Material|HighLight用に設定したいMaterial。設定は任意で設定しない場合は既定のマテリアルで処理が実施されます。|任意設定|
|Execusion String|除外文字列。ここに指定した文字列が含まれるGameObjectはハイライトの対象外になります。子要素等でハイライトを一部除外したい場合に利用します。|Cube等|