WebARで体験するVRピアノ

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

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

プロジェクト概要

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

想定されるユースケース

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

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

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

目的と成果

本プロジェクトは、以下の技術・表現の課題解決のために開発しました。

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

• 空間オーディオとピアノ入力の安定的な実装

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

技術的アプローチ

WebXRと react-three/xr を組み合わせることで手のトラッキングを実現しました。アニメーション付きのピアノ鍵盤を使い、指先と鍵盤との衝突検出によって音を鳴らす仕組みを採用しました。

成果と検証結果

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

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

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

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

補足：Quest Proでテストをしていましたが、Apple Visionで試したところ、指や手のトラッキングは圧倒的に精度が上がりました。より高性能なヘッドセットで、より没入感の高い体験ができるかもしれません。

使用技術（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音楽生成）

バックエンド

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

開発メモ

エンジニアのAlexonはフランスで4歳から20歳までピアノを弾いていました。適切な楽曲を選んで編集するには、深い専門知識が求められます。ピアノの経験があっても、この作業は非常に難しいものでした。実際、ピアノを演奏することと、楽譜をスプレッドシートで編集することはまったく別のスキルでした。

スプレッドシートの編集にはAIツールをたくさん使いましたが、それだけでは不十分でした。

この体験はWeb技術をベースにしているため、ピアノUIにグラフィカルな演出を加える場合は、丁寧な最適化とクリーンなコード設計が不可欠です。

今後の展望

今後は、よりシンプルな楽器（例：ドラム）でのリズムゲーム化が面白そう。技術的にもユーザー体験的にも開発しやすくなる可能性が高い。 鍵盤入力の精度向上と複数デバイスでのテストには、おそらく2週間ほどかかると見ています。もし機能追加や最適化作業も行う場合は、さらに数日〜1週間程度の追加作業が見込まれるため、トータルで2〜3週間が目安になると思います。

このプロジェクトは、学習や技術検証としても価値のある良い試みであり、映像の共有にも適したプロトタイプです。また、Web技術を活用してより手軽に扱えるリズムゲーム系の別プロジェクトに発展させるきっかけとしても面白いと思います。

開発体制・スケジュール

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

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