draw(tokyo); #2でVJデビュー！（GLSLライブコーディング）

2025-04-16 event, CG, レイマーチング, GLSL, VJ, LiveCoding, function_draw, draw(tokyo), Sh4derJockey, Sound2Light

3/22に渋谷のCIRCUS TOKYOでオーディオビジュアルイベントdraw(tokyo);#2が開催されました。

私はとうふおさおいさんのVJとして出演し、Sh4derJockeyを使ったGLSLライブコーディングによるVJを行いました。

初めてのVJでしたが、オーディエンスの反応なども感じられて、とても楽しくVJできました。

想定外のトラブルはありつつも、全体としては満足できる結果になったので良かったです。

会場に足を運んでくださった皆さん、クルーやスタッフの方々、最高のイベントをありがとうございました！！

本記事では、VJのシステム構成、音楽と同期するための仕組み、当日の振り返りを紹介します。

#function_draw でGLSLライブコーディングによるVJを行いました！

DJは @toufu0301 さんでした！

会場に足を運んでくださった皆さん、スタッフの皆様、素敵なイベントをありがとうございました！！

（初VJにしてはうまくできたので良かった）

pic.twitter.com/tBe9KuVwoF
— がむ (@gam0022) March 22, 2025

パフォーマンスの動画

友人に撮影してもらった動画をつなぎ合わせたダイジェスト版はこちらです。

本番時のフルバージョンの画面録画です。

本番では処理落ちが発生してしまったため、処理落ちのないリハーサル時の動画も紹介します。画面の点滅も控えめなので、本番時より目に優しいと思います。

目指したもの

新千歳空港国際アニメーション映画祭で見た「パソコン音楽クラブ x Renard」のVJが最高すぎたので、これを目標にしました。

最初に2Dのパターンから作り、次に3Dのレイマーチング行うことで、少しずつ絵が完成していくビルドアップ的な要素を見せつつ、曲の盛り上がりに合わせて2Dと3Dの素材を組み合わせるという全体的なVJの構成を参考にしました。

何も無い状態から0からライブコーディングするわけではなく、シェーダーのベース部分を事前に作り込んでおいて、パラメーターやコンポジット処理をリアルタムに編集するような形式にしました。

初のVJだったので、なるべく失敗のリスクを軽減したいのと、曲に合わせて絵を変化させるために自分の余裕を持たせたいという意図があり、結果的に正解だったと思います。

VJのシステム図

VJで使用したソフトウェアやハードウェアを次の図にまとめました。

構成図

主要なソフトウェアは2つです。

Sh4derJockey
- GLSLでライブコーディングを行うためのソフトウェア
- マルチパスやテクスチャが使える
- MIDIコントローラーなども使える
Sound2Light
- 音を解析してBPMなどを取得できるソフトウェア
- Renardさんに教えてもらった

図には記載していませんが、GLSLのエディターとしてVSCodeを使用しました。

また、Sh4derJockeyの画面にVSCodeのコードを合成するため、OBSのクロマキー合成を活用しました。

さらに、VJ画面をHDMI出力する際にもOBSの全画面プロジェクター機能を利用しました。

VJの使用ソフトウェアは「パソコン音楽クラブ x Renard」とほぼ同じだと思います。

Sh4derJockeyのプロジェクト

Sh4derJockeyのプロジェクトはGitHubに公開しました。

github.com/gam0022/draw2

基本的なレイヤーは以下の3つです。

2Dのパターン
3Dのレイマーチングのライブコーディング用のシーン
3DのTranscendental Cubeの移植シーン

これらの3レイヤーをコンポジットのレイヤーで合成したり、複数レイヤーのポストエフェクトが重ねがけを可能にしました。

特にGlitchポストエフェクトは、色収差をベースにカスタマイズしたもので個人的にお気に入りです。通常の色収差は画面端ほど強度が強くなりますが、ボロノイやCyclic Noiseなどの複数のノイズパターンを合成して色収差ができるようにしました。ノイズの強度はMIDIコンで細かく制御できます。

最強にかっこいいGlitch🔥#function_draw https://t.co/RudBTR9vl4 pic.twitter.com/GGer0GO5eV
— がむ (@gam0022) March 25, 2025

Sh4derJockeyでのフォントの描画

フォントは以下の2種類を使用しました。

Sh4derJockeyにはフォントのレンダリング機能がないため、msdf-atlas-genを使ってフォントのアトラステクスチャを生成しました。

このツールはかねたさんに教えてもらいました🙏

msdf-atlas-genのGitHub ReleasesにはWindows用のビルド済みバイナリが配布されているので、パスの通った場所にmsdf-atlas-gen.exeを配置し、以下のように利用しました。

msdf-atlas-gen.exe -format png -uniformcellconstraint square4 -imageout "font_receipt_all.png" -font "レシートフォント.ttf" -allglyphs -type mtsdf
msdf-atlas-gen.exe -format png -uniformcellconstraint square4 -imageout "font_orbitron_ascii.png" -font "Orbitron-VariableFont_wght.ttf" -type mtsdf

以下のオプションを指定しました。

-uniformcellconstraint square4 : 等幅なアトラステクスチャにする
-type mtsdf : Multi-channel signed distance fieldを指定

msdf-atlas-genでは、フォントに収録されていない文字のスペースが詰められてしまうため、ASCIIコードとテクスチャアトラスのインデックスがずれる問題が発生しました。

この問題はGLSL側でインデックスをオフセットすることで対処しましたが、存在しない文字のテクスチャアトラスを空白として残すオプションがあると便利だと感じました。

フォントの描画（適切なUVを計算してアトラスをサンプリング）は、Renardさんのソースコードを参考にカスタマイズしました。

msdf-atlas-genが生成するテクスチャのアルファは滑らかなグラデーションになっていたため、2値化して使用するようにしました。

@@ -223,11 +223,11 @@ float Print_Char(vec2 uv, int id) {
         dist -= 0.5;
     }
     float sig = fwidth(dist);
-    float c = smoothstep(-sig, sig, dist) * col.a * float(id != 0);
+    float c = smoothstep(-sig, sig, dist) * step(0.5, col.a) * float(id != 0);
     if (Font_Style == STYLE_OUTLINE || Font_Style == STYLE_OUTLINE_ITALIC) {
         dist -= 0.2;
         sig = fwidth(dist);
-        c -= smoothstep(-sig, sig, dist) * col.a * float(id != 0);
+        c -= smoothstep(-sig, sig, dist) * step(0.5, col.a) * float(id != 0);
     }

また、msdf-atlas-genが生成するテクスチャは左上がインデックス0に対応しますが、参考にしたコードは左下に対応していたため、上下を反転する改造を行いました。

Sound2Light → Sh4derJockey のBPM自動同期システム

Sound2LightはOSC（Open Sound Control）プロトコルでBPM情報を他のソフトウェアに送信できます。しかし、Sh4derJockeyは外部からの情報をMIDIでしか受け取れません。

そこで、OSCからMIDIに信号を変換する仕組みをNode.jsで実装しました。

MIDI信号は7bit（0～127）の範囲でしか送信できないため、BPM情報を下位7bitと上位7bitに分割し、2つのMIDI CCチャンネルで送信しました。

仮想オーディオデバイスの必要性に気づかず試行錯誤しましたが、RenardさんのアドバイスでloopMIDIを導入して解決しました。

ソースコードをGitHubで公開し、READMEに使い方を詳しく記載しました。興味のある方はGitHubを見てください。

github.com/gam0022/osc-to-midi.js

オーディオインターフェイスの導入

DJミキサーからの音源を取得する方法がわからなかったため、@0b5vrさんに相談しました。その結果、Behringer U-PHONO UFO202というオーディオインターフェイスを購入しました。

UFO202を使用することで、DJミキサーのRCA出力から送られるアナログ音源をデジタル音源に変換し、PCに取り込むことができました。

UFO202にはRCA入力、RCA出力、そしてヘッドフォン用の3.5mmミニプラグ出力が搭載されています。

RCAの入力と出力をループするようにRCAケーブルで接続することで、PCで音楽を再生しながらマイクに入力することができました。これは、Sound2Lightを使ってBPM解析を行う際に非常に便利でした。

さらに、3.5mmミニプラグにヘッドフォンを接続すれば、再生した音楽をヘッドホンで聞きながら、マイクに入力ができます。

UFO202はUSB-AケーブルでPCと接続するだけで動作し、外部電源やドライバーのインストールが不要な点が非常に便利でした。

BEHRINGER 2入力2出力USBオーディオインターフェース UFO202

posted with カエレバ

MIDIコントローラーのボタン設定の苦労

KORGのnanoKONTROL2というMIDIコントローラーを使用しましたが、設定に苦労しました。

インターネット上にVJやMIDIコンの情報が少なく、試行錯誤が必要でした。最終的にはきなこ餅さんのアドバイスで解決できました🙏

以下にポイントをまとめます。

MIDI信号にはCC（スライダー）とNote（ボタン）の2種類があり、nanoKONTROL2の工場出荷時には全部CCになっている
- ボタンとしてMIDIコンをするためには、専用ソフト（nanoKONTROL2/KORG KONTROL EDITOR）でNoteに設定する必要がある
- nanoKONTROL2側に設定が書き込まれるので、PCごとに設定する必要はない（Logicoolデバイスのオンボードメモリのような感じ）
Windows10/11はMIDIデバイスを10個までしか認識できない問題があり、MIDI Driver Uninstall Utilityで不要なMIDIデバイスを削除する必要がある
- 自分の場合はKORG KONTROL EDITORがnanoKONTROL2を認識できない問題が発生した
- 参考: KORG nanoKONTROL2が認識しなかった話