feat: ワークショップ絵をパーティクル花火として打ち上げる機能の追加

[haruto-kamijo]

概要

ワークショップで子どもたちが描いた手書きイラストをパーティクルに変換し、花火として打ち上げる機能を追加した。ジェスチャー検出（MediaPipe）と連動し、既存のVFX花火と並列で動作する。

変更内容

新規追加スクリプト

• FireworkEntry.cs — 花火エントリのデータ型（FireworkEntry / ParticleData / ParticlePoint）
• ImageToParticles.cs — 画像を n×n グリッドにリサイズして白背景を除去し、色ピクセルをパーティクルデータに変換するロジック
• FireworkManager.cs — エントリの登録・変換・打ち上げを管理するシングルトン
• ImageFireworkEffect.cs — パーティクルを「展開 → 維持 → 落下」の3フェーズでアニメーションさせるコンポーネント
• AdminUIManager.cs — 画像の追加・変換・有効化・テスト打ち上げを行う管理画面UI

変更スクリプト

• FireworkLauncher.cs — ジェスチャー受信時に既存VFX花火と同時に画像花火を打ち上げる TryLaunchImageFirework() を追加

シェーダー

• ParticleColor.shader — URPでパーティクルの色を正しく描画するカスタムシェーダー（_Color プロパティをCBUFFERで受け取る）

セットアップ

• TextMeshPro Essential Resources を追加
• Noto Sans JP フォントアセットを追加（日本語文字の表示対応）

動作フロー

[Admin画面]
画像を追加 → Convert → [ON]に切り替え
        ↓
[ジェスチャー検出]
PoseLandmarkDetector → GestureDetector → PoseEventBus
        ↓
FireworkLauncher.OnGestureDetected()
  ├─ 既存VFX Prefab を Instantiate（変更なし）
  └─ FireworkManager.GetActiveEntries() → ImageFireworkEffect.Launch()
        ↓
[アニメーション]
Phase1: 中心から絵の形に展開（EaseOut）
Phase2: 絵の形で静止
Phase3: 重力で落下・縮小フェード

マルチディスプレイ対応

• MainCamera → Display 2（プロジェクター投影）
• AdminCamera + AdminCanvas → Display 1（スタッフ用モニター）
• スクリプト変更なし、Inspector の Target Display 設定のみで対応

調整可能なパラメータ（Inspector）

パラメータ	場所	効果
Resolution	FireworkManager > Conversion Settings	粒子数（64推奨）
Include White	FireworkManager > Conversion Settings	白ピクセルも粒子化
Image Scale	ImageFireworkEffect	絵の表示サイズ
Expand / Hold / Fade Time	ImageFireworkEffect	各フェーズの長さ

今後の対応（未実装）

• APIとの連携（GET /fireworks でエントリ取得、PUT /fireworks/:id で有効化同期）
• Web側（React/Three.js）への同一ロジック移植