2024/9/24 @limes2018 Microsoft MVP for Mixed Reality & Developer Technologies Apple Vision Proと WebXRで試したこと

2 はじめに 6/26のvision OS Engineer Meetup vol.6では、Godot Engine を活用したvision osのアプリ開発方法について説明させていただきました。 Godot Engineを使った vision OSアプリ開発について - Speaker Deck 今回は、さらに別の手段であるWebXRを使った方法を紹介します。

XR関係で色々と活動。Babylon.js, Godot, Unity など。 Babylon.js勉強会の共同主催者 Babylon.jsの海外フォーラムで日本の宣伝役 2児の父で休日は公園や図書館に行くことが多い Blog : Cross Road https://www.crossroad-tech.com/ X: @limes2018 3 自己紹介 技術同人誌のイベント「技術書典」にて、 これまで4冊の本を共同で執筆＆頒布

[1] WebXR(Babylon.js)を使って基本的機能が使えることを確認 （3Dモデル表示、移動、つかむなど） [2] Webサイトを工夫して、他の人が外から変更したらApple Vision Proの環境に反映される ようにしてみた 4 やってみたこと

5 [1] WEBXRを使った基本機能

6 [1] WEBXRについて https://immersiveweb.dev/

7 [1] WEBXRについて https://immersiveweb.dev/ AR/VRヘッドセット、 スマートフォン、 タブレット、 PCでXRコンテンツ を表示可能。

8 [1] WEBXRに対応したBABYLONSについて ゲーム/レンダリングエンジン向け、JavaScriptベースのフレームワーク 2013年より開発開始。WebXRにも準拠 https://github.com/BabylonJS/Babylon.js https://doc.babylonjs.com/features/featuresDeepDive/web XR/introToWebXR

9 [1] BABYLONJSとAPPLE VISION PRO Apple Vision Pro自体がWebXRに対応しているため、１行追加でVRモー ドを利用可能。 ただし、そのままでは3Dモデルを掴む、テレポート移動する機能が なかったので開発。 (次ページでYouTube動画を表示)

10 https://www.youtube.com/watch?v=VuLFv9ofVuY

11 [2] 共同編集のプロトタイプ

12 [2] 共同編集のプロトタイプ Webを利用して、Macの画面を出しながらVision Proの表示内容を 変更して、開発結果をすぐに確認できる仕組みを考えた。

13 [2] 共同編集プロトの構成 Webを利用して、Macの画面を出しながらVision Proの表示内容を 変更して、開発結果をすぐに確認できる仕組みを考えた。 サーバ Node.js runtime Express Websocket クライアント端末１ (Apple Vision Pro) ページ要求 サイト表示 クライアント端末２ (Mac/iPhoneなど) Websocket 3Dmodel, js , html Socket.io [(1)3Dモデルを表示、 仮想空間を移動 (2)3Dモデルの表示や色変 更を操作 (3) 変更指示がsocket.ioに 届く (4)クライアント端末2の 指示によって3Dモデルを 変更

14 https://www.youtube.com/watch?v=ln_Mk72_JHM

15 こんな感じで、Apple Vision Proを被って開発して (Mac) 、それを 同時に見られる、ということもできるかも・

16 今後の予定 ネットワークと連携するとさらにできることが広がるので、 Azureなどのクラウドで使用するとか、色々試してみようと 思います。 （最近あまり触れていないGodot Engineについても引き続き やっていきます！）