東京Node学園祭2017のアフターパーティーでVJをやってきた #nodefest

はじめに

12/25,12/26に開催された,Node.jsコミュニティのカンファレンス,東京Node学園祭のアフターパーティーでVJをやってきた.今回は運営スタッフのamagi(@amagitakayosi)さんに誘って頂いた.amagiさんとは,彼が開発しているVEDAというAtomでライブコーディングを行うプラグインへのContributeを通して知り合いになった.

下ごしらえ

まず,VEDAで映像素材を切り替えるためのサンプラーを外部のアプリケーションとしてarmosを用いて新規に開発した.Ableton liveのセッションビューのような操作体系で,登録したキーを押すことで設定したBPMに同期して映像を切り替えることができる.なお映像の再生速度も同期される.また,タップ入力によるBPMの変更機能付きで,流れている曲に合わせてスペースキーを押すことでいい感じに検出してくれる.入力される音声信号からのリアルタイム検出による自動化もやりたかったが不安要素が多かったのでそのへんは今度やることにした.(昔実装した非リアルタイムBPM検出のアルゴリズムと想定される計算量を比較してみたが,両方で用いられるFFTがΟ(n log n)なので,サンプル数が少ないリアルタイム処理なら速度的に割といけそうな予感がしている)なお,VEDA本体との通信は,Open Sound Control(以下OSC)というプロトコルで行う.VEDAはOSCによる外部からのglslのuniform変数の変更をサポートしているが,映像素材の切り替え機能は今のところ無いので,そのへんの機能をいくつか無理矢理追加する改造を施した.サンプラー側はosc-dというOSCの実装のpackageを用いた.開発の途中でいくつかバグに気がつけたので良かった(修正済み).dogfoodingは最高.

次に,Blender(あと仕上げで少しだけAfterEffects)で普通の4n拍(n∈N)くらいの尺の映像と,2つの映像をミックスするための白黒の映像をいくつか作成した. BlenderはTimeline周りの操作体系も3Dのモデリングと直交性があるので快適にモーションを組むことができる.また,2Dっぽい見た目のモーショングラフィックスを作る際もオブジェクトを三次元的に配置できるので凝ったことができる.

映像素材の制作中は,レンダリング作業の効率化のためlightweightなBlenderレンダリングファームを開発し,計算用のarch linuxのサーバ上で稼働させていた.僕が作業している間,休憩している間に,予め投げておいたキューが逐次処理されていく.ちなみに処理が完了する度にするとtwitterでリプを飛ばしてくれる.

当日

日中は空いた時間に本会場の廊下で,実際の環境を想定して念のためにveda-samplerの全ての操作をmidiコントローラで行えるよう,無限コーヒーを飲みながらバキバキコードを書いていた.楽しかった.

アフターパーティーはfreeeさんのオフィスを借りて行った. 設営からお手伝いさせていただいたが,レイアウト等試行錯誤の末に出来上がったパフォーマンス用のブースが広くて凄みがあり,一体何のイベントのアフターパーティーなんだろう感がにじみ出ていた. freeeさんの社員の方が「会社ってこんなこともできるんだ」的な旨のことを言っていたのを覚えている.

自分のVJ中は記録映像を撮る余裕が無かったので他の方が撮ってくれた様子を以下に引用させて頂きます.(撮影ありがとうございます🙏)

まとめ

  • 実験的な要素を盛り込んだパフォーマンスができて勉強になった.
  • VJ,メディアアート,クリエイティブコーディング系の知り合いが増えた.
  • OSSの活動がきっかけでOSSのイベントに招待して頂いてVJのパフォーマンスをするという素敵な体験ができた.

TipsとしてのVJボツ案供養

本番では使われなかったボツ案です.ご査収ください.

VEDAでsyphonの入力を使いたい

VEDAネイティブでやるのは大変.懇親会でamagiさんと話をしたけどなかなかしんどい(chromiumに手を入れる必要がある).レイテンシを気にしないのであれば,syphoncamTwistを経由してVEDAのcamera入力に渡すという手段がある.

VEDAで透過映像を扱いたい

f:id:ttata:20171129002912p:plain

VEDAが内部で使用しているThree.jsで直接透過映像を扱うのは難しい.そこで,映像のフレームに透過マップをくっつける(この処理はffmpegopenCV等の画像処理ライブラリを使って適当にツールを書いておくと楽).これはgooglechromeの技術デモ『3 Dreams of Black』で用いられていている手法で,以下の動画が参考になる.

このアプローチをnormal mapやdepth map等の複数種類のソースに拡張することで,deferred shadingをVEDA側で行うことができる.ちなみに,基本的にカラー以外の情報は縮小しても粗さに気が付きにくいため,付加されるマップについては1/2サイズのものにしておくと処理の負荷を抑えることができる.