【追記】
枠が空いていたのでTouchDesigner Advent Calendar 2022 8日目の記事として登録しました。
概要
REST APIで取得したデータをTouchDesignerを経由してResolumeで表示する方法について備忘録的にまとめています。
TouchDesignerと聞くとビジュアル生成などを思い浮かべがちですが、他の活用方法として様々な機器からのデータを処理して他の機器・ツールと連携させるという使い方もあります。
※TouchDesigner内部の話はあまり詳しくないので間違ったこと書いているかもしれません。
構成
- TouchDesigner
- Node.js
- REST API
- Resolume
- OSC
Node.jsでREST APIを叩き取得したデータをOSCでTouchDesignerへ送ります。
そのあと実際のテキストの表示はResolumeで行いました。
なぜNode.jsでREST APIを叩くのか
TouchDesignerでPythonが使えるのに何でわざわざNode.jsでREST APIを叩くのかと思った方もいらっしゃるかもしれません。
TouchDesignerは基本的には1つのプロジェクトをシングルスレッドで処理を行います（Engine COMPで別スレッドとして動かす場合は除く）。
つまり非同期で処理を行うと別の処理が一時的に止まってしまうので描画などのCookも止まってしまいます。
今回の要件としてデータを常にポーリングする必要があったため非同期処理での実装が必須でした。
そこで、非同期処理は別のツールにやらせてTouchDesignerはデータを処理し描画を行うことだけに集中させようという考えのもと実装を行いました。
色々と言語がある中でNode.jsを選んだ理由は、単純に私自身が日頃からJavaScriptを書いている点、Web上で操作できる管理画面を制作する上でNext.jsを使いたかったからです。
懸念点・課題点
RESTを叩いた後にOSCで送信を行っている都合上、本当に僅かですがREST APIをTouchDesignerで直接叩くよりもラグが発生することです。今回の場合は即時性・正確性がそこまで求められていなかったのですが、それらを求める場合にはNode.jsからファイルへ書き込みを行いTouchDesignerで読み込むという方法で実装するのをオススメします[1]。
Node.jsの実装
Node.jsでのOSC通信する方法やREST API叩く方法は世の中にとても参考になる文献がたくさんあるので割愛します。
今回使ったパッケージはoscとaxiosです。普段から使い慣れているのでこの2つを選定しました。
TouchDesignerの実装
Node.jsとResolumeからOSCを受ける
OSC In DATを使ってNode.jsとResolumeからOSCを受けます。
Node.jsからの受信
任意のアドレスに対してAPIで取得した配列データをTable DATに格納します。
今回は1次元のシンプルなデータだったので受け取った配列をそのままop("table").appendRows(args)でTable DATに追加すればOKです。
Resolumeからの受信
ResolumeはOSCのインプット・アウトプットの設定を環境設定で有効にすることでOSC通信を行うことができるようになります。今回はテキストを同時に2つまで表示したいという要件があったため、Text Clipの現在の再生状況を保持する必要がありました。そこで、Resolumeの下記アドレスを使って各クリップの再生状態をTable DATに保持する仕組みを作りました。
具体的には下記のようなデータがResolumeから送られてきます。
-
/composition/layers/1/clips/1/connected 1- 特定のクリップがコネクトされた時に送られてくる
-
/composition/layers/1/clips/1/connected 3- 特定のクリップのコネクトが解除された時に送られてくる
↑REST APIで取得したデータを格納するDATと表示フラグを保持するDAT
Node.jsから受けたデータをResolumeへ
Table DATにプールしたデータをResolumeへOSCで送信します。
OSCの送信にはOSC Out DATを使います。
今回は曲のBPMの拍に合わせてテキストを表示したかったので、Beat CHOPのpluseチャンネルを
CHOP Execute DAT で変更検知して1になった瞬間に、保持している表示フラグをチェックして表示できる状態であればOSCを送信するスクリプトを書きました。
ResolumeのText Animator Clipのテキスト入力アドレス宛にテキストを送信し、再生させたいClipを選択するようにOSCを送信します。ResolumeでOSCを使う際には公式サイトのマニュアル[2]にアドレス一覧が掲載されているのでこちらを参考にしてみてください。
Tips: ResolumeでUTF-8を扱う時の注意点
ResolumeでUTF-8の文字列を扱うときには環境設定のUse Arial Unicode MSにチェックを入れましょう。これにチェックが入っていないと日本語が表示できません。
またResolumeの言語設定を日本語にしないとText Animatorのテキストエリアの表示が□□□と表示されてしまいます。
おわりに
今回はコードの実装というよりは、Node.jsでREST APIを叩いてその結果をTouchDesignerで使うための1つの手法として記事にまとめてみました。
ビジュアルに関する文献はネットに多くありますが、データのやり取りに関する文献はまだまだ少なかったりするので、また他に何か実装したときに記事にまとめたいと思います。
Discussion