Microsoft Build 2024に合わせて(?)Microsoft MeshのチュートリアルMesh201がパワーアップ

763 Views

June 19, 24

#xrmtg #unity #azure #openai #microsoft mesh #Microsoft Mesh #Microsoft Build 2024 #Mixed Reality #Cloud Scripting #Azure OpenAI Service

スライド概要

【大阪】XRミーティング 2024/06/19(https://osaka-driven-dev.connpass.com/event/319959/)登壇資料。
先日Microsoft MeshのチュートリアルMesh201の内容がアップデートされ、Cloud ScriptingでAzure OpenAI Serviceを利用した内容に変更されていました。今回はその内容を踏まえてCloud Scriptingでの実装方法などを紹介しました。

Miyaura

@m-taka596

スライド一覧

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

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 1.52MB)

関連スライド

OpenVRやOpenXRの基本的なことを調べてみた

xrmtg openxr openvr hololens

Miyaura 23.1K

冬休みの宿題 - Lenovo Think Reality A3で検証(MRTK3含)

xrmtg mrtk3 mixed reality snapdragon spaces thinki reality a3

Miyaura 12.1K

MRTK3をLenovoのThink Reality A3上で動かす - Snapdragon Spaces SDKの紹介

hololens ホロマジ snapdragonspaces mrtk3 xr unity

Miyaura 10.2K

今更ですがちょっとMetaQuest3でMRTK3触ってみました

mixed reality xrmtg mrtk3 unity

Miyaura 9.5K

Mixed Reality Toolkit 3で始めるクロスプラットフォーム開発

xr mrtk3 metaquest3 snapdragonspaces xrkaigi

Miyaura 8.1K

Snapdragon Spaces v0.12.0 for Unityの調査(あれも試してみてる)

xrmtg mrtk3 mixed reality snapdragon spaces think reality a3

Miyaura 7.7K

各ページのテキスト

Microsoft Build 2024に合わせて(?) Microsoft MeshのチュートリアルMesh201がパワーアップ 2024/06 XRミーティング @takabrz1 Takahiro Miyaura

Microsoft Build 2024 見ましたか？現地まで行きましたか？ @takabrz1 Takahiro Miyaura

久しぶりの公式カンファレンスでのMixed Realityネタ Microsoft Build キーノートで Windows Volumetric Apps on Meta Quest キーノートで語られている内容を整理すると・・・ ○Windows 365関連の機能 ○3D空間に拡張できるWindowsアプリをVolumetric Appsと呼んでいる ○クラウドからWindowsを提供することで、様々なデバイスで活用可能に ➙Meta社と提携しW365に関する機能をQuestに提供することで実現 2024/6/19 Copyright © 2024 Takahiro Miyaura 4

Microsoft Build 2024 XR関連セッション ○ Imagine a new era of digitalization in manufacturing with NVIDIA https://build.microsoft.com/en-US/sessions/a005abb1-3feb-4e7b-8bea-5a05c32f40dd 内容はAzure上に構築できるNVIDIA Omniverse Cloudの話。これを活用したデジタルツインツールやアプリケーションの構築について。 ○ Meta & Microsoft: The future of Windows productivity and mixed reality https://build.microsoft.com/en-US/sessions/267df5b8-5a0b-4cbf-ae73-52af2bd53e4c 主な内容はMeta、MicrosoftのMixed Realityに関する方向性や取組みについて。OfficeやMicrosoft Mesh、Windows Volumetric Appsの話のなかでMeta Questをエンタープライズ用途で活用するためのMeta Quest for Businessの話とRay-Ban Metaスマートグラスの話。 ○ Creating Immersive 3D Solutions with Microsoft Mesh https://build.microsoft.com/en-US/sessions/9b93c707-4cfa-46f2-b676-05ababd7e978 内容はMeshの概要、開発ライブラリとしてのMesh Toolkitの話、カスタムワールドのサンプルについて。サンプルはMesh 201という以前からあったものでWebSlateと地球の3Dモデル使った情報表示を行う空間デモだが、Azure OpenAI Serviceを組込んでMesh内でAIによるアシストを実現するものに改修されている 2024/6/19 Copyright © 2024 Takahiro Miyaura 5

Microsoft Build 2024 XR関連セッション ○ Imagine a new era of digitalization in manufacturing with NVIDIA https://build.microsoft.com/en-US/sessions/a005abb1-3feb-4e7b-8bea-5a05c32f40dd 内容はAzure上に構築できるNVIDIA Omniverse Cloudの話。これを活用したデジタルツインツールやアプリケーションの構築について。 ○ Meta & Microsoft: The future of Windows productivity and mixed reality https://build.microsoft.com/en-US/sessions/267df5b8-5a0b-4cbf-ae73-52af2bd53e4c 主な内容はMeta、MicrosoftのMixed Realityに関する方向性や取組みについて。OfficeやMicrosoft Mesh、Windows Volumetric Appsの話のなかでMeta Questをエンタープライズ用途で活用するためのMeta Quest for Businessの話とRay-Ban Metaスマートグラスの話。 ○ Creating Immersive 3D Solutions with Microsoft Mesh 今日はコレ！ https://build.microsoft.com/en-US/sessions/9b93c707-4cfa-46f2-b676-05ababd7e978 内容はMeshの概要、開発ライブラリとしてのMesh Toolkitの話、カスタムワールドのサンプルについて。サンプルはMesh 201という以前からあったものでWebSlateと地球の3Dモデル使った情報表示を行う空間デモだが、Azure OpenAI Serviceを組込んでMesh内でAIによるアシストを実現するものに改修されている 2024/6/19 Copyright © 2024 Takahiro Miyaura 6

Microsoft Meshとは Microsoft Learnコンテンツで公開 https://learn.microsoft.com/ja-jp/mesh/overview?wt.mc_id=WDIT-MVP-5003104 We are re-imagining the way employees come together with Microsoft Mesh, a new three-dimensional (3D) immersive experience. Microsoft Mesh is not merely another innovation, but a solution that enables your distributed workforce to connect like never before in a 3D immersive space, helping virtual meetings and events feel more like face-to-face connections. サイトからの引用機械翻訳私たちは、新しい3D没入型体験であるMicrosoft Meshによって、社員が集う方法を再構築します。Microsoft Meshは、単なるイノベーションではなく、分散した従業員が3D没入型スペースでかつてないほどつながることを可能にするソリューションです。 2024/6/19 Copyright © 2024 Takahiro Miyaura 7

https://learn.microsoft.com/ja-jp/mesh/overview?wt.mc_id=WDIT-MVP-5003104

Microsoft Meshとは PCやMeta Quest 利用可能コンセプトを実現するために提供される3D空間の活用手段 ○Immersive Spacesの活用（Teams） ○Teams会議の中で3D没入空間での会議体験を可能にする ○カスタマイズ(Microsoft Mesh) ○既存環境のカスタマイズ https://learn.microsoft.com/en-us/mesh/overview#customize-a-ready-to-use-environment?wt.mc_id=WDIT-MVP-5003104 ○既にある空間に装飾（動画、画像を配置）することで環境を整える ○カスタム環境の開発 https://learn.microsoft.com/en-us/mesh/overview#develop-a-custom-environment?wt.mc_id=WDIT-MVP-5003104 ○3D空間すべてをカスタム環境として開発する参考 Meshでは3D空間そのものを環境(Environment)と定義 2024/6/19 Copyright © 2024 Takahiro Miyaura 8

10.

今日のポイント的な ○ Microsoft Mesh201ついて紹介 ✓ なにができる？ ✓ サンプルを動かしてみた ○ 実装の解説 ✓ Microsoft Meshの実装方法 ✓ 解説①：Cloud ScriptingでUnityオブジェクトへのアクセス ✓ 解説②：Azure OpenAI Service周りの使い方 ○ OMAKE ✓ Microsoft Meshのその他のサンプル 2024/6/19 Copyright © 2024 Takahiro Miyaura 10

11.

12.

13.

14.

15.

16.

17.

18.

実装の解説 Microsoft Meshの実装方法 Meshのカスタム環境を作るための実装方法は大きく2つ Visual Scripting ○ ノードをつないで実装 ○ Mesh Toolkitで部品が提供 ○ 他の参加者と状態の共有/非共有が設定可 2024/6/19 Cloud Scripting ○ C#(.NET 6)で開発できる ○ Azure上でMeshポータルとは別管理 ○ 他のサービスとも連携が可能 ○ オブジェクトや状態は自動的に共有 Copyright © 2024 Takahiro Miyaura 18

19.

Microsoft Meshの実装方法解説①：Cloud ScriptingでUnityオブジェクトへのアクセス空間内のオブジェクト(Unityオブジェクト)のアクセスは特殊 Cloud ScriptingはWebAPIとして動作 ○ Monobehaviour等Unityオブジェクトは使えない ○ Mesh Cloud Scriptingの機能を利用 ○ Unity Sceneと同じ構造もつNodeによるアクセス ○ コンポーネントに対応するNodeクラスを使用 2024/6/19 Copyright © 2024 Takahiro Miyaura 19

20.

Microsoft Meshの実装方法解説①：Cloud ScriptingでUnityオブジェクトへのアクセスルートはMesh Cloud Scriptingコンポーネントを設定したオブジェクト ○ Cloud Scripting上の階層（抜粋） Mesh Cloud Scripting ルート 4 – GlobeWithCloudScripting Transform Node Earth Transform Node Interactable Interactable Node WeatherMarkers Transform Node 2024/6/19 Copyright © 2024 Takahiro Miyaura 20

21.

Microsoft Meshの実装方法解説①：Cloud ScriptingでUnityオブジェクトへのアクセス対応するUnityコンポーネントで取得可能なNodeが決まる Mesh Cloud Scripting ルート 4 – GlobeWithCloudScripting Transform Node Earth Transform Node Interactable Transform Nodeも取得可能 Interactable Node WeatherMarkers Transform Node 対応するNodeクラスがない場合 Cloud Scripting側からはアクセスできない（その場合でも階層関係は維持される） 2024/6/19 Copyright © 2024 Takahiro Miyaura 21

22.

[beta]

Microsoft Meshの実装方法

解説①：Cloud ScriptingでUnityオブジェクトへのアクセス

Appクラスのコンストラクタから取得する
Mesh201のAppクラスの実装を抜粋

public App(ICloudApplication app, IConfiguration configuration, ILogger<App> logger)
{
Appクラスのコンストラクタの引数
_app = app;
Appオブジェクトを利用
_logger = logger;
_weatherAPIBaseUrl = configuration.GetValue<string>("WEATHER_API_URI");
_weatherAPIKey = configuration.GetValue<string>("WEATHER_API_KEY");
Uri azureOpenAIResourceUri = new(configuration.GetValue<string>("AZURE_OPENAI_API_URI"));
AzureKeyCredential azureOpenAIApiKey =
new(configuration.GetValue<string>("AZURE_OPENAI_API_KEY"));
_openAIClient = new(azureOpenAIResourceUri, azureOpenAIApiKey);
}

2024/6/19

Copyright © 2024 Takahiro Miyaura

22

23.

[beta]

Microsoft Meshの実装方法

解説①：Cloud ScriptingでUnityオブジェクトへのアクセス

Earthオブジェクトのクリック時に天気情報を取得する実装
public Task StartAsync(CancellationToken token)
app.SceneからEarthオブジェクトに対
応するTransformNodeを取得
{
// When a user selects the globe, refresh the current weather
var refreshButton = _app.Scene.FindFirstChild("Earth", true) as TransformNode
?? throw new NullReferenceException("Could not find Earth");
var refreshButtonNode = refreshButton.FindFirstChild<InteractableNode>(true);
if (refreshButtonNode != null)
{
refreshButtonNode.Selected += async (_, _) =>
{
await GetCurrentWeather(_latlong);
};
}

Earthオブジェクト配下のコンポーネ
ントからInteractableNodeを取得

天気情報を取得する処理を
クリックイベントに登録

・・・
2024/6/19

Copyright © 2024 Takahiro Miyaura

23

24.

25.

[beta]

Microsoft Meshの実装方法
解説②：Azure OpenAI Service周りの使い方

デプロイすればとっても簡単に利用できる
Uri azureOpenAIResourceUri = new("Azure OpenAI ServiceのURI");
AzureKeyCredential azureOpenAIApiKey = new("Azure OpenAI ServiceのAPI KEY");
OpenAIClient _openAIClient = new(azureOpenAIResourceUri, azureOpenAIApiKey);
var chatCompletionsOptions = new ChatCompletionsOptions() {
DeploymentName = "gpt-35-turbo" // OpenAI ServiceでデプロイしたLLM
Messages = {
new ChatRequestSystemMessage("プロンプト"),
new ChatRequestUserMessage("入力文"),
}
};
// OpenAI Serviceに問合せ
var aiResponse = await _openAIClient.GetChatCompletionsAsync(chatCompletionsOptions);
// 結果の最初のデータを取得
var responseMessage = aiResponse.Value.Choices[0].Message;
2024/6/19

Copyright © 2024 Takahiro Miyaura

25

26.

Microsoft Meshの実装方法解説②：Azure OpenAI Service周りの使い方 Mesh201で使われているプロンプト You are a helpful assistant. You're part of a developer sample for the Mesh Toolkit. Use brief answers, less than 1 paragraph. You can suggest a good location for a wind farm based on current and historical weather data. We're looking at globe with the current weather data displayed for each of these locations: Lagos Nigeria, Redmond WA USA, Dublin Ireland Current weather conditions for these locations: "取得した情報" あなたは役に立つアシスタントです。あなたはメッシュツールキットの開発者サンプルの一員です。段落以内で簡潔に答えてください。あなたは現在と過去の気象データに基づいて、風力発電所に適した場所を提案することができます。それぞれの場所の現在の気象データが表示された地球を見ています：ラゴス（ナイジェリア）、レッドモンド（アメリカ）、ダブリン（アイルランド）これらの場所の現在の気象状況： "取得した情報" 2024/6/19 Copyright © 2024 Takahiro Miyaura 26

27.

https://qiita.com/miyaura/items/029cddff4deeeaccd620

28.

今日のまとめ ○ Microsoft Mesh201ついて紹介 ○ なにができる？ ✓ Mesh空間内にWebサイトを表示 ✓ 地球儀（その①）をクリックすると周辺のマップが表示 ✓ 地球儀（その②）をクリックすると３都市の現在の天気がプロットされる ✓ Azure OpenAI Service経由でMesh201について相談に乗ってもらえる ○ サンプルを動かしてみた ○ 実装の解説 ○ Microsoft Meshの実装方法 ○ 解説①：Cloud ScriptingでUnityオブジェクトへのアクセス ✓ Appクラスのコンストラクタ引数：appオブジェクトを利用 ○ 解説②：Azure OpenAI Service周りの使い方 ✓ サービスさえ登録すれば手軽に使えるすごい。 ○ OMAKE ○ Microsoft Meshのその他のサンプル ✓ 色々あるよ 2024/6/19 Copyright © 2024 Takahiro Miyaura 28

29.