見出し画像

【自作VJソフト】オンラインB2BジェネVJツールを作った話

Saina

はじめに

この記事は【ジェネ系VJ Advent Calendar 2023】15日目の記事です。

B2B VJとは

B2Bとは元々DJ用語でBack to Backの略称です。2人以上のDJが交互にDJすることを言います。
それの派生として2人以上のVJが一緒にVJすることをB2B VJと呼ぶことがあります。
通常(オフライン)のクラブでは、ビデオミキサー(2つの映像入力を混ぜることの出来るハードウェア)を使って2人のVJを混ぜたり、切り替えたりして行います。
オンラインでも配信をリレーすることで疑似的にB2B VJが出来ますが、遅延の問題や片方にしかミキシングの権限がないというデメリットがあります。

Aurora Visual Tool

Aurora Visual ToolとはVRChatで開催しているオーディオビジュアルイベント draw(); #3のために開発したジェネVJツールです。
これはをにゅさん(@W0NYV)と共同開発したVJツールになります。
draw();を主催しているのが私とW0NYVさんで、
せっかくの3回目だしB2B VJしよう！→ワンオフのB2BジェネVJツール作るぞ！→住んでるところ遠いからオンラインB2Bシステムを作るぞ！
という勢いで作りました。

コンセプト

軽くコンセプトについて触れておきます。
上でも書きましたが、普通のB2B VJは2人のVJの最終出力を混ぜたり、切り替えたりすることを指します。
しかし今回はジェネVJなので1からシステムを作ることが出来ます。せっかくシステムから作れるのに結局「VJ①が映像を配信→VJ②が受け取った映像と自分のVJを混ぜる→B2B VJとして出力」といった従来の方法をとってしまっては少し勿体ないなと感じました。
そこでまずオンラインB2Bに適したVJのコンセプトを2人で考えました。

その結果
Operating System(WindowsやMac)がコンセプトになりました。
理由は以下の通りです。

  • OSのウィンドウという単位が抽象化しやすく共同開発に向いている（ウィンドウという範囲でVJネタを増やしやすい）

  • OSの上では様々なソフトウェアが動いている→つまり何が出てきても大丈夫→共同開発でバラバラに絵作りをしても世界観が崩れにくい

  • 基本操作をウィンドウの表示、非表示、選択にすればオンライン上でのデータの受け渡しがしやすそう（最初は色んなソフトウェアをクリックすることで絵が出てくる。的なVJスタイルを考えてました。）

オンラインB2Bシステム

結果

まず「オンラインB2Bでどこまで出来たか」という結果です。

オンライン B2B VJですが完璧な音ハメが出来てると思います。
どっちがどっちを担当したかは覚えてないですが、シーンに合わせてハイハット担当、キック担当になっていたり、片方が空気を読んで静かにしたり
「リアルタイムなB2Bっぽい感じ」になっていて面白い絵を作ることが出来ました。

特に1:40~2:10は、別々のウィンドウを別々の音にハメつつ、同じアニメーションで表示していて個人的に好きです。記憶が正しければ水色のウィンドウをSaina(私)が、紫のウィンドウをW0NYVさんがコントロールしていたと思います。

基本的な考え方

音の同期

DJが1人、VJが2人(①、②)が居るとします。
オンラインで安全に音ハメを行いたいというモチベーションからリレー方式を採用しました。
DJ→音→VJ①→音→VJ②という配信リレーになっています。

VJの同期

「VJの操作は？」というと、こちらはリレーを使ってません。
VJツールの操作の情報はほぼリアルタイムで通信しています。

最初に音を聞くVJ①を子、VJ①から音を貰って最終出力を行うVJ②を親とします。

VJ①はDJからの音を聞いて普通にVJをします。
そしてそのVJツールを操作したデータは、「操作内容」と「操作した時間(DJが一番最初に曲を再生した瞬間を0秒とした時間)」がセットになって親のVJ②へ送られます。

VJ②はVJ①からの音を聞いて普通にVJをします。
この時点でVJ①から正確なタイミングで操作が送られているので、VJツールが勝手に動いています。そこに自分の好きなタイミングでまた操作することで、VJ①とVJ②が同時に操作している状態を再現します。
ここで大事なことがあります。VJ②の情報もVJ①に送り続けています。
VJは相互にデータを送りあっています。いわゆる普通のオンラインゲームと同じ状態です。こうすることでお互いのVJプレビューがほぼ同期しているため、お互いにどんな出力になっているかを確認することが出来ます。

これが、VJ側をリレーにしない理由です。
従来のように映像もリレーにしてしまうと、
DJ→音→VJ①→音と映像→VJ②→最終出力
になってしまい、VJ①は最終出力を見ることが出来ません。遅延を許容すれば見れますが、現実的な遅延では収まらないと思います。

自作VJツールならオンラインB2B VJでも(ほぼ遅延なしの)プレビューが見れる！最高！

ちなみに今回は子側のVJ①がW0NYVさんだったのですが、プレビューに対しては
「ちょっとタイミングズレてるかもだけど、最終出力出てるのありがたい、あっちがそういう操作するならこっちはそうしようかなみたいな、それを確認できるくらいの遅延と音ハメ感」らしいです。

をにゅとのDM

実装

クラス図

B2B周りはこんな感じの設計になってます。
PlantUMLですが、ちょっと書き方が雑です。逆にわかりにくかったらすみません。

Pack、Unpack
B2BDataAbstractにはPackData()とUnpackData()が実装されています。
これは使っているネットワーク通信ライブラリMonobitEngineがプリミティブな型しか送受信できないことからこうなっています。
新しい演出を実装するときは、通信の事を考えたくない。というモチベーションから、送受信用のメソッドは一つだけ、そこの引数にデータを入れます。その引数の型はB2BDataAbstractというわけです。

B2BDataAbstractが色々な型をラップして
Pack(好きな型を送信するためにプリミティブな型にPackする)
Unpack(受信したデータを使いたい型にUnpackする)
という抽象化を行っています。

こんな感じ

Excute
通信で受け取ったデータをもとにコマンドを実行するメソッドです。

受け取ったデータをListで持っています。
それぞれのデータには「今DJが一番最初に曲を流してから何秒」が入っています。
ホスト(親)視点でも「今DJが一番最初に曲を流してから何秒」というデータがあるので、Listを常に監視してそこが一致したらそれを取り出します。
取り出したデータに合ったコマンドをExcuteします。

UI

動画はオフラインでの動作ですがUIはこんな感じです。
左側の赤いUIはネットワークを無視したホスト(親)限定の操作です。

もしオンラインであれば、ここに相手の操作も加わります。
勝手にウィンドウが出現するわけですね。

終わりに

初めてジェネVJツールを共同開発したり、初めてオンラインB2B VJしたりでめちゃくちゃ楽しい開発でした。1ヶ月間良い苦しみを体験出来ました。

あと4ヵ月前のプロジェクトの設計を読み返して記事書くの大変すぎました。これは修行。

ジェネVJツールはこんな感じにイベントに合わせてワンオフで作るという面白いことが出来るので好きです。こういった方向性のジェネVJも良かったら試してみてください！

自己紹介

Sainaと言います。普段はプリレンダVJ、ジェネVJ、ソフトウェア開発、シェーダーお絵描きなどをやります。
また、VRChatと現実で開催するジェネ系オーディオビジュアルイベント draw(); のオーガナイザーもやってます。

Twitter
https://twitter.com/SainaKey
ポートフォリオ
https://www.sainakey.com/

他己紹介

W0NYVさん
今回のVJツール Auroraを共同開発した人です。
私と一緒にdraw(); のオーガナイザーもやってます。

Twitter
https://twitter.com/W0NYV


いいなと思ったら応援しよう！