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

473 Views

June 19, 24

スライド概要

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

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

キーノートでちらっとMixed Reality AIが多いとは思っていたので油断していたら・・・ 2024/6/19 Copyright © 2024 Takahiro Miyaura 3

4.

久しぶりの公式カンファレンスでの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

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 5

6.

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

7.

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

8.

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

9.

ということで、 2024/6/19 Copyright © 2024 Takahiro Miyaura 9

10.

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

11.

チュートリアルMesh201 何ができる? 大きくは3つくらいの機能の実装と確認 2024/6/19 Copyright © 2024 Takahiro Miyaura 11

12.

Microsoft Mesh201ついて紹介 何ができる? 3Dモデルを操作することで情報を表示する Webサイト表示 ○ 空間内でURLからサイト表示 ○ 地球儀上で選択した緯度/経度を用い て、地域周辺のBing Mapを表示 2024/6/19 Copyright © 2024 Takahiro Miyaura 12

13.

Microsoft Mesh201ついて紹介 何ができる? 3Dモデルを操作することで情報を表示する 3Dモデル上で情報表示 ○ Cloud Scriptingのサンプル ○ 外部サービスから都市の天気取得 ○ 地球儀に描画 2024/6/19 Copyright © 2024 Takahiro Miyaura 13

14.

Microsoft Mesh201ついて紹介 何ができる? 3Dモデルを操作することで情報を表示する AI Assistant ○ Cloud Scriptingのサンプル ○ Meshの入力ダイアログを利用 ○ Azure OpenAI Serviceを利用し、 チャットベースのチュートリアルの 解説 2024/6/19 Copyright © 2024 Takahiro Miyaura 14

15.

チュートリアルMesh201 うごかしてみると 2024/6/19 Copyright © 2024 Takahiro Miyaura 15

16.

Microsoft Mesh201ついて紹介 こういう感じです。 2024/6/19 Copyright © 2024 Takahiro Miyaura 16

17.

実装の解説 2024/6/19 Copyright © 2024 Takahiro Miyaura 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.

Microsoft Meshの実装方法 解説②:Azure OpenAI Service周りの使い方 デプロイすればとっても簡単に利用できる デプロイはOpenAI Studio, 接続に必要な情報はOpenAI Servicesのサービスから アプリで必要な情報 アプリで必要な情報 2024/6/19 Copyright © 2024 Takahiro Miyaura 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.

解説記事はこちら Qiita記事にしました https://qiita.com/miyaura/items/029cddff4deeeaccd620 Microsoft Meshの チュートリアルMesh201で Open AI Serviceを試してみる 2024/6/19 Copyright © 2024 Takahiro Miyaura 27

28.

今日のまとめ ○ Microsoft Mesh201ついて紹介 ○ なにができる? ✓ Mesh空間内にWebサイトを表示 ✓ 地球儀(その①)をクリックすると周辺のマップが表示 ✓ 地球儀(その②)をクリックすると3都市の現在の天気がプロットされる ✓ 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.

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