Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話

XRミーティング 2024-04-17 「Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話」の登壇資料です。

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

・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-04-17 Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 10 分くらいで話します！
4. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
5. 桜ってキレイですよねー 自分の xR 視点としても「借景（構成に背景景観を取り入れること）」って好きです
6. こんなアプリを作りました https://twitter.com/1ft_seabass/status/1775018958401466510
7. IBM Cloud Code Engine コンテナ+サーバレスな仕組み Babylon.js Vite ビルド済みソース ES6+TypeScript 仕組みざっくり GitHub Codespace で Babylon.js WebXR コンテンツをブラウザで開発して IBM Cloud Code Engine（コンテナ+サーバレスな仕組み）でビルド済みソースを置いて VR で表示 WebXR 閲覧 (HTTPS) ブラウザ で開発 Meta Quest 3
8. ひとまずライブデモ 家の中ですが桜の花びらが舞います
9. がんばったところ 試行錯誤したところ
10. パーティクルは素直に出せた 事前生成したり、広い範囲にしたり、透過ブレンドされるのが今回は悩ましい めちゃくちゃ広く 桜を降らす
11. スマホでも見れていい感じ とはいえ PC・スマホ・VR との 3 パターンで花びらの大きさを合わせるのが簡単ではないのはある https://twitter.com/1ft_seabass/status/1774301530466013454
12. VR デバイスロケちょっと胆力がいる でも、うまくいくと楽しい～。
13. 野外で明るすぎたり凸凹だと 空間認識がうまくいかなくなりやすい Meta Quest 3 はカメラによる空間認識ですし日光とか地形とか影響しそうなのはある
14. 桜。コンテンツ提供目線の悩ましさはある～ 「桜が咲いていて」「散りはじめていて」「花びらを盛る」という時期が限られやすいことに気づいた。 桜の生態の学びがある。こういう借景した xR コンテンツはきれいなので、いつか公開もやってみたい。
15. エクストラ 時間があれば ➔ データ連携しないからいいけどフロントエンドでソースか ら情報丸見えになるので、セキュアな仕組みが必要ならロ グインなど対策が必要 ➔ 今回のようにサーバレスの仕組みはサッと提供できるのは 素敵。けれどコールドスタートで待たせてしまうところは あるので適材適所で。
16. ➔ GitHub Codespace で Babylon.js WebXR をブラウザで開 発して IBM Cloud Code Engine（コンテナ+サーバレスな 仕組み）でビルド済みソースを置いて VR で表示できた ➔ 桜はパーティクルで素直に降らす感じで実装できて PC ・ スマホ・VR で表示調整はがんばるところ ➔ xR 的に外でのデバイスロケは現場解決力と胆力は必要だ けど、うまくいくととてもたのしい！ ➔ Web でサッとコンテンツを出せる仕組みは、もちろん注 意点もあるけどとてもたのしい！ まとめ