WebXRアプリ展示レポート #1
はじめに
先日開催された LODGE XR Talk Vol.30 に、個人開発したWebXRアプリを出展してきました。
この記事ではアプリや展示で工夫した点と得られた発見をまとめます。
アプリ概要
テーマ: WebXR×Music
WebXRのハンドトラッキングを活用し、手の位置やジェスチャーに応じて様々な音が鳴る楽器アプリ。
技術スタックと役割は以下の通りです。
- WebXR: 今回は主にハンドトラッキング機能
- Three.js: 3Dグラフィックスやレンダリング処理
- GLSL: パーティクルなどのシェーダー処理
- Tone.js: 音声処理
- Vite: ビルドツール
↓アプリURLはこちら
工夫した点
1. 開発
1-1. タスク管理
まず、実装したい機能を全てNotionにまとめ、進捗管理とどこまで実現可能かを可視化しました。
1-2. ハンドジェスチャーの認識方法
次に、基盤となるハンドジェスチャーの認識方法ですが、公開しているリポジトリのwebxr-hands-starterの流用から始めました。
今回はアプリ起動時にプレイヤーに両手を「パー」の形にしてもらい、その形を基準とするようにしました。各指の基準位置から手首までの距離を測り、一定の範囲に収まっていればハンドジェスチャーとして認識します。この仕組みによって、体験者ごとの手の大きさや形の違いによる認識のばらつきを減らせるようにしました。
1-3. 対応するハンドジェスチャー
単音とAからGまでのメジャーコードを実装できれば最低限楽器アプリになると思い対応するハンドジェスチャーを考えました。
最初は国際手話のアルファベットのAからGを認識したら対応するメジャーコードが鳴るようにしていました。
ただ、手話はろう者にとって生きるための大切な言語であり、本来の用途とは違う形で利用すると不快に感じる人がいるかもしれないと考えました。
そのため最終的には、2進数の「数え指」を応用する方法に切り替えました。
無理やりですが10から15を16進数のAからFに、そしてGは16の指で表すことにしました。
1-4. 体験ボリューム
手首をひねってオクターブを変えたり、X軸の揺れでビブラート、Z軸の動きで音量調整など、盛り込みたい機能は他にも実装して試しましたが、多機能にするほど操作説明が必要になり、直感的な楽しさが損なわれると感じました。
展示では「短い時間で自由に体験できること」が大事だと考え、シンプルな機能に留めることを意識しました。
2. 展示
2-1. 待ち時間
展示では1人あたりにしっかり時間をかけて体験してもらう分、どうしても待ち時間がネックになります。
そこで今回はWebXRならではの強みを活かし展示スペースにQRコードを設置しました。
スマホで読み込むとアプリの説明ページへ、WebXR対応のHMDで読み込むとそのまま体験アプリにアクセスできるようにし、待っている人も暇にならず、同時にWebXRの手軽さと柔軟さを感じてもらえるようにしました。
さらに、展示用のモニターには体験者の視点をミラーリングすることで、周囲からも直感的にどんなアプリなのかがわかるようにしました。
（結果的に待ち列はできませんでした／(^o^)＼）
2-2. 体験サイクル
WebXRアプリの一連の体験（ブラウザ上からVR/ARモードに入り、アプリを終了するまで）をスムーズに体験してもらうために、webxr-react-debugを応用してハンドジェスチャーに追従するメニューと、その中に「体験を終了する」ボタンを実装しました。
これにより、ハンドジェスチャーの説明だけでアプリの終了まで体験でき、次の体験サイクルへの移行もスムーズにできました。
展示してみて
どっと疲れました！笑
今回はWebXR×Musicというテーマのアプリでしたが、音楽に詳しくない方や、HMD・XRに不慣れな方、逆に経験豊富な方など、様々な方に体験していただきました。
体験者がどう感じるかを意識してアイデアをまとめたのですが、体験者も十人十色で、アプリデザインの奥深さを改めて感じました。
WebXRの存在を知った昨年末からLodge XR Talkに通うようになり、「自分が展示するならどうするか」を考えながらいつも体験する側だったので、今回は実際に展示する立場として色々試せてとても良い経験になりました。
まとめ
今回の展示は、WebXRの可能性を試すと同時に、体験を人に届ける難しさと面白さを知る貴重な機会になりました。
懲りずに次のアプリを作り始めているので、また機会があれば展示したいと思います。
WebXRの各機能を試せるスターター的なリポジトリもいくつか公開しているので、興味がある方はぜひ試してみてください！
ここまで読んでいただき、ありがとうございました。
Discussion