Apple Vision ProとWebXRで試したこと

こちらのイベントの登壇資料です。

https://visionos-engineer.connpass.com/event/331326/

発表中に紹介したYouTube動画はこちらです。

◾️Apple Vision Proでオブジェクトを掴む機能の実装例
https://www.youtube.com/watch?v=VuLFv9ofVuY

◾️Apple Vision Proの表示内容を別の端末から制御する例
https://www.youtube.com/watch?v=ln_Mk72_JHM

Transcript

1. 2024/9/24 @limes2018 Microsoft MVP for Mixed Reality & Developer Technologies Apple Vision Proと WebXRで試したこと
2. 2 はじめに 6/26のvision OS Engineer Meetup vol.6では、Godot Engine を活用したvision osのアプリ開発方法について説明させていただきました。 Godot Engineを使った vision OSアプリ開発について - Speaker Deck 今回は、さらに別の手段であるWebXRを使った方法を紹介します。
3. XR関係で色々と活動。Babylon.js, Godot, Unity など。 Babylon.js勉強会の共同主催者 Babylon.jsの海外フォーラムで日本の宣伝役 2児の父で休日は公園や図書館に行くことが多い Blog : Cross Road https://www.crossroad-tech.com/ X: @limes2018 3 自己紹介 技術同人誌のイベント「技術書典」にて、 これまで4冊の本を共同で執筆＆頒布
4. [1] WebXR(Babylon.js)を使って基本的機能が使えることを確認 （3Dモデル表示、移動、つかむなど） [2] Webサイトを工夫して、他の人が外から変更したらApple Vision Proの環境に反映される ようにしてみた 4 やってみたこと
5. 5 [1] WEBXRを使った基本機能
6. 6 [1] WEBXRについて https://immersiveweb.dev/
7. 7 [1] WEBXRについて https://immersiveweb.dev/ AR/VRヘッドセット、 スマートフォン、 タブレット、 PCでXRコンテンツ を表示可能。
8. 8 [1] WEBXRに対応したBABYLONSについて ゲーム/レンダリングエンジン向け、JavaScriptベースのフレームワーク 2013年より開発開始。WebXRにも準拠 https://github.com/BabylonJS/Babylon.js https://doc.babylonjs.com/features/featuresDeepDive/web XR/introToWebXR
9. 9 [1] BABYLONJSとAPPLE VISION PRO Apple Vision Pro自体がWebXRに対応しているため、１行追加でVRモー ドを利用可能。 ただし、そのままでは3Dモデルを掴む、テレポート移動する機能が なかったので開発。 (次ページでYouTube動画を表示)
10. 10 https://www.youtube.com/watch?v=VuLFv9ofVuY
11. 11 [2] 共同編集のプロトタイプ
12. 12 [2] 共同編集のプロトタイプ Webを利用して、Macの画面を出しながらVision Proの表示内容を 変更して、開発結果をすぐに確認できる仕組みを考えた。
13. 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. 14 https://www.youtube.com/watch?v=ln_Mk72_JHM
15. 15 こんな感じで、Apple Vision Proを被って開発して (Mac) 、それを 同時に見られる、ということもできるかも・
16. 16 今後の予定 ネットワークと連携するとさらにできることが広がるので、 Azureなどのクラウドで使用するとか、色々試してみようと 思います。 （最近あまり触れていないGodot Engineについても引き続き やっていきます！）