VR Piano

WebARで体験するVRピアノ

空間で奏でる音楽体験の新たなかたち

デモ体験URL：

https://vite-r3f-xr-piano.vercel.app/動画リンク（任意）：http://youtube.com/watch?v=Fu66zvj5IE0対応デバイス：VRヘッドセット（Webブラウザ上で体験可）

プロジェクト概要

このプロトタイプは、WebAR技術を活用して仮想空間でピアノを演奏・視聴・学習できる体験を提供するVRアプリです。VRヘッドセットを着けてWebブラウザで起動すれば、すぐにVRでのピアノ演奏体験の世界へ没入できます

2. 目的と成果

🔍 目的

本プロジェクトは、以下の技術的・表現的課題に挑むためにスタートしました：

• VR空間でのピアノ演奏体験の再現

• 空間オーディオとピアノ入力の安定的な組み合わせ

• Web技術（WebXR）でのハンドトラッキングの実用性検証

• React Three Fiber など先進的な技術の組み合わせ評価

• 音楽・演奏の新しい学習インターフェースの模索

🛠 技術的アプローチ

• WebXR × react-three/xr によるハンドトラッキング

• アニメーション付きのピアノ鍵盤と、指先の衝突判定による音の発生

• 演奏用音源はMIDIファイルのJSON変換データをベースに構築

✅ 成果と検証結果

• 鍵盤入力から音の出力までの遅延は100ms未満

• 両手のトラッキングは5分以上安定動作

• 単純な曲なら十分な演奏精度

• 高速な演奏や複雑な楽曲では、指と鍵盤のスムーズな同期に若干の課題あり

📝 補足：Apple Vision Proでの動作は非常に滑らかで、トラッキング精度も高いことが確認されました（第三者による試験）。将来的にはより高性能なデバイス向けの最適化も視野に。

3. 使用技術（Tech Stack）

👨‍💻 フロントエンド

• Vite（開発サーバー）

• React / TypeScript / React-Three-Fiber

• Three.js / WebXR / react-three/xr

• GLSL（シェーダー）

• Vercel（ホスティング）

🧠 補助ツール・サービス

• Tone.js（MIDI → JSON 変換）

• SampLab, musictomidi.com（MP3 → MIDI 変換）

• suno.com（AI音楽生成）

🔧 バックエンド

なし（クライアントサイド完結）

4. 開発・改善メモ

🎯 主な課題と対処法

• ハンドトラッキングの精度：Quest Proではテンポが上がると指が2つの鍵盤を同時に押してしまうことがあった。

• 楽譜データ編集：MIDIの解析・編集には多くのAIツールを活用したが、ピアノの知識とスプレッドシート操作は別スキルで、両立が難しかった。

💡 学びと今後の展望

• MIDIやMP3データの扱い方、WebXRとReactの連携理解が深まった

• ハンドトラッキングの限界と可能性の両方を体験できた

• 今後は、よりシンプルな楽器（例：ドラム）でのリズムゲーム化が面白そう。技術的にもユーザー体験的にも開発しやすくなる可能性が高い。

5. 開発体制・スケジュール

• 開発者：1名（Alex／WebAR & 3D Web技術フルスタックエンジニア）

• 開発期間：約3週間（設計・実装・検証含む）

6. 今後の改善ポイントと所要期間（見積もり）

7. 推奨ユースケース

• リモート学習向け音楽教育

• バーチャルイベントでのパフォーマンス

• フェスや展示会でのインタラクティブ体験

8. 今後の展望

現在のプロトタイプに追加機能を積み上げるよりも、より直感的で完成度の高いシンプルな楽器体験（例：ドラム×リズムゲーム）への展開がより魅力的だと考えています。

🎖 受賞歴・公開実績（該当する場合）

（※現在未記入）

記事の公開・資料化・プレゼン用スライドなどに合わせて、トーンの調整やデザイン調整も承ります。必要があればお申し付けください。