AtomでVJできるパッケージを作った #GLSL #livecoding

GLSLでVJやライブコーディングができるAtomパッケージを作りました。
その名も VEDA !!!

この記事では、VEDAの使い方や機能を説明します。

このパッケージでできること
機能一覧
インストール
- glslangValidatorのインストール
- VEDA本体のインストール
使い方
今後の開発

このパッケージでできること

AtomでこんなVJができちゃいます！

My first VJ live coding pic.twitter.com/j66MFGZfFO
— amagi (@amagitakayosi) 2017年7月31日

この動画は、先日僕が VEDA を使ってVJした時のものです。
動画素材や画像素材をロードしつつ、GLSLで加工したり動きを付けたりしています。
動画素材をロードしてMIDIコントローラーで操作きるので、コードをほぼ書かずにVJすることも可能です。

GLSLはOpenGLやWebGLといった3Dグラフィックで用いられる言語です。
GPUで実行されるため、高画質なグラフィックをリアルタイムに描画できるという特長があります。

AtomにはTidalCycles等、ライブコーディングで音楽を演奏するパッケージがいくつか存在しているので、組み合わせると一人でDJ/VJ両方できたりもします。
TidalCyclesについては以前記事を書きました。

amagitakayosi.hatenablog.com

機能一覧

VEDAは、GLSLファイルを実行してAtomの背景に表示するパッケージです。
linterやautocompleteといった既存のパッケージを利用し、快適なコーディング環境を実現しています。

GLSL実行環境としては、以下のような機能をもっています。

GLSL Sandbox互換の uniform 変数
音声入力対応
MIDI入力対応
任意の画像/動画をロードできる

インストール

glslangValidatorのインストール

VEDA の動作には glslangValidator が必要です。
先にインストールしましょう。

macOSの場合

macの場合はhomebrewでインストールできます。
homebrewが入っていない場合は、まず以下のページに従ってインストールしてください。

Homebrew — The missing package manager for macOS

その後、ターミナルで brew install glslang を実行すると glslangValidator コマンドを使えるようになります。

glslangValidatorを自分でビルドする場合は、21-3さんの記事を参考にしてください。
(21-3さんありがとうございます！)

r21nomi.log — Art & Tech log

Windows, Linuxの場合

glslangValidator はVulkan SDKに含まれています。
こちらからVulkan SDKをインストールしましょう。

LunarG® Vulkan™ SDK - What's in the SDK - Where to Download

Windowsの場合は C:/VulkanSDK/(バージョン番号)/Bin/ に glslangValidator がインストールされるので、こちらに環境変数PATHを通してください。

VEDA本体のインストール

Atomの設定画面、または apm より veda をインストールします。

Failed to require... というエラーが出た時

場合によっては以下のようなエラーが表示されるかもしれません。

Failed to require the main module of 'glsl-livecoder' because it requires an incompatible native module.
Run `apm rebuild` in the package directory to resolve.

この場合は、画面下部の虫アイコンをクリックし、 Rebuild Packages を実行してください。

使い方

VEDAをインストールすると、Atomに以下のコマンドが追加されます。

Veda:Toggle
- VEDA を起動/停止する
Veda:Load Shader (key: ctrl-enter)
- 現在のタブのGLSLファイルを実行する
Veda:Watch Shader (key: ctrl-shift-enter)
- 現在のタブを監視し、内容が変更されたら自動で実行する
Veda:Watch Active Editor (key: ctrl-alt-enter)
- アクティブなタブを監視し、 watch-shader を実行する
Veda:Stop Watching (key: ctrl-.)
- watch-shader と watch-active-editor を停止する

実際にサンプルコードを手元で動かしてみましょう。

まず、glsl-livecoder-examplesをcloneし、Atomで開きます。

git clone https://github.com/fand/glsl-livecoder-examples
cd glsl-livecoder-examples
atom .

コマンドパレットを開き、Veda:Toggle を実行してください。
VEDAが起動し、デフォルトのGLSLコードが評価されます。

f:id:amagitakayosi:20170804140250g:plain

このディレクトリにはサンプルコードが沢山入っています。
試しに sample2.frag を開き、 ctrl-enter で実行してみましょう。
GLSLが実行され、次のような画面になるはずです。

f:id:amagitakayosi:20170804145503g:plain

GLSLを書き換えて実行すると、すぐに反映させることができます。
例えば、7行目に p *= fract(time); を追加して実行すると、画面全体をアニメーションさせることができます。

f:id:amagitakayosi:20170804162040g:plain

次は動画のロードを試してみましょう。
video.frag を開いて ctrl-enter で実行すると、複数の動画がミックスされた画面が表示されます。

f:id:amagitakayosi:20170804162728g:plain

動画のパスは .liverc で指定しています。
.liverc を編集することで、任意の画像や動画をロードすることができます。
.liverc を保存すると即反映されるので、動画の入れ替えも簡単に行なえます。

// .liverc
{
    "IMPORTED": {
        // 動画ファイルは videos/ 内にに保存されている
        "video1": {
            "PATH": "./videos/1.mp4",
        },
        "video2": {
            "PATH": "./videos/2.mp4",
        },
        "video3": {
            "PATH": "./videos/3.mp4",
        },
    },
}