Mixed Reality Toolkit 3 のチュートリアル「Zappy’s Playground」のUXをみる

Mixed Reality Toolkit 3 のチュートリアル Zappy’s PlaygroundのUXをみる 2022/08 XRミーティング takabrz1 Takahiro Miyaura

Microsoft MVP for Windows Development 2018-2022 某会社でSE(アプリケーション領域のアーキテクト的なお仕事なはず）＝ XRは趣味です（貢献領域：Mixed Reality） 宮浦 恭弘 (Miyaura Takahiro) ◼ 大阪駆動開発(とHolomagicians)コミュニティに生息 ◼ HoloLens日本販売してからxR系技術に取組む ◼最近はMixed Reality Toolkit 3と戯れている。 ◼ 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura @takabrz1 ※よかったらこれを機にお知り合いになってください

• https://qiita.com/miyaura

本日の内容 ◼ Zappy’s PlaygroundのUXをみる ✓ ✓ 2022/08/17 Zappy’s Playgroundとは？ 今日はプレイエリアを構築するUX部分を紹介

Zappy’s Playgroundの紹介 2022/08/17

Zappy’s Playground Mixed Reality Toolkit 3 の機能を体験できるチュートリアル ◼ HoloLens 2 / Meta Quest 2で体験可 ドキュメントはこちら https://docs.microsoft.com/en-us/windows/mixedreality/develop/unity/playground-tutorial 2022/08/17

• https://docs.microsoft.com/en-us/windows/mixed-

Zappy’s Playgroundについて 詳細は前回のXRミーティングをどぞ アーカイブ公開されてます。 https://youtu.be/LCu5HWNHBBk https://www.slideshare.net/TakahiroMiyaura/mixed-reality-toolkit-3-zappys-playground 2022/08/17

• https://youtu.be/LCu5HWNHBBk
• https://www.slideshare.net/TakahiroMiyaura/mixed-reality-toolkit-3-zappys-playground

Zappy’s Playground 大きくは2つのフェーズに分かれる 今日はこちら プレイエリアの構築 ○ 空間スキャンとアンカー設置でプレイエリアを構築 コンテンツによる体験 ○ Zappy君を助けよう 2022/08/17

Zappy’s Playground こんなUXになっています。 ○ 最初の説明が出てくる ○ 空間のスキャンが始まる ○ 宝石をHead Gazeで追いかける ○ 空間アンカーを設置する ○ XRAnchorStoreでのアンカー管理 ○ Azure Spatial Anchorsでのアンカー管理 ○ ω・)b < 次なる体験へ 2022/08/17

Zappy’s Playground プレイエリア構築 かなり凝ったことをしています ○ 作りたい空間の条件 ○ 隙間のない床、壁、天井面（平面で） ○ テーブル台 現実は。。。 AR Foundationの Plane Detection（平面検出）を利用 ○ 実際の空間スキャンでは凹凸面がでる ○ 隙間なくきれいにできない ○ HoloLens ならScene Understandingできる ○ マルチプラットーフォームじゃない ・・・ 2022/08/17

Zappy’s Playground 空間を見渡させて空間を計測する ○ ARFoundation のPlane Detectionを利用 ○ Gaze移動のためにジェムを出す ○ ジェムに頭を向ける 2022/08/17

Zappy’s Playground 空間を見渡させて空間を計測する ○ ARFoundation のPlane Detectionを利用 ○ Gaze移動のためにジェムを出す ○ ジェムに頭を向ける ○ Rayをとばす ○ 当たったオブジェクト全部返す ○ Plane Detectionで壁が見つかればその面はRayと 紐づけ 2022/08/17

Zappy’s Playground 空間を見渡させて空間を計測する ○ ARFoundation のPlane Detectionを利用 ○ Gaze移動のためにジェムを出す ○ ジェムに頭を向ける ○ Rayをとばす ○ 当たったオブジェクト全部返す ○ Plane Detectionで壁が見つかればその面はRayと 紐づけ 2022/08/17

