XRミーティング 2024-03-20

XRミーティング 2024-03-20 「Babylon.js で Meta Quest 3 で動く ES6 + Vite + TypeScript 開発構成がうまくつくれた話」の登壇資料です。

◆スライド内の素材は以下を使用させていただいております。ありがとうございます！

・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp
・Adobe Express https://www.adobe.com/jp/express/

Transcript

1. XRミーティング 2024-03-20 Babylon.js で Meta Quest 3 で動く ES6 + Vite + TypeScript 開発構成がうまくつくれた話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 10 分くらいで話します！
4. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
5. こちらのお話 https://twitter.com/1ft_seabass/status/1770266025785004415
6. Vite をベースに ES6 + TypeScript でつくれる 公式ドキュメントをみつけた 自分の Web フロントエンドスキルがうまくコラボできそうで素敵な話！ https://doc.babylonjs.com/features/featuresDeepDive/webXR/webXRDemos#webxr-with-vite
7. GitHub GitHub Codespace Babylon.js開発 ES6+TypeScript 仕組みざっくり GitHub Codespace で Babylon.js が ブラウザから ES6 + TypeScript 開発して Vite サーバーから WebXR 閲覧できる Vite サーバー WebXR 閲覧 (HTTPS) ブラウザ で開発 Meta Quest 3
8. ひとまず開発環境からデモ GitHub Codespace で Vite から HTTPS サーバー起動して Meta Quest で表示
9. いろいろ試行錯誤したこと
10. 画面いっぱいにする対応 HTML からシンプルに
11. sceneHelpers の追加だいじ Scene クラスの XR 呼び出しが追加されたり、XR 利用可能時の右下のアイコンが出たり
12. ローカル起動の開発方法もあるが今回は触れず 正直、素直にはうまくいかず。そもそもローカルで HTTPS 起動は技術的に大変だし なにかと公開で動いたほうがいいので GitHub Codespace のサーバー起動に頼った。シンプル。 https://doc.babylonjs.com/features/featuresDeepDive/webXR/webXRDemos#webxr-with-vite
13. エクストラ もし時間があれば追加デモとか雑感とか いろいろ学びがあったのでアウトプットもしていきたい！
14. ➔ Babylon.js で Meta Quest 3 で動く ES6 + Vite + TypeScript 開発構成がうまくつくれた ➔ 公式にドキュメントあるのありがたい、ちょっとハマった けど少々の修正でできた ➔ WebXR 技術 Meta Quest 3 だとビデオパススルーまでで きてすごい！ ➔ GitHub Codespace で HTTPS つきサーバーを Vite から 起動できるので検証もやりやすい ➔ WebXR だと手軽にコンテンツが提供できる構成が見えて きたのでこれからも試していきたい！ まとめ