Atom用VJ環境 VEDA 1.0リリース #VEDAJS #GLSL

https://user-images.githubusercontent.com/1403842/28673275-1d42b062-731d-11e7-92b0-bde5ca1f1cae.gif

これまでglsl-livecoderとして開発してきたAtomパッケージを、VEDA としてリリースしました。

glsl-livecoderは元々ライブコーディングのために開発したパッケージですが、徐々にVJソフトとしての機能も追加されて来ました。 後述するサーバーモードが実装されたことで、VJソフトとして充分な機能を備えたと判断し、新たに VEDA としてリリースすることにしました。

この記事では、改めてVEDAの機能を紹介しつつ、前回の記事からのアップデートをお知らせします。

前回の記事↓

blog.gmork.in

目次

VEDAとは

atom.io

VEDAは、GLSLによるVJ/ライブコーディングパフォーマンスを行なうためのAtomパッケージです。 編集中のGLSLを実行し、生成された映像をAtomの背景として表示します。

GLSLはOpenGL/WebGLにおけるシェーディング言語ですが、単体でアニメーションを生成したり、VJソフトで映像エフェクトをかけるのに使われたりしています。 GPUパワーを活用できるため、非常に高度な処理が行えるという特長があります。

こちらはVEDAで実際にVJパフォーマンスを行なった様子です。 2時間ぶっ続けでVJしたけどメチャクチャ楽しかった……！

www.youtube.com

blog.gmork.in

最近のアップデート

前回記事を書いた時点では、主な機能として以下の3つがありました。

  • 動画/画像のロード
  • 音声入力
  • MIDI入力

ここからは、最近追加された機能について紹介していきます。

Webカメラ対応

twitter.com

v0.5.0で追加された機能です。 Webカメラの入力を取得し、テクスチャとして利用できます。 純粋に映像として利用することもできるけど、センサーとしてテルミンみたいに使うのが個人的にはオススメ。

twitter.com

ゲームパッド対応

twitter.com

v0.6.0で追加された機能です。 PCに接続されたゲームパッドの入力を取得し、テクスチャとして利用できます。

上の動画ではNintendo SwitchのProコンを使ってます。 最近のゲーム機のパッドはBluetoothでつながるので便利。

キー入力対応

twitter.com

v0.7.0で追加された機能です。 キー入力の状態を取得し、テクスチャとして利用できます。

頂点シェーダーに対応

twitter.com

v0.8.0で追加された機能です。 フラグメントシェーダーだけではなく、頂点シェーダーを利用した表現も可能になりました。

GLSLによるシェーダーアートの世界では、フラグメントシェーダーを利用するのが一般的です。 頂点シェーダーではより高度な技術を要しますが、使いこなせばパーティクルや線による表現が可能になります。

ファイル単位で設定を切り替えられるように

ファイルの先頭にJSON形式のコメントを書くことで、ファイル毎に設定を切り替えられるようにしました。 これにより、頂点シェーダーの描画モードをファイルごとに切り替えたり、特定のファイルでだけWebカメラを有効にするといったことが可能になりました。 また、必要なファイルでのみ各機能を有効にすることで、パフォーマンスを大幅に改善できました。

コメントで設定を切り替えるというアイデアは、VDMX等のVJソフトで用いられるInteractive Shader Formatを参考にしています。 こんなニッチな世界にも偉大な先人がいるものだ……。

glslify

v0.10.0で追加された機能です。 glslifyを用い、複数のGLSLファイルをバンドルして実行できるようになりました。

glslifyは、一言でいうとGLSL版のbrowserifyのようなものです。 GLSLは元来、includeのような機能はなく、すべてのコードを1枚のファイルにベタ書きする必要があります。 glslifyを用いると、自動でファイル間の依存関係を解析して連結してくれるため、GLSLの開発が圧倒的に快適になります。

また、npmにはglslify専用のGLSLライブラリが数多く公開されているため、ライブラリを用いた高度な表現がより簡単に行えるようになりました。

packages with keyword ‘glsl’ | npm

マルチパスレンダリング

twitter.com

v0.11.0で追加された機能です。 シェーダーは通常1フレームに1度実行され、レンダリングされた画像がそのまま画面に描画されますが、レンダリング結果にさらにエフェクトをかけたい場合など、1フレームに複数回実行することがあります。 これをマルチパスレンダリングと言います。

VEDAでは、各レンダリングパスの設定を表す配列でオプションに指定することで、マルチパスレンダリングを行えるようにしました。 当然マシンパワーはより必要になりますが、これによってレンダリング結果にエフェクトをいくつも重ねがけしたりできるようになります。

頂点シェーダ―/フラグメントシェーダーを組み合わせて使えるように

twitter.com

v0.12.0で追加された機能です。 頂点シェーダーの場合はフラグメントシェーダーの、フラグメントシェーダーの場合は頂点シェーダーのファイル名を指定することで、1回のレンダリングで両シェーダーを組み合わせて使うことができます。

上の動画では、頂点シェーダーでパーティクルを生成し、各パーティクルの色をフラグメントシェーダーで調整したあと、さらにマルチパスレンダリングによって画面全体にエフェクトをかけています。

Server Mode

twitter.com

v0.13.0で追加された機能です。 オプションの server にポート番号を指定すると、localhost上にWebサーバーが立ち上がります。 ブラウザでこれを開くと、シェーダーをAtomの背景ではなく、ブラウザ上で実行することができます。 ブラウザとAtomはWebSocketで通信しており、Atomでシェーダーを書き換えて実行すると、即ブラウザに反映されます。

この機能は、VEDAをライブコーディングイベントだけではなく、普通のDJイベントで使いたいという思いから実装しました。 ソースコードが表示されるのは、プログラマーからすると魅力的ですが、普通のDJイベントでは邪魔ですからね。

そういえば、ngrokとか使ってlocalhostに外部からアクセスできるようにすれば、お客さんのPCでシェーダーを実行するとかもできるかもしれない……？

実装の工夫

MIDI入力やキー入力等に関しては、ブラウザのAPIで取得したあとGLSLに渡すためにいろいろ工夫してます。 ToKyoto.jsで発表した以下の資料で解説してるので、よかったら見てください。

speakerdeck.com

今後

今後の新機能としては、OSCプロトコルへの対応などを考えています。 他に、VJ界隈でよく使われるTouchDesignerやVDMXを触ってみて、必要な機能を調査していこうと思ってます。

また、VEDAのGLSLエンジン部分を vedajs としてnpmにリリースしたので、近々こちらの解説記事も書くつもりです。

github.com

機能のリクエストや質問は @amagitakayosi までお気軽にご連絡ください！

AtomエディターでVJしました

f:id:amagitakayosi:20170925232054p:plain

先日予告した通り、この度VJデビューしました。
VJ行為には自作のAtomパッケージ glsl-livecoder を利用しています。

これまでのあらすじ

GLSLとは、OpenGLやWebGLといった3Dグラフィックスで用いられるシェーディング言語である。 シェーダーはその名の通りライティングや影の計算に用いられるが、単体でもパワフルなグラフィックス表現が可能であり、シェーダーアートという分野が存在する。 僕は今年GLSLにハマり、AtomでGLSLのライブコーディングできるパッケージを作った。 そしてこの度晴れてVJデビューすることになったのだ。

pastak生誕祭 @東京

初VJです。

動画は無音で失礼。

2時間半という長丁場なので、ライブコーディング成分は控えめに、普通にVJ素材を入れ替えつつGLSLでちょちょいとエフェクトをかける、という方針。 友人の誕生祭というフレンドリーな場であったため、途中でバグを踏んだらラッキーくらいの気持ちで臨んだ。

DJのうち一人がWindows95のアイコンをプリントしたTシャツでDJしていたので、おもむろにChromeを開いて Windows 95 で画像検索し、テスクチャとしてロードして背景に表示する、といったパフォーマンスも披露。

キャプチャ動画を見返してみると、f.luxを切り忘れて画面全体が黄色くなってしまっていたり、Atomをフルスクリーン表示するのを忘れてメニューバーが見えてしまっている……。

あんまりがっつりコードを書いたりエフェクトをかける余裕はなかったけど、初めての割に目立ったトラブルなくやり遂げる事ができて良かった！

SMTP++ @京都

わずか1週間後に2度目のVJ。こんどは2時間。

前回の準備不足を反省し、今回は担当DJのアイコンや写真をあらかじめ用意しておいた。 また、僕の前のVJがDJネームを画面いっぱいに表示してるのが良いなと思ったので、急遽SketchでDJネームを入れた画像素材を用意したりした。

f:id:amagitakayosi:20170925224907p:plain

今回はちゃんとAtomをフルスクリーンにしてたんだけど、途中ちょっと集中力が切れた時、いつものクセで Cmd + Tab を押してしまってChromeが表示されるという失態をさらしてしまった 😇

今回の会場は外国人観光客が多く、かつ何故かプログラマーの人が多くて、2回ほど「それってOpenGLでやってんの？」とか「なんて言語？GLSL？知らねえｗ」みたいに話しかけられて良い体験だった。よい旅を！

課題

今回のVJで、いくつかglsl-livecoderに欲しいと感じた機能がある。

まずは、映像を別ウインドウや別ディスプレイに表示する機能。 現在のglsl-livecoderではコードの背景に映像が表示される。 ライブコーディングという用途ではこれでバッチリだけど、普通のVJソフトとして使うにはコードが邪魔になるので、別ウインドウに表示する機能が必要なのだ。 別ウインドウにWebGLのキャンバスを置いたり、Fullscreen APIに対応することで実現できるだろう。 一時的にコードを隠す機能があれば尚良いけど、これは何も書かれていない新規タブを開くことで実現できる気がする。

あとは、任意のHTMLを表示できるようになったら良いなあと思った。 定番VJソフトのVDMXだと、テロップを簡単に流せる機能がある。 glsl-livecoderでもテロップを流したいけど、テロップだけのために専用の機能を作るのは筋が悪い気がする。 設定ファイルで表示したい .html ファイルを指定し、ユーザーが任意のJS/CSSを利用出来るようにするのが良さそうだ。 テロップしたかったらCSSとかmarqueeで良いしね。

あとは個人的に気をつけたいこと。

  • フルスクリーンにする
  • f.luxをオフにする
  • macをおやすみモードにして通知を防ぐ

なかなか忘れがち……MacBookProのパームレストにサインペンで書いとこうかな。。

まとめ

VJめっちゃ楽しかった！

今回は初めてだった & 時間が長かったので、普通に動画素材を使ってVJしたけど、GLSLだけで自力で映像を作るVJもやってみたい。 もっと短い時間で、テーマを決めて、レイトレーシングを使ってアニメーションをガリガリ作ってみたいなあ。

これからもガンガンやっていきたい！
VJやライブコーディングのオファーお待ちしてます！！！ 🔥🔥🔥⚡⚡⚡