概要
制作期間: 1か月程度
オーディオビジュアルイベント『Flow』の第5回を、2025年3月11日に開催しました。私は、Unityを利用し、スマートフォンを利用した来場者参加ギミックを含むVJパフォーマンスを行いました。
第5回は、合計して約150名ほどの方にご来場頂きました。
パフォーマンス映像
技術詳細
Prefabとして3シーンを用意し、それぞれのスムーズな遷移と適切な初期化処理を実現しました。
また、来場者が自身のスマートフォンから専用のWebページにアクセスすることで、リアルタイムに画面上に絵文字を飛ばすことができる仕組みを実装しました。
演出を担当したin the blue shirt氏の楽曲及びそのミュージックビデオの雰囲気を掴んだ演出を行うため、全編にわたってトゥーンシェーディングを採用しました。
絵文字送信システム
操作ページにアクセスすると図の画面が表示され、各アイコンを上にスワイプすることで画面上に同じ絵文字を出現させることができます。
単純に表示システムを組むだけでなく、端末がスリープ状態から復帰した際の自動再接続や、同一端末あたりのレート制限を実装しました。
p5.jsを利用してUIを制作し、そのUIの提供とWebSocketでの操作受信、VJツールとの通信を行うサーバーは、JS/TSランタイムDenoを利用して構築しました。
VJツールでの絵文字の表示には、VFX Graph機能を利用しました。
エフェクト
UnityのRenderer Feature機能を利用し、シェーダーでのポストプロセスエフェクトを複数実装しました。
パフォーマンス中常時適用していたピクセレートエフェクトの他、in the blue shirt氏のロゴの表示、画面をスライスするエフェクト、画面をアスキーアート風に加工するエフェクトを実装しました。
最適化
ツールを安定させ、ライブパフォーマンスを問題なく行うため、最適化を行いました。
例として、図中のグリッド上をジャンプする動物のモデルは、動きを全てUnityのJob Systemを利用して並列に計算した上で、GPUインスタンシングを利用して描画されています。
パフォーマンス中動物の数は大幅に増減しますが、上記の対策を行ったため、本番環境で常時100fps以上をキープすることができています。