Zappy’s Playground 空間を見渡させて空間を計測する ○ ARFoundation のPlane Detectionを利用 ○ Gaze移動のためにジェムを出す ○ ジェムに頭を向ける ○ Rayをとばす ○ 当たったオブジェクト全部返す ○ Plane Detectionで壁が見つかればその面はRayと 紐づけ 自分を中心に周回して壁面を捜索 十分な情報量になったら次へ 2022/08/17

Zappy’s Playground 空間を見渡させて空間を計測する ○ ARFoundation のPlane Detectionを利用 ○ Gaze移動のためにジェムを出す ○ ジェムに頭を向ける ○ Rayをとばす ○ 当たったオブジェクト全部返す ○ Plane Detectionで壁が見つかればその面はRayと 紐づけ ○ 仮想のお部屋を構成する ○ 見つけた壁をつないで壁を形成 ○ 壁を隙間なくつないで床と天井を形成 ○ 机を形成 2022/08/17

Zappy’s Playground 空間を見渡させて空間を計測する ○ ARFoundation のPlane Detectionを利用 ○ Gaze移動のためにジェムを出す ○ ジェムに頭を向ける ○ Rayをとばす ○ 当たったオブジェクト全部返す ○ Plane Detectionで壁が見つかればその面はRayと 紐づけ ○ 仮想のお部屋を構成する ○ 見つけた壁をつないで壁を形成 ○ 壁を隙間なくつないで床と天井を形成 ○ 机を形成 ○ 空間アンカーを設置（再起動後の再現） 2022/08/17

Zappy’s Playground Azure Spatial Anchors 使う場合は設定変更が必要 ○プロジェクト設定でシンボル定義「ASA_ENABLED」を追加 Project Settings > Player > Player > Other Settings > Script Compilation > Scripting Define Symbol ○BootstrapScene内のAzureSpatialAnchors内に必要なパラメータを設定 2022/08/17

まとめ ◼ Zappy’s PlaygroundのUXをみる ✓ 体験はよくできてます。面白いですよ。 ✓ 空間スキャンなどを効率的にするためのUX表現がよくできている ✓ 空間の平面出しのテクニックとしてはかなり参考になる気がします。 ※コードを参考にする場合はARF Room Scannerです。 ◼ 別件：プレイ中のUIを日本語化したもの上げてます。 ✓ https://github.com/TakahiroMiyaura/ZappysPlayground/tree/add_locale_for_Japanese 2022/08/17

• https://github.com/TakahiroMiyaura/ZappysPlayground/tree/add_locale_for_Japanese

MRTK3に関する情報 ◼ Github - Mixed Reality Toolkit 3 ✓ https://github.com/microsoft/MixedRealityToolkit-Unity/tree/mrtk3 ◼ MTRK3ドキュメント ✓ https://aka.ms/mrtk3 ◼ MRTK3 Tutorial : "Zappy's Playground" ✓ https://aka.ms/ZappysPlayground ◼ Mixed Reality Dev Days 2022 ✓ 再生リスト:https://www.youtube.com/watch?v=U1BSqLbW-PM&list=PLlrxD0HtieHhkPlibqfQf1pGvM0vLNPpL 1. Introducing MRTK3 – Shaping the future of the MR Developer Experience.(https://youtu.be/fjQFkeF-ZOM) →過去のMRTKの取組みから振返り、MRTK3がどういったコンセプトで今回作られたのか 2. Getting started with your first MRTK3 project(https://youtu.be/aVnwIq4VUcY) →MRTK3動かしてみようぜ 3. MRTK3 Interaction building blocks(https://youtu.be/naVziEJ-yDg) →MRTK3の入力系についての設計や構造 4. Building Rich UI for MR in MRTK3(https://youtu.be/g2HF5HMy-2c) →MRTK3の素敵なUIをどう構築しているか 5. Working with Dynamic Data and Theming in MRTK3(https://youtu.be/IiTpZ2ojyno) →データバインディングとテーマ制御について 6. Deploy Everywhere with OpenXR and MRTK3(https://youtu.be/LI6lyW9TG9o) →MRTK3のOpenXR対応で色々デバイスで動く話 2022/08/17

• https://github.com/microsoft/MixedRealityToolkit-Unity/tree/mrtk3
• https://aka.ms/mrtk3
• https://aka.ms/ZappysPlayground

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