オーディオリアクティブなVR空間で生演奏のライブがしたくてライブシステムを作った話

xR Developers Community Conferenceで発表した内容です。
https://vrtokyo.connpass.com/event/185043/

1. オーディオリアクティブなVR空間で 生演奏のライブがしたくて ライブシステムを作った話 ぴぼ（memex） @memex_pibo
2. 自己紹介 • ぴぼ（@memex_pibo） • 大学院で裸眼MR（空中映像）を研究 • 在学中にVR空間での音楽活動に興味を持ち 2人組音楽ユニット「memex」でVR音楽活動開始 • 本業：Androidエンジニア 手乗り裸眼MR「FairLift」 memex
3. memex ワンマンライブ 「#解釈不一致」 memexがVR空間で行ったライブ • 生歌生ギター • リアルタイムモーション収録 • オーディオリアクティブな演出 • 体験可能人数無制限 YouTubeに360°立体視のアーカイブがあります
5. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！
6. #解釈不一致 システム構成 Max For Live モーション 演奏 音から生成した 演出信号 音声 データ モーションと 演出の映像化 配信映像再生 コンポーネント カメラによる テクスチャ化 Shaderで モーションと 演出の復元
7. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！
8. オーディオリアクティブな視覚演出が好き オーディオリアクティブ ＝ 音に反応すること　 例） 　声の音量に合わせて円が大きくなる 　バスドラムに合わせて床が隆起する Soundscape of Portrait - Ayumu Nagamatsu ハイスイノナサ"地下鉄の動態" MV
9. VRでオーディオリアクティブの世界に入りたい オーディオリアクティブな空間の中でライブしたい…… VRChatならできそう！バーチャルアーティストすっぞ！
10. VRでオーディオリアクティブの世界に入りたい オーディオリアクティブな空間の中でライブしたい…… VRChatならできそう！バーチャルアーティストすっぞ！
11. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！
12. できない理由：同期の経路がバラバラ • VRChat アバターの モーション ライブの音声 空間演出イベント 演者 お客さん
13. 演者 同期の経路がバラバラ • VRChat お客さん アバターの モーション ライブの音声 空間演出イベント ここは気にならない ここが合わない
14. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！
15. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！ 1. 素直なアプローチ 2. 演出イベントの映像化 3. アバターのモーションの映像化
16. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！ 1. 素直なアプローチ 2. 演出イベントの映像化 3. アバターのモーションの映像化
17. 素直なアプローチ 音と演出のタイミングを合わせるために最低限必要そうなもの 1. モーション・音声・イベントにタイムコードを持たせたフォーマット 2. 1をやりとりするサーバー 3. 1のタイミングを一致させて再生できるクライアント
18. 素直なアプローチ 音と演出のタイミングを合わせるために最低限必要そうなもの 1. モーション・音声・イベントにタイムコードを持たせたフォーマット 2. 1をやりとりするサーバー 3. 1のタイミングを一致させて再生できるクライアント たいへんなのでなるべく既存のものに乗っかりたい！
19. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！ 1. 素直なアプローチ 2. 演出イベントの映像化 3. アバターのモーションの映像化
20. • VRChatクラブシーンでの先行例 演出イベントを映像として配信する アバターの モーション ライブの音声 空間演出イベント （色で表現） 演者 お客さん 映像ストリーミングサービス経由 Shaderで映像を 演出にデコード (VRChat) HLS再生 オブジェクト VRChat経由
21. 演出イベントの映像化 先行例：TouchDesignerなどで音圧レベルを白黒グラデーションにマッピング https://www.slideshare.net/noriben/vj-168074352 #解釈不一致ではMAX for LiveとUnity 映像をシーン内のカメラでRender Textureにし、シェーダーで読み込む バスドラム スネア バスドラム（床） スネア （円周）
22. 曲中の任意のタイミングで演出イベントを生成する 音楽制作ソフトのシーケンサーにMIDIノート（音符）を配置 UnityでMIDIを拾って映像化 伴奏音声 演出イベント （MIDIノート）
23. 問題点：アバターと音がズレる
24. 今日のテーマ 目的：オーディオリアクティブな演出で生演奏のVRライブがしたい！ 課題：音と演出のタイミングが合わない！ 解決策：アバターも演出も音も全部動画として配信すれば合う！ 1. 素直なアプローチ 2. 演出イベントの映像化 3. アバターのモーションの映像化
25. 任意のシェーダー変数が 映像として配信・再生可能 （精度は低い……）
26. アバターのモーションも 映像として配信しよう
27. #解釈不一致 の配信形式 アバターの モーション ライブの音声 空間演出イベント お客さん 映像ストリーミングサービス経由 演者 メッシュ・ シェーダー等 アセット類 VRChat経由
28. モーションの映像化 • VAT（Vertex Animation Texture） ◦ アニメーションの各フレームにおける各頂点の位置をテクスチャに書き込むことで テクスチャにアニメーション情報を記録する手法 #解釈不一致 では映像1フレームに1フレーム分のアニメーションを記録
29. エンコードによる劣化 映像として配信する際のH.264エンコードで頂点の位置情報が劣化する 外れ値をフィルタリングすることで原型を保つ エンコード フィルタリング
30. 実際に配信した映像
31. 演出イベント アバター1 モーションデータ アバター2 モーションデータ ツイート （空間に表示）
33. #解釈不一致 システム構成 Max For Live モーション 演奏 音から生成した 演出信号 音声 データ モーションと 演出の映像化 配信映像再生 コンポーネント カメラによる テクスチャ化 Shaderで モーションと 演出の復元
34. まとめ
35. 良かったこと • VRChatに依存しなくなった ◦ 360°アーカイブはUnity上でUnityCaptureで録った映像 • 人数制限がなくなった ◦ VRChatの1インスタンス（1空間）には人数制限があるが、 この手法なら複数インスタンスに同時に現れることができる ▪ 「仲いい人だけでインスタンスを立ててライブを見るのが面白かった」 • 「VR空間上の一連のできごとが1つのファイルとして記録されている」 ことが面白い ◦ Unityのビデオプレイヤーで再生ファイルを差し替えるだけでリハーサルの様子が見られる ◦ ビルドしたクライアントと録画映像があるのでVRChatが対応しなくなっても 今後もずっと体験できる（はず）
36. 大変だったこと • エンコードによる情報量の劣化への対処に凄く時間がかかった • AWSで1時間の映像を400人程度に配信した結果5万円かかった
37. より詳細な内容がQiitaにあります https://qiita.com/memex_pibo/items/3fbfcd627e5e7c7f2061
38. オーディオリアクティブなVR空間で 生演奏のライブがしたくて ライブシステムを作った話 ぴぼ（memex） @memex_pibo