Microsoft Mesh - Custom Immersive Experience : Layer設定

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

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

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

今回はMicrosoft Meshのカスタム環境を構築する際に使えるUnityのレイヤー設定です。レイヤーそのものについては公式サイトでも詳細は記載されているのですが、それ自体がどのような挙動になるのか等使いどころを整理してみました。

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

## Microsoft Meshのレイヤー設定

レイヤー設定自体はUnityで使う考え方と特に違いはありません。対象オブジェクトに対してレイヤーによる属性を付与することでコンテンツを効果的に設計・開発できるというものです。Microsoft Meshでは幾つかのレイヤー設定が提供されており、Mesh Toolkitの様々な機能を活用できます。本記事では実際にどのような動作になるか動きも含めて紹介します。
Mesh Toolkit導入後設定可能なレイヤーは以下の通りです。
Meshの空間ではオブジェクトの種類として大きく以下の3つのカテゴリに分かれます。

* Avatar<BR>参加者が利用するアバターオブジェクト
* Object<BR>空間内に存在する構造物や操作化可能なオブジェクト全て
* Raycast<BR>コントローラからオブジェクトを選択するためのレイ

レイヤーはこれらの制御を含めて様々な機能を持っています。

|No.|レイヤー名|特徴|
|:-:|:--|:--|
|0|Default|Avatar/Object/Raycastは衝突する基本的なレイヤー。基本はこれでOK|
|1|TransparentFX|特に衝突するものがないレイヤー。Unityのレンダリングパイプラインにおける透明オブジェクトと特殊効果オブジェクト処理用|
|2|IgnoreRaycast|Avatar/Objectは衝突するレイヤー。Raycastは透過|
|3|-|-|
|4|Water|Avatar/Object/Raycast全てが透過。水面に利用するレイヤー。水に関する物理演算などで使用するレイヤー。Trigger利用前提|
|5|-|-|
|6|-|-|
|7|-|-|
|8|-|-|
|9|-|-|
|10|-|-|
|11|-|-|
|12|-|-|
|13|-|-|
|14|GroundCollision|Avatar/Object/Raycastと衝突するレイヤー。アバターの歩行エリアとして衝突するオブジェクトに指定。Private Preview版ではNavMeshレイヤーだったもの|
|15|-|-|
|16|-|-|
|17|IgnoreCollisions|Avatar/Object/Raycast全てが透過。環境や他のオブジェクトを切り抜いて透過させることができる|
|18|TriggerVolume|Avatar/Object/Raycast全てが透過。Triggerイベントを使った処理を作る際にTrigger対象となる領域を表すオブジェクトに利用|
|19|-|-|
|20|ObjectCollision|Objectだけ衝突するレイヤー。Avatar/Raycastは衝突しない|
|21|IgnoreObjects|Avatar/Raycastは衝突するレイヤー。Objectは衝突しない|
|22|RaycastOnly|Raycastだけ衝突するレイヤー|
|23|-|-|
|24|-|-|
|25|-|-|
|26|Custom26|Avatar/Object/Raycastが衝突するレイヤー。ユーザのカスタム定義用１|
|27|Custom27|Avatar/Object/Raycastが衝突するレイヤー。ユーザのカスタム定義用２|
|28|Custom28|Avatar/Object/Raycastが衝突するレイヤー。ユーザのカスタム定義用３|
|29|IgnoreRealtimeLight|Avatar/Object/Raycastが衝突するレイヤー。 realtime directional lightの影響を受けないオブジェクトに利用する。|
|30|WallCollision|Avatar/Object/Raycastが衝突するレイヤー。環境外へユーザが出ていかないようにするための壁などに利用。VRヘッドセット等でめり込んだ場合は、エリア内にスポーンする。|
|31|IgnoreParticipant|Object/Raycastが衝突するレイヤー。Avatarは衝突しない|

:::note info
各レイヤーの相互作用に関する情報は以下の通りです
|![2024-11-17-13-56-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152548/c593daa9-1242-828d-5b56-16df2f024afe.png)|
|:-:|
|引用元:Microsoft Learn: [レイヤーの相互作用とテーブル](https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/configuring-for-avatar-movement-and-teleportation?wt.mc_id=WDIT-MVP-5003104#layer-interactions-and-table)|
:::

Meshのカスタム環境でも基本的に利用するものはDefaultになります。作りたい環境に応じてMesh Toolkitにある程度処理を任せる場合は用途に応じたレイヤーを設定していくことになります。

### 2. IgnoreRaycast

<iframe width="560" height="315" src="https://www.youtube.com/embed/0Kayr_9aae0?si=Q0X0DZhjQAhk614O" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Avatar/Objectは衝突し、Raycastは透過するオブジェクトを作成するために利用するレイヤーです。アバターやオブジェクトは通過できないですが、Raycastが通ります。たとえば、ガラスの向こうのオブジェクトを操作するといったような体験を作ることができます。

### 4. Water

<iframe width="560" height="315" src="https://www.youtube.com/embed/gJcSK-gT8r4?si=g0Q-UmVedRGxVpBh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

水面に関するオブジェクトに利用するレイヤーです。Avatar/Object/Raycast全てが通過します。このレイヤーについてはColliderのタイプをTriggerで利用する必要があります。使い方としては池のような水面に設定します。アバターやオブジェクトは水の中に落ちていく形になります。

### 14. GroundCollision

<iframe width="560" height="315" src="https://www.youtube.com/embed/wkecUFZ2CS4?si=KyJt7jOWUlQgVFNc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

床に関するオブジェクトに利用するレイヤーです。Avatar/Object/Raycastと衝突します。重要なのはこのレイヤーが設定されているオブジェクトに対してテレポート移動が可能になるという事です。アバターの移動に関して、一般的なVR空間では右コントローラのスティックを使ってテレポート移動できます。これはMeshでも可能です。ただ、カスタム環境を構築する場合はテレポート移動可能な領域を自由に設計することができます。例えば、ステージ上ではテレポート禁止するといった空間の構築も可能になります。

### 17. IgnoreCollisions

<iframe width="560" height="315" src="https://www.youtube.com/embed/Enadcojt08c?si=nbuZuh1ytago0n6Z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Avatar/Object/Raycast全てが通過するオブジェクトに設定するレイヤーです。通過できるオブジェクトを作りたい場合に使えそうです。

### 18. TriggerVolume

<iframe width="560" height="315" src="https://www.youtube.com/embed/qZHKqk78wck?si=TXwdh86edhE4wMPj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Avatar/Object/Raycast全てが通過するオブジェクトに設定するレイヤーです。ColliderをTriggerにして利用します。オブジェクトの動きの中でTriggerイベントを利用する領域を設計する際に利用できるレイヤーです。例えば、レイヤー内に存在する時だけ色が変わったりアニメーションが動いたりするような表現を作りたい場合に利用します。

### 20. ObjectCollision

<iframe width="560" height="315" src="https://www.youtube.com/embed/YeBTGmewtdk?si=bvVO2jgl58saKles" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Objectだけが衝突するレイヤーです。アバターやRaycastは通過できます。操作対象のオブジェクトをある空間に閉じ込めるといった時に利用できそうです。

### 21. IgnoreObjects

<iframe width="560" height="315" src="https://www.youtube.com/embed/sn5Q9G7n9Gc?si=uREUHyXqW3vZshw7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

ObjectCollisionと逆で、Objectだけが通り抜けるレイヤーです。アバターやRaycastは通過できません。このレイヤー設定されているオブジェクトを挟んで向こう側の物体を操作することはできません。

### 22. RaycastOnly

<iframe width="560" height="315" src="https://www.youtube.com/embed/mkpOTNx5W6g?si=EZbyi2NM6UttNgck" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Raycastだけ衝突するレイヤーです。オブジェクトやアバターは通り抜けることが可能です。コントローラレイが通らないためフォーカスが取れず、このレイヤーを設定したオブジェクトを挟んで向こう側のオブジェクトを操作することはできません。一方、オブジェクトを操作した状態であれば、コントローラレイは影響を受けません。つまり動画のように持った状態で通過することが出来ます。

### 26-28 Custom

ユーザが自由に利用できるレイヤーです。すべてのオブジェクトが衝突します。

### 29. IgnoreRealtimeLight

<iframe width="560" height="315" src="https://www.youtube.com/embed/9KLzxUfuBL4?si=Q3Zc-s59u4QLUk9I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Direction Light等のリアルタイムモードのライトの反映を無視するオブジェクトに設定するレイヤーです。
（色々調査はしているが今のところどういう効果があるかワカラナイ）

### 30. WallCollision

<iframe width="560" height="315" src="https://www.youtube.com/embed/BdGAuRaYvRo?si=2oK-bRk9YrxLBbBA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

空間の壁に設定するレイヤーです。すべてのオブジェクトと衝突します。このレイヤーは特殊でMeta Quest等でこのレイヤーが設定されたオブジェクトに頭を傾けるなどして壁にめり込むと、めり込みを解消する形でリスポーンされます。PC版では意図的にめり込むことはできないため、ただの衝突するレイヤーとして機能します。

### 31. IgnoreParticipant

<iframe width="560" height="315" src="https://www.youtube.com/embed/M5WkY3pusWk?si=t4ZvMrZg072SwREf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

アバターのみ通過できるオブジェクトです。オブジェクトやコントローラレイは通過できません。ある部屋等の空間に操作できるオブジェクトを閉じ込めたい場合、出入り口にこのレイヤーを使ったオブジェクトを置くと実現できそうです。