WebXRアプリ展示レポート #2
はじめに
先日開催された LODGE XR Talk Vol.34 に、個人開発したWebXRアプリを出展してきました。
この記事では実装において工夫した点をまとめます。
アプリ概要
テーマ: AR Boombox
私がこれまで作曲した曲を生きているラジカセと戯れながら聴くARアプリ。
主な技術と役割は以下の通りです。
- WebXR: ARセッション開始/終了処理
- React Three Fiber: 3Dグラフィックスやレンダリング処理
- GLSL: ラジカセの色調変化やアニメーション
- Vite: ビルドツール
↓アプリURLはこちら
工夫した点
パフォーマンス
曲ファイルをwavからm4aにしたり、ローディング画面を作ることで予め曲やモデルを読み込めるようにしたり、ループ処理内を負荷がかからないようにしたり、パフォーマンス面への影響は重視しながら実装しました。
また、重くなりがちなアニメーションもシェーダーで制御し、ラジカセが曲のBPMに合わせて踊ったり、もちもち動くようにしました。
iOSでの挙動
現在WebXRはiPhoneでは動かないため、代替案を探す必要がありました。
Quick Lookやmodel-viewer、MindARを試してみましたが、モデルにアニメーションを埋め込まないといけなかったり、技術的な限界が私が求めてるユーザー体験とは異なりました。
そこで採用したのが**Variant Launch**です。
safariからapp clipを起動し、そこでWebXRを動かせるサービスなのですが、app clipではARセッション時にクリックなどの標準イベントが発火しなかったため、iOS用の処理を独自に作りました。
クリック処理はThree.Raycasterを使用してタッチ位置からレイを飛ばし、オブジェクトとの交差判定を作ることで解決できました。
他にもExit ARボタンが押せない問題や曲名が変わらない問題など、iOSでのみ起きる不具合の対処に苦労しました…。
スマホ新法により、iOSでWebkit以外のブラウザエンジンが使用できるようになりました。
iPhoneでWebXRが動く日は近い、のか…！(頑張れGoogle)
運用しやすさ
m4aファイルを配置し、曲リストオブジェクトに以下の値を追加するだけでラジカセに新しい曲が入るようにしました。
{
name: "credit roll",
path: "/credit-roll.m4a",
bpm: 110,
animation: SWAY
}
まとめ
自己満足ですが、自分のやりたいこと/やってきたことを詰め込めたお気に入りのアプリになりました。
また、展示では子供から海外の方まで幅広い方が体験してくれました。
曲やラジカセを｢かわいい！｣と褒めてくれたり、降ってくる音符を雪のように手で受け止めようとしてくれたり、バタバタする年末に少しでもほっこりしていただけているように見えて純粋に嬉しかったです。
来年も作って作って作って作って作って参ります＼(^o^)／
ここまで読んでいただきありがとうございました。
良いお年をお迎えください。
Discussion