COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.
2017
4
JUL
CATEGORY:
TECH Tips
ブラウザでVJにチャレンジ!
こんにちは。デベロッパーの寺口です。
先日開催された「REPUBLIC×RHYTHM HOLIC」というオーディオビジュアルイベントにて、弊社若手デベロッパー陣(平尾黒川寺口)で「SJ Developers」というユニット名義のもとVJをやらせて頂きました。

「REPUBLIC」について詳しくはこちら
http://republic.jpn.org/


3人ともVJは未経験ということで、経験豊富な弊社デザイナー平井にVJシステムのテクニカル面等でサポートに入って貰いました。(平井は「REPUBLIC 映像作家100人+100 リリースパーティー」(昼の部)に「H2-T2」というグループでVJを担当していました。)
SoundのLine Inputを使用する以外はシステム構成はほぼ「H2-T2」さんと同じです。

「H2-T2」さんのVJの様子や具体的なシステム構成についての詳細はこちら
http://www.sonicjam.co.jp/blog/hitori/001556/


やったこと

せっかくメンバーが3人いるので、それぞれが違うツール・言語を使えば面白いんじゃないか?ということに。Unity、openFrameworks、WebGL(three.js・GLSL)で手分けして素材作りに取り掛かりました。


当日の様子

当日の会場構成としては大きなメインモニター1枚と小さいモニター3枚の計4枚の構成でそれらに制作したものが表示されるような形です。

vjimg01.jpg
vjimg02.jpg

作ったもの

私はWebGLを使用してみました。
WebGLと言ってもプレーンなWebGLではなく、three.jsを使用しました。
three.jsを選んだ理由は、比較的簡単にWebGLを扱った表現ができるという点と、今後の実案件のための実験的な意味も兼ねています。
具体的な構成は、ざっくりですが下記の図のような感じです。
systemimg.png
何個か用意した素材Sceneをボタン1つでクイックに切り替えたかったので、SceneManagerを1つ用意し、配列に対してそれぞれのシーンを格納しています。
rendererは共通のものを使用していて、camerasceneだけをそれぞれの素材Sceneに持たせるようにしています。

メインと重ね合わせられるように、もう1つサブでOverSceneを用意。メインのcanvasにサブのcanvasを重ねて、透明度を調節できるようにもしてみました。
(メインとサブではrendererは共通のものではなく、rendererMainrendererSubのような形でそれぞれ分けています。)

※three.jsの基本的な使い方や概念については@yomotsuさんがこちらにて詳しく丁寧に解説して下さっているのでそちらをご覧下さい。

threeimg01.png
threeimg02.png
threeimg03.png
制作したグラフィックは、入門サンプルにあるようなオブジェクトのインスタンシングやトーラスなどですが、音に連動したアニメーションをさせたかったので一工夫。

少しアナログですが、PCのマイクから直接環境音を取り、WebAudioAPIを介してオブジェクトのスケールなりを更新して音に反応するようにしてみました。

描画してる内容は簡単なものでも、音に反応するようにすると小慣れて見えるので、アイディア次第ではもっと面白いものも作れそうだなと感じました。



まとめ

今回、グリッチなどのポストエフェクトはWebGL側では行わず、VDMX側でエフェクトをかけました。今後はそういったエフェクト等も、WebGL側でやってみたいです。 イベントではWebGLopenFrameworksを組み合わせて表現している人もいらしたので、そういった複数の技術の組み合わせによる表現の模索も面白そうだと感じました。

また、GLSLでレイマーチングにチャレンジしてみましたが、距離関数等をまだまだモノにできていないので、根気よく学習していこうと思います。

今回素材等を制作するにあたり、様々なサンプルコード(主にGitHubから)を参考にさせて頂きましたので、この場を借りてお礼を申し上げます。


初めてのVJでどうなることかと思いましたが、チームメンバーで協力して自分たちも楽しみながらフロアを盛り上げることができました!
制作したものを、直接目の前で人に見てもらう機会はあまりないので新鮮でしたし、いつもより更に「見られること」を意識した制作は刺激になりました。

プログラムを使用して表現することのトレーニングにもなりましたので、また機会があればぜひ参加してみたいです。


WebGL以外を使ったメンバーの制作物

Unityで制作(平尾)

Unityの自由なライティング機能を使って面白い表現ができないかなと考えてみました。浮遊しているREPUBLICの文字へ、音に合わせていろんな角度から複数のスポットライトを当てて、背面に影を表示することでロゴのリアルな存在感が出せないかという試みでした。
(ちなみに画面上に出ている小さい文字はUI用のガイドです。)
republic_hirao03.png 渋谷のスクランブル交差点で撮影した全天球映像を使って、カメラを回したり前後させたりさせました。
republic_hirao02.png

openFrameworksで制作(黒川)

他の環境に比べてもよりリアルタイム性の高いopenFrameworksならではの映像、というものを意識して制作いたしました。
映像内における動きや変化、そのほとんどをサウンド入力による値で管理したことで、直接的で力強い音との同期を感じることができるようになってい(るんじゃないかな!?と思い)ます。

{y:aYH0bOxo9rk}

CATEGORY

×
CATEGORY
COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.