星屑の指揮者
～動きを詠い、光を奏でる～
描いた絵や画像が、美しい花火となって夜空を彩る。
みんなで作る、みんなで見る、新しい花火体験。
Scroll
作品概要
Fireworksは、お絵かきや画像から、世界に一つだけのオリジナル花火を作成できるインタラクティブ作品です。作成した花火は、展示ブースの大画面で他の参加者と一緒に打ち上げることができます。
花火作成
スマホでお絵かきや画像から、オリジナル花火を作成。色やサイズも自由にカスタマイズ。
打ち上げ
ジェスチャー、音声、YouTubeコメントなど、様々な方法で花火を打ち上げ。
操作体験
VR空間での鑑賞、ヘリコプター操縦、AR体験など、多彩な方法で花火を楽しむ。
花火作成
花火を作る
お絵かきで作成
スマホで自由にお絵かき。指でなぞるだけで、描いた形がそのまま花火のシルエットになります。
画像から変換
お気に入りの写真やイラストをアップロード。AIが自動でシルエットを抽出し、花火に変換します。
自由にカスタマイズ
9色のカラーパレットから選択、または自由にカスタムカラーを指定。サイズは小〜特大まで4段階から選べます。
打ち上げ
花火を打ち上げる
モーションセンサー
MediaPipeによるハンドトラッキングで、手のジェスチャーを認識。手を振って花火を打ち上げよう！
音声で打ち上げ
Web Speech APIによる音声認識。「打ち上げ！」と叫ぶと、あなたの声に反応して花火が発射されます。
YouTubeコメント
YouTubeLiveの配信にコメントして花火を打ち上げ。世界中どこからでもリアルタイムで参加できます。
操作体験
花火を楽しむ
VRマップ体験
スマホでVR空間に入って花火を鑑賞。360度の没入感あふれる花火体験を楽しめます。
ヘリコプター操縦
コントローラーでヘリコプターを操作。夜空を自由に飛び回りながら、花火を空から鑑賞できます。
AR体験
スマホのカメラで現実世界に花火を出現させよう。GPS連動で、実際の位置に花火が打ち上がります。
システム
6つの技術領域で構成されたマルチプラットフォームシステム
ゲームエンジン
- Unity花火パーティクルシステム・WebGL/Windows対応
- Particle Systemカスタム花火エフェクトの描画
- VRM/UniGLTF3Dアバター読み込み・表示
- WebXRブラウザベースのVR体験
フロントエンド
- Next.jsReact 19ベースのWebアプリケーション
- TypeScript型安全な開発環境
- Tailwind CSSモダンなUIスタイリング
- react-unity-webglUnity WebGLとReactの連携
バックエンド
- SupabasePostgreSQLデータベース・認証・リアルタイムAPI
- YouTube Data APIライブコメント取得・花火トリガー
- Edge Functionsサーバーレス処理
ネットワーク
- Photon PUN 2リアルタイムマルチプレイヤー同期
- WebSocket双方向リアルタイム通信
- Realtime APISupabaseリアルタイムイベント
AI/センサー
- MediaPipeハンドジェスチャー認識
- Web Speech API音声認識による打ち上げトリガー
- DeviceOrientationスマホの傾き・方位センサー
AR/モバイル
- ARFoundationARCore/ARKit対応のクロスプラットフォームAR
- Google Maps APIGPS位置情報・地図連携
- Geospatial API現実世界の座標とAR空間の連携