Zenn
📽️

TouchDesignerでジェネ系VJをはじめる

2024/12/03に公開
TouchDesigner
vj
tech

はじめに

この記事は #VJアドベントカレンダー2024 Advent Calendar 2024 3日目の記事です。

自己紹介

しょーち(@shoch0922)という名義で活動しています。
個人としてTouchDesignerでVJをしています。

VJを始めてまだ1年半くらいですが、自分はいわゆる「ジェネ系」と言われるリアルタイムレンダリングを軸にVJをしています。

この記事は「ジェネ系VJ気になってたけど中々手が出せてない…」そんな方向けに、TouchDesignerでジェネ系VJをはじめる時に便利なオペレーターや私が実際にVJをする時に意識している実装、先人たちの神資料などを少しだけ紹介します。
※ 完全に私見を語ってる部分もあるので、そのあたりはご容赦ください！

オーディオリアクティブ編

実装的なこと

ジェネ系VJの醍醐味(?)でもあるオーディオリアクティブのベース実装はPaletteに入ってるaudioAnalysisを使用しています。
AudioFilter CHOPなどで自前実装するのも文献が豊富で難しいことではないですが、UIも含めて提供されているので絵作りに時間を使うためにここはPaletteの機能を使います。

私の場合はaudioAnalysisに波形をINする前にAudio Dynamics CHOPを挟んでゲインを多少操作できるようにしています。

スライダーをMIDIコンにアサインすることで、本当に困った時以外はオーディオインターフェイスを触らなくてもある程度入力ゲインをいじれるようにすることで音源による微妙な差に対応することができます。

あとはaudioAnalysisが解析したデータを使ってSwitchします。

https://www.youtube.com/watch?v=zHgZuDADjNw

キックなどをそのままトリガーにするだけでは単調な絵の切り替わりになってしまうので途中の拍をうまく間引いたりしながら差を作っていきます。

https://youtu.be/vYmc7MIpZoY

拍子に合わせるだけでなく、ゲインの大きさなどもオーディオリアクティブでは扱いやすいデータだと思います。rawな波形をAnalyze CHOPを使ってRMSPower(二乗平均平方根)を取って音量を解析します。

解析した音量をSOPのスケールなどのパラメータに割り当てると音に合わせて大きさが変わるような映像をつくることができます。

私見

オーディオリアクティブを実装する時に私は、「全てをオーディオリアクティブに頼りすぎないようにする」を意識しています。
いわゆる「音ハメ」はうまくいくととても気持ち良いですが、タイミング(その時に流れてる曲や場内の雰囲気)によって映像を展開させたくない場合もあります。
そんな時のためにオーディオリアクティブをオフにする機能であったり、MIDIコンからの操作を優先的にパラメータへ割り当てるような仕組みを実装しておくとその時出したい映像が出しやすくなると思います。

ポストプロセス/エフェクト

ポストプロセスやエフェクトは3Dのシーンを華やかにするのに欠かせない実装だと思います。
3DシーンにかけているポストプロセスやVJプレイ中にかけるエフェクトについて紹介します。

Bloom

少し前まではBloomをかけるOPはTouchDesigner純正では実装されていなかったのですが（Paletteにはありました）、
Bloom TOP なるものが実装されています。実装された当初はついに来たか！みたいな感じで話題になりました。
パラメータの説明になってしまうので詳細は割愛します。

なんちゃってDoF

Depth of Field（DOF）はカメラの被写界深度を再現するポストプロセスです。
今回は「なんちゃってDoF」です。Depth TOPとLuma Blur TOPで作る簡易的な実装を紹介します。

Render TOPからDepthを取得しDepthをいいボケになるようにLevelTOPで調整を行い、そのDepthTextureを使ってLuma Blur TOPでぼかします。

ソース画像
ソース画像
ぼかし後
ぼかし後

この実装だとフォーカス位置を変えたりするのは難しいです。
そのような実装を行いたい場合は、最後に出てくる「神資料」を参考にしましょう！

その他エフェクトたち

ポストプロセス以外にもエフェクトは色々と準備しています。
Mirror、Tile、Glitch、RGB Shiftなどなど…。

特にMirror TOPを使った鏡効果は、オーディオリアクティブなシーンと組み合わせると偶発的な模様ができたりして万華鏡のような見た目の映像がとても楽しいです。


Mirror TOPを3個使った実装例

エフェクトの出し分けは単純にSwitch TOPで実装を行います。

私見

ポストプロセスは正しい実装(?)をする場合はオペレーターを使わずにシェーダーで実装したほうが早い場合がほとんどなような気がします。
今回紹介した「なんちゃってDoF」のように理論的には正しくないがそれっぽい絵は出せれば良いと言う時と論理的に正しい実装をしたい時と場合分けして実装を変えるみたいなことをしています。

エフェクトに関しては日頃からいいなぁと思ったエフェクトを収集しておきTouchDesignerに実装するみたいなことを繰り返します。
用意したけど今回は雰囲気に合わないから使わないみたいなこともありますが、そのあたりは考えずにとりあえず実装しておくと本番時に助かることもあります。
また、エフェクトはMIDIコンでパラメータをある程度いじれるようにしておくと楽しいです。

神々の資料たち

これまで様々なことを紹介しましたが、もちろん全てが自分独自の実装ということではありません。
TouchDesignerを触っているとわからないことがたくさん出てきます。
そんな時には神々たちが公開してくださっている文献を参考にしましょう。

  • Hossie TouchDesigner PostEffects
    https://backspace.tokyo/research/hossie-touchdesigner-post-effects/
    ホッシーさんが公開されているPostEffects Toxです。
    シーンがリッチになるようなポストプロセスがたくさん公開されています。

  • 比嘉さんがHEXPIXELSのライブで使ったVJシステム
    http://satoruhiga.com/TDWS2018/summer-holiday/
    VJシステム全般の参考になります。（これを公開してくださってる比嘉さん本当にすごいです）

  • 映像音響処理概説 2019
    http://satoruhiga.com/TDWS2019/
    こちらも比嘉さんが公開されている資料です。
    TouchDesignerの基本からGLSLまで網羅的に学習することができます。

  • wgld.org
    https://wgld.org/
    普段はフロントエンド書いているのでWebGL書く時に大変お世話になっています。
    GLSLの書き方やそもそもシェーダーとは？を学べるサイトです。

さいごに

TouchDesignerでジェネ系VJを始めるための基本的な実装や自分が普段している実装について簡単にまとめてみました。
私自身VJを始めてまだ1年半くらいしか経過していないので、まだまだこれからな部分も多いですがこの記事が何かの参考に、そしてジェネ系VJに少しでも興味を持っていただけるととても嬉しいです。

さいごのさいごに(来年の抱負)

来年はプリレンダVJや1人オーディオビジュアルなど色々と挑戦したいと思っているので、Xやリアル現場などで色々と交流などできると嬉しいです！

Discussion