Mesh Toolkitでゼロから空間を作ってみる話

Mesh Toolkit でゼロから空間を作ってみる話 08/2024 XR ミーティング @takabrz1 Takahiro Miyaura

宮浦 恭弘 (Miyaura Takahiro) Microsoft MVP for Mixed Reality 2018-2025 XRは趣味です 大阪駆動開発(とHolomagicians)コミュニティに生息 HoloLens日本販売してからxR系技術に取組む 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura https://zenn.dev/miyaura 最近興味があって取り組んでいるもの ○ Microsoft Mesh ○ Snapdragon Spaces ○ Mixed Reality Toolkit v3.0.0 ○ Vision Proもそろそろ・・・ @takabrz1 ※よかったらこれを機にお知り合いになってください

• https://qiita.com/miyaura
• https://zenn.dev/miyaura

最近興味の1つに Microsoft Meshがあるんですよ。。。 2024/8/21 © 2024 Takahiro Miyaura

というのも… Microsoft Mesh ちょくちょく更新 2024/8/21 © 2024 Takahiro Miyaura

先月以降の更新 5.2409.X系(Immersive Spaces) 5.2410.X系(Mesh Toolkit) ○ Mesh アバターのリアクションが Immersive Spacesで使える ○ WebSlateのURL動的変更 2024/8/21 ✓ Custom Immersive Spacesの 機能 ✓ Webサイトを表示する部品 ✓ 以前はプログラム内で設URL設定 だったが、イベント中に変更できる © 2024 Takahiro Miyaura

先月以降の更新 5.2410.X系(Mesh Toolkit) – Web Slate 2024/8/21 © 2024 Takahiro Miyaura

ということで今日は Microsoft Meshの話 ゼロからカスタム環境作る 2024/8/21 © 2024 Takahiro Miyaura

1 Microsoft Meshについて 2 Custom Immersive Spaceをゼロから作る 目次 3 プロジェクト作成～Mesh Toolkit設定 4 空間作成とアバター制約 5 Unity上で確認＆デプロイ

Microsoft Mesh 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh 3D没入空間でミーティングやイベントを実施できるサービス https://adoption.microsoft.com/en-us/microsoft-mesh/ Mesh in Teams, built into your Teams meeting experience, elevates engagement with readymade 3D immersive spaces crafted to suit your everyday meeting needs, whether it’s a team social gathering, brainstorming session, or a round-table discussion. Microsoft Mesh allows you to host larger events in custom immersive spaces that are tailored to your specific business needs, like all-hands meetings, onboarding, training, or simulations. Use a no-code editor to easily customize the event or the Mesh toolkit to leverage the power of Unity for fully customizable immersive experiences. 引用:https://adoption.microsoft.com/en-us/microsoft-mesh/ 機械翻訳・・・ Mesh in Teamsは、Teamsのミーティングエクスペリエンスに組み込まれており、チームの親睦会、ブレーンストーミングセッショ ン、円卓会議など、日常的なミーティングのニーズに合わせて作られた既製の3D没入型スペースで、エンゲージメントを高めま す。 Microsoft Meshを使用すると、全員ミーティング、新入社員研修、トレーニング、シミュレーションなど、特定のビジネスニーズ に合わせたカスタム没入型スペースで大規模なイベントを開催できます。コード不要のエディタを使用してイベントを簡単にカスタ マイズするか、Meshツールキットを使用してUnityのパワーを活用し、完全にカスタマイズ可能な没入型体験を実現できます。 2024/8/21 © 2024 Takahiro Miyaura

• https://adoption.microsoft.com/en-us/microsoft-mesh/

Microsoft Mesh 大きくは3つの構成 https://adoption.microsoft.com/en-us/microsoft-mesh/ Avatars for Teams Immersive Spaces in Teams Custom Immersive experiences ○ Mesh内で活用 ○ Teamsで利用可な3D空間 ○ 複数のAvatarを作成可 ○ プリセットの空間を利用 ✓ カスタマイズ不可 ○ Unityで自由な空間作成 ✓ Mesh Toolkitで開発 ○ Teams内ではWebカメラの 代替としても利用可 ○ Teams会議から利用可 ✓ Meta Quest ✓ PC Custom Immersive experience 利用× 2024/8/21 © 2024 Takahiro Miyaura ○ 既存環境をカスタイズ ✓ 既製の空間に装飾 ○ Meshポータル ✓ イベント/ミーティング作成 ✓ カスタム環境の管理 ○ Mesh Appを利用 ✓ Meta Quest ✓ PC

• https://adoption.microsoft.com/en-us/microsoft-mesh/

Microsoft Mesh Avatars for Teams https://adoption.microsoft.com/en-us/microsoft-mesh/ Avatars for Teams ○ Mesh内で活用 ○ 複数のAvatarを作成可 ○ Teams内ではWebカメラの 代替としても利用可 2024/8/21 © 2024 Takahiro Miyaura

• https://adoption.microsoft.com/en-us/microsoft-mesh/

Microsoft Mesh Immersive Spaces in Teams https://adoption.microsoft.com/en-us/microsoft-mesh/ Immersive Spaces in Teams ○ Teamsで利用可な3D空間 ○ プリセットの空間を利用 ✓カスタマイズ不可 ○ Teams会議から利用可 ✓ Meta Quest ✓ PC Custom Immersive experience 利用× 2024/8/21 © 2024 Takahiro Miyaura

• https://adoption.microsoft.com/en-us/microsoft-mesh/

Microsoft Mesh Custom Immersive experiences https://adoption.microsoft.com/en-us/microsoft-mesh/ 既存環境のカスタマイズ(=テンプレート) 新しく環境をつくる ○ プリセット or カスタム環境を利用 ○ 空間内にオブジェクト配置 & テンプレート化 ○ Unityで自由な空間作成 ✓ Mesh Toolkitで開発 ○ 現在の提供オブジェクト ✓ テキスト ✓ 動画 ✓ 画像 ✓ 画面共有 ○ Mesh Appを利用 ✓ Meta Quest ✓ PC ○ 既存環境をカスタイズ ✓ 既製の空間に装飾 今日はこっちの話 2024/8/21 © 2024 Takahiro Miyaura

• https://adoption.microsoft.com/en-us/microsoft-mesh/

Microsoft Mesh 利用にはM365ライセンスが必要 Avatars for Teams Immersive Spaces in Teams ○ Mesh内で活用 ○ 複数のAvatarを作成可 ○ Teams内ではWebカメラの 何れかのライセンスが必要 代替としても利用可 ○ Teamsで利用可な3D空間 ○ プリセットの空間を利用 ✓カスタマイズ不可 ○ Teams会議から利用可 ✓ Teams Essentials ✓ Meta Quest ✓ Microsoft 365 Business Basic ✓ PC ✓ Microsoft 365 Business Standard ✓ Microsoft 365 Business Premium ✓ Microsoft 365 E3/E5 ✓ Office 365 E1/E3/E5 Custom Immersive experience 利用× 2024/8/21 © 2024 Takahiro Miyaura Custom Immersive experiences ○ Unityで自由な空間作成 ✓ Mesh Toolkitで開発 ○ 既存環境をカスタイズ ✓ 既製の空間に装飾 商用テナントの ○Teams Meshポータル Premiumライセンス ✓ イベント/ミーティング作成 ✓ カスタム環境の管理 ※1テナント6カ月のトライアル版有 ○ Mesh Appを利用 ✓ Meta Quest ✓ PC

Custom Immersive Spaceをゼロから作る 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る 平面だけあるシンプルな空間を作ってみる 開発環境 奈落の底に落ちないように囲いはつける 2024/8/21 © 2024 Takahiro Miyaura ○ Unity ○ 2022.3.34 ○ URPで ○ Mesh Toolkit ○ V5.2410.201

Custom Immersive Spaceをゼロから作る プロジェクト作成～Mesh Toolkit設定 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – プロジェクト作成 Unityプロジェクト作成 Universal 3Dで作る ○ Unity 2022.3.34f1 サポート外バージョンはデプロイ できないことがあるので注意 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – Mesh Toolkitの導入 Mesh Toolkitのレジストリ登録 Project Settingsから ○ Package Managerの項目で以 下を入力 2024/8/21 © 2024 Takahiro Miyaura ✓ Name: Mesh Toolkit ✓ URL: https://registry.npmjs.org ✓ Scopes(s): com.microsoft

• https://registry.npmjs.org

Microsoft Mesh Custom Immersive Spaceをゼロから作る – Mesh Toolkitの導入 Mesh Toolkitのインポート Package Managerから ○ Packagesを[My Registories]に変更 ○ Microsoft Mesh Toolkitを インポート 2024/8/21 © 2024 Takahiro Miyaura

Custom Immersive Spaceをゼロから作る 空間作成とアバター制約 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – 空間作成 空間作成 Hierarchyパネルで 1. 床(Plane)を作る 2. 床にGroundCollisionレイヤーつける ✓ テレポートができる床になる 3. 高さ0.35以上の壁を四方に作る 4. スポーン地点を作る ✓ Travel Point Group作成 5. MeshThumbnailCameraを追加 ✓ Meshポータルアップロード時のサムネイル撮影用 6. MeshEmulatorSetup [NoUpload]を追加 ✓ PlayModeで動作検証するために必要 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – 空間作成 テレポートのサポート https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/set-up-your-scene?wt.mc_id=WDIT-MVP-5003104#supporting-teleportation Mesh内でのテレポート ○VR空間でよく使うテレポートについては有効にしたい床面に[GroundCollision]を設定 ○GroundCollisionが定義されたオブジェクトにテレポートマーカーを当てると青いラインになる。 ○設定のないオブジェクトにテレポートマーカーを当てると赤いラインになり着地点が表示されない。 ※この他にも空間で作用の異なるLayerがいくつかある。 2024/8/21 © 2024 Takahiro Miyaura

• https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/set-up-your-scene?wt.mc_id=WDIT-MVP-5003104#supporting-teleportation

Microsoft Mesh Custom Immersive Spaceをゼロから作る – 空間作成 Travel Point https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/set-up-your-scene?wt.mc_id=WDIT-MVP-5003104#add-a-travelpoint 空間内のアバター出現座標を管理 2024/8/21 © 2024 Takahiro Miyaura ○ TravelPointGroupが空間全体の移動ポイント を管理 ○ TravelPointがアバターの出現位置 ○ TravelPointは最低1つは必要 ○ TravelPointを複数作成しプログラムで制御する ことで建物の外⇔中への移動といった表現が可能に

• https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/set-up-your-scene?wt.mc_id=WDIT-MVP-5003104#add-a-travelpoint

Microsoft Mesh Custom Immersive Spaceをゼロから作る – 空間作成 Mesh Thumbnail Camera https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/set-up-your-scene?wt.mc_id=WDIT-MVP-5003104 #add-the-mesh-thumbnail-camera Meshポータル上での管理で利用 ○ ○ ○ ○ 2024/8/21 © 2024 Takahiro Miyaura 環境ごとにサムネイル画像の用意が必須 既定の解像度の画像を複数枚用意 Hierarchy内にMeshThumbnalCameraを追加 好きな画角で空間に設置しておくとデプロイ時に撮影

Custom Immersive Spaceをゼロから作る アバター制約 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – アバター制約 アバターのCollider問題に注意(参考: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 Mesh アバターには制限がある ○ 最大歩行可能勾配: <45度 ○ 最大ステップ高さ: 0.3 ○ アバター カプセルの半径: 0.3 ○ アバター カプセルの高さ: 2 ○ アバターの高さ: 1.8 ただし、この寸法に素直に従っても色々問題がある 特にUnityのPlay Modeで使うアバターと 実際のアバターでは色々違うｗ Unity上のアバター 2024/8/21 Mesh上のアバター © 2024 Takahiro Miyaura

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

Microsoft Mesh Custom Immersive Spaceをゼロから作る – アバター制約 公式のアバター制御に関するガイダンスは一読した方がいいかも https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/configuring-for-avatar-movement-and-teleportation サイトより引用 ○ アバターが歩くビジュアル サーフェスに衝突サーフェスを配置します。 これは、(浮動や クリッピングを防ぐために) ビジュアルサーフェスに対するアバターの位置に関する問題 を回避するために重要です。 ○ 角を丸くすると、アバターの動きがスムーズになり、アバターが動けなくなります。 ○ アバターの動きをブロックするには、急な斜面または最大ステップの高さよりもはるかに 大きい高さを使用します。 ✓ ✓ 2024/8/21 コライダーの形状を変更して、アバターが移動するのが自然に困難または不可能なサーフェスを作成しま す。 たとえば、メッシュ コライダーは、アバターが立つ平坦な面や歩行可能な傾きを提供しない不規則な 形状を使用します。 場合によっては、カプセルコライダーや同様の丸い形状のオブジェクトや領域でアバターが歩くべきではない場 合があります。 傾斜が十分に急でアバターが滑り落ちると、これらの図形は歩けなくなります。 © 2024 Takahiro Miyaura

• https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/configuring-for-avatar-movement-and-teleportation

Custom Immersive Spaceをゼロから作る Unity上で確認＆デプロイ 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る - Unity上で確認 Play Modeで確認 1. Hierarchyに MeshEmulatorSetup[NoUpload]があることを 確認 2. Play Modeで実行 ✓ 操作はいわゆるFPS操作 ✓ F1でチートシートでます 3. 複数ユーザで空間共有する場合の検証 ✓ Gameパネル内の[Add]ボタンを押すとユーザが 増えていきます。 動作に問題がなければ作業完了！ 2024/8/21 © 2024 Takahiro Miyaura

Custom Immersive Spaceをゼロから作る デプロイ 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – デプロイ Mesh Tookitメニューの Environmentから・・・ 1. Azure ADのアカウントでサインイン ✓ Mesh設定済みのテナント所属 2. 初回はCreate Environmentから新規作成 ✓ Name:名前 ✓ Description:説明 ✓ Environment Collection: Meshポータルで作成したコレクション ✓ Capacity: 同時参加数 ✓ Setup Cloud Scripting Configuration Cloud Scripting使うなら設定 （今回は不要） 3. Create Environmentで作成 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – デプロイ Mesh Tookitメニューの Environmentから・・・ 1. Update Environmentを選択 2. Environment Configurationsを設定 ✓ リスト:先ほど作成したEnvironment ✓ シーン:先ほど作成したScene ✓ Thumbnail: Generate from Thumbnail Cameraを 選択 ※Hieraarchyに MeshThumbnailCameraが必要 ✓ Build for Platform: 対応プラットフォーム 3. Build ＆ PublishでMeshポータルにデプロイ 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – デプロイ Platformに合わせてシーンを構成する https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/build-for-single-and-multiple-platforms?wt.mc_id=WDIT-MVP-5003104 ○ 1つのシーンをPC専用にビルドして発行 PCのパフォーマンスを活かした「高解像度」コンテンツを作成できる ○ 1つのシーンをAndroid専用にビルドして発行 Quest/Android上でのパフォーマンスを想定したバージョン。ＰＣよりも非 力なためＰＣよりも相対的に「低解像度」コンテンツになる ○ 1つのシーンをPCとAndroid用にビルドして発行 Quest/Android上でのパフォーマンスを想定したバージョンにする。ＰＣ上 は余裕があっても低スペックでの体験を優先 2024/8/21 © 2024 Takahiro Miyaura

• https://learn.microsoft.com/ja-jp/mesh/develop/build-your-basic-environment/build-for-single-and-multiple-platforms?wt.mc_id=WDIT-MVP-5003104

Microsoft Mesh Custom Immersive Spaceをゼロから作る – イベントの作成 Mesh Tookitメニューの Environmentから・・・ 1. Update Environmentを選択 2. Environment Configurationsを設定 ✓ リスト:先ほど作成したEnvironment ✓ シーン:先ほど作成したScene ✓ Thumbnail: Generate from Thumbnail Cameraを 選択 ※Hieraarchyに MeshThumbnailCameraが必要 ✓ Build for Platform: 対応プラットフォーム 3. Build ＆ PublishでMeshポータルにデプロイ 2024/8/21 © 2024 Takahiro Miyaura

Microsoft Mesh Custom Immersive Spaceをゼロから作る – Mesh Appから参加 Mesh Appを起動し・・・ 1. Azure ADアカウントでログイン 2. 主催者 or 参加者に入ってるイベントが表示 3. 該当するイベントに参加する 2024/8/21 © 2024 Takahiro Miyaura

以上！ 2024/8/21 © 2024 Takahiro Miyaura

1 Microsoft Meshについて 2 Custom Immersive Spaceをゼロから作る まとめ 3 プロジェクト作成～Mesh Toolkit設定 4 空間作成とアバター制約 5 Unity上で確認＆デプロイ

大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