#アジアニ に出演しました! & JavaScriptでVJソフト自作しました
台風3つが同時に日本に攻めてきてますが、 昨日、渋谷clubasiaで3フロア同時にアニソンがかかる #アジアニ というパーティーがあり、 メインフロアのVJとして参加させていただきました!!
#アジアニ
シンガポールからのゲスト、ほとんどDJブースにいない方、お笑い芸人、そしてアニソン歌手まで、 多彩な方々がDJ、ライブをされて会場が死ぬほど盛り上がってる中VJさせていただけたのは本当に光栄と言いますか。。。
たくさんのお客さんを前に少し高いブースでVJできたことが本当にたのしかったです。
自分のVJですが、結局モーショングラフィックス系しか流さず、 OP等の映像は一緒にメインフロアでVJされたあっちんさんやちゃーさんに押し付ける形になってしまいました。 が、あくまでこれが自分の得意分野であるし、結果として得意分野を分担し合った連携VJができて良かったです。(個人的にはですが。。)
一点だけ、HOT LIMITが流れた時に
これを出しました、ありがとうデリケア。なお、お客さんの反応は見ることができず。。
結果として、今までやってきたVJの中で一番楽しかったし満足することができました。 出演されたDJ、VJさん、asiaのスタッフさん、#アジアニ の主催者さん、お越しいただいたお客さん、本当にありがとうございました!
自作VJソフト
以前より金欠を理由にVJソフトは買わずに作ってきましたが、今回も例に漏れず自作VJソフトを実戦投入しました。 ただし、以前のようにvvvvでパッチングするのではなく、JavaScriptでゴリゴリコードを書きました。
JSと言っても、要するにNode.js + Electronなのですが、本当にJSしか書いてないです(強いて言えばWebGLのシェーダーが別言語なくらい)。 なおGitリポジトリ https://github.com/yadex205/berkut で公開しています。随時更新していきます。
ということで、まだまだ未完成なのですが、今回VJソフトを作るのに使った主な技術などを紹介してみます。
WebChimera
Node.jsにlibvlcをバインディングしたnpmパッケージ。 つまりNode.js上でVLCメディアプレーヤーが再生できるメディアを再生することができる魔法のようなライブラリです。 再生と言ってもピンとこないかもしれませんが、要するに1フレームのピクセルごとの色情報を配列として取得することができます。
[13,34,62,35,74,215 ...]
みたいな感じです(どんな感じだ)。
なお実際に使う場合は、すでにビルド済みの wcjs-prebuilt パッケージを使うのが無難です。
また、Electronで使う場合には(こちらがメインですが)、
wcjs-renderer パッケージを使うことで HTMLのCanvas に動画を描画することができます。
WebGL
最新のウェブブラウザでは、Canvasタグ上でその場で3Dモデルをレンダーすることができちゃうんですが、それを実現するのがWebGLという仕組みです。OpenGLをそのままブラウザに移植したイメージ、かもです。
前述のwcjs-rendererはWebGLを使って動画のフレームを描画しています。
今回の自作VJソフトはwcjs-rendererを改造し、複数の動画のフレームを任意の合成方法(加算、乗算など)で重ねられるようにしました。
node-ffi
だそうです。今回はこれのNode.js版である node-ffi を使って、Windows限定ですが kernel32の関数を呼び出しています。
VJソフトってコントローラーや動画リストとかが表示されているウィンドウと、ミキシングされた動画を出力するウィンドウが2つ普通ありますよね。 もちろん今回もそのようにしたのですが、Electronではウィンドウ同士は別プロセスになります。 つまり、コントローラーウィンドウの方でミキシングしたフレームを出力ウィンドウに渡そうとする場合、プロセス間通信が必要になり、フレーム情報がシリアライズされるのですが、これがとても無駄に重たい処理になります。
願わくば、コントローラーウィンドウが保持しているフレーム情報が格納されているメモリのアドレス(ポインタ)を出力ウィンドウに教えることが出来れば。でも原則、プロセスごとに割り当てられるメモリのアドレスは仮装的なもので、他のプロセスが保持するポインタを直接見ることはできません。
ところが、WindowsのAPIでReadProcessMemoryという関数があり、他のプロセスのポインタが示す内容を見ることができます。これを呼び出すためにnode-ffiが必要でした。
他にもNeDBというドキュメント型データベースを使ってサムネイルの管理をしたり、ビューとデータのバインディングにVue.jsを使ったり、UIにはBootstrapを使ったり、さらにメディアファイルのインクリメンタルサーチを便利にするためにJS版migemoを使ったり、、色々使ってます。
眠たくなったのでこの辺にします、おやすみなさい。。。
