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

1.1K Views

August 21, 24

スライド概要

XRミーティング 2024/08/21【AR/CR/MR/SR/VR】(https://osaka-driven-dev.connpass.com/event/326182/)登壇資料。
Microsoft MeshのCustom Immersive Spaceの構築について。
UnityにMesh Toolkitを導入して簡単な平面と落下防止の柵を付けたシンプルな空間を作成し最終的にMesh Appで確認するまでを紹介。

profile-image

ICT業界でソフトウェアエンジニア/アプリケーションアーキテクトを担当。 社内ではXR関連技術に関する啓もう活動や技術支援に従事。 業務の傍ら、XR(特にMixed Reality領域)についての開発技術の調査、開発などを行っています。 また、「大阪駆動開発」コミュニティ所属しており、日々の調査で得た知見はコミュニティを通して情報発信を行っています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

宮浦 恭弘 (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 ※よかったらこれを機にお知り合いになってください

3.

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

4.

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

5.

先月以降の更新 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

6.

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

7.

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

8.

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

9.

Microsoft Mesh 2024/8/21 © 2024 Takahiro Miyaura

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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を複数作成しプログラムで制御する ことで建物の外⇔中への移動といった表現が可能に

26.

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を追加 好きな画角で空間に設置しておくとデプロイ時に撮影

27.

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

28.

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で使うアバターと 実際のアバターでは色々違うw Unity上のアバター 2024/8/21 Mesh上のアバター © 2024 Takahiro Miyaura

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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上でのパフォーマンスを想定したバージョン。PCよりも非 力なためPCよりも相対的に「低解像度」コンテンツになる ○ 1つのシーンをPCとAndroid用にビルドして発行 Quest/Android上でのパフォーマンスを想定したバージョンにする。PC上 は余裕があっても低スペックでの体験を優先 2024/8/21 © 2024 Takahiro Miyaura

36.

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

37.

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

38.

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

39.

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

40.

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