先日SNS等で告知させていただきましたが、6/24にREPUBLICというイベントで人生初のVJをやらせていただきました。

有名なアーティスト・DJ・映像クリエイターの方たちが出演する中、SONICJAMの平井くん (@shujihirai) 、SHIFTBRAINの東倉さん (@oneslocus)、フリーランスエンジニアのテル・豊田さん (@teruhito_toyoda)さんと一緒にH2-T2というユニット名で、STUTSさんの映像演出を担当させていただきました。

↑VJブースより撮影。STUTSさんの後ろ姿と見切れる平井先生。

REPUBLIC
Website: http://republic.jpn.org/
Facebook: https://www.facebook.com/REPUBLIC_JPN-179507082096837/
Twitter: https://twitter.com/REPUBLIC_JPN

STUTS
Website: http://stutsbeats.com/profile
Twitter: https://twitter.com/stuts_atik

冒頭で述べたとおり、人生で初めてのVJだったわけですが、まさかこんなに大きな舞台でいきなりやることになるとは。。
SNSでちらっとVJ興味ある的な発言をしたら、元同僚でありVJであるonom先生 (@onom)がVJ勉強会を開きましょうとコメントし、さらにREPUBLICの主催者である石澤さん (@ishizawasyujiro)から「REPUBLICでVJやって」とコメントをいただき、あれよあれよとVJをやることになってしまいました。

当日はプロジェクター7台?(うろおぼえ)を使用してフロアの壁一面に映像が流れるという豪華仕様。

自分の作ったものが大きく映し出され、リアルタイムに観客に届いているのを見届けるというのと、演奏しているアーティストさんを後ろから見ながら映像を操作するという非常に刺激的な体験をさせていただきました。とにかくSTUTSさんのLIVEが最高すぎた。。

STUSさん側からセットリストは頂いており、全9曲だったので、ひとり2~3曲を担当することになりました。
僕はこんな感じの映像を作らせていただきました。

VJ勉強会で講師をしてくれた平井くん、onom先生 (と奥様)と、onom先生が勉強会に講師として招いたカゾエ先生 (@nobuaki_kazoe)、そしてイベントに誘っていただいた石澤さん、どうもありがとうございました！

とくに平井くんには当日までお世話になりっぱなしでした。彼のお陰で万事うまく言ったと言っても過言ではないです。どうもありがとう。
次の機会では1人でも一人前にできたら良いなと思います。

当日の構成など

興味ある方のために、少しだけ当日の構成や使ったツールなどを紹介します。
4人でやったわけですが、以下のようなコンテンツ構成でした。

・平井くん (PC1)
VDMXで動画素材をメイン (MIDIコンで操作)
Unity製のアプリをSyphonを通してVDMXで再生

・東倉さん & テルさん (PC2)
WebGL (Three.js)コンテンツをブラウザで再生
それをScreenCaptureSyphon → TCPSyphonを通して平井くんのVDMXへ

・自分 (PC3)
Unityアプリで再生 (MIDIコンで操作)
同じくTCPSyphonで平井くんのVDMXへ

こんな感じでPC (Mac)3台を使用し、それぞれに音声の入力が必要だったので、USBのオーディをインターフェースを繋ぎました。

当日はビデオミキサーも用意されてはいたんですが、平井くんのVDMX上でいい感じにエフェクトをかけたり、別の素材を合成したほうがよいとのことで、Syphonを通してVMDXに送信していました。有線のローカルネットワークを組んで、TCPSyphonというネットワーク上でSyphonを使用して映像をやり取りするためのツールを使用しました。

TCPSyphon
http://techlife.sg/TCPSyphon/index_jp.html

ScreenCatpureSyphonは、その名の通りデスクトップや指定したアプリの画面をSpyhonで送信するためのツールです。ブラウザから直接Syphonで送信するための仕組みがないので、これを使用しました。最初はCefWithSyphonというアプリも検討しましたが、WebAudioAPIまわりが使用できない感じだったので (音に反応するコンテンツが作れないので)、断念しました。

ScreenCaptureSyphon
http://techlife.sg/ScreenCaptureSyphon/index_jp.html

ただ、送信する解像度が上手く調整できず、ウィンドウサイズの4倍の解像度で送られてしまう(Retinaディスプレイのせい??)ので、コンテンツ側とPCの設定で解像度を調整する必要がありました。この辺うまくやる方法あるのかな。。

というかそもそもPC複数台でVJやるときの一番いい方法ってどんな方法なんでしょう。

UnitｙでVJ

そもそもUnityをまともに使ったこともそんなにないので、いろいろよくわかんないところからスタートしたんですが、「Unityでこれやりたいな」って思うとKeijiro　Takahashiさん (@_kzr)が作ったリポジトリにたどり着くので、ありがたく使わせていただきました。

(Keijiro TakahashiさんはREPUBLIC x RHYTHMHOLICのメインフロアでFEMMとコラボしており、フロアを大いにわかせておりました。生で見られてよかった。。神。。)

・Funnel (UnityでSyphonを使う)
https://github.com/keijiro/Funnel

・MIDIJack (UnityでMIDIコンを使う)
https://github.com/keijiro/MidiJack

・AudioSpecgrum (Unityで音の解析をする)
https://github.com/keijiro/AudioSpectrum

・Emgen (UnityでIcosphereのMeshをつくる)
https://github.com/keijiro/Emgen

あとはWebGLではGLSLですが、UnityではシェーダをHLSLで記述するので、記述方法や組み込み関数が微妙に違ったりしましたが、そんなに苦にはなりませんでした。

内容的なところで言うと、自分の十八番(?)でありこのサイトのメインビジュアルでも使用している、ポリゴン片をぐわっと変形させる表現を使用したり、トロコイドという図形を使って描画したり、屈折マッピングを使用したりしてます。(相変わらずwgld.orgにはお世話になりっぱなしである)

トロコイド
http://slpr.sakura.ne.jp/qp/polygon-spirograph/#troc3d

屈折マッピング
https://wgld.org/d/webgl/w046.html

Unityのことを調べながらやったので、しかもわざわざややこしいことをやろうとしてたので、製作時間はけっこうかかかってしまいました。。
でもお手軽に動画素材をつくるのには向いてるツールだと思いました。今後はonom先生のようにUnityを使って素材を量産したいです。

まとめ

・初VJで緊張したけど最高だった
・STUTSさん超いい人、でもLIVEは超cool
・ユニットでやるならアートディレクターがいる
・Unityはちょっとした素材つくるのに適している
・映像つくるのに時間かけすぎた。。
・MIDIコンでぐりぐり操作するの楽しい
・大きい＆たくさん(画面)って正義
・またやりたい