【TouchDesigner】インスタンシングでインスタンスごとにテクスチャを変更する

2024/01/28に公開

この記事ではTouchDesignerのインスタンシングでインスタンスごとにテクスチャを変更する方法について解説します。利用したTouchDesignerのバージョンは2023.11340です。

作例として、Webカメラの映像から輝度に応じて割り当てるテクスチャを変更することで、アスキーアート風に変換するネットワークを作成しました。作例のTouchDesignerファイルはGitHubに置いてあります。

https://github.com/aadebdeb/TouchDesigner-InstancingTextures-Sample/tree/main

ネットワーク全体は以下のようになります。インスタンシングでグリッドの頂点に対して四角形のメッシュを配置しています。Webカメラの映像からテクスチャのインデックスを作成し、インスタンスごとにテクスチャを変更しています。これらをレンダリングした後に白い背景と合成しています。

インスタンスごとにテクスチャを変更するには、Geometry COMPInstance 2タブでInstance TexturesTexture Index OPTexture Indexを設定します。Instance Texturesにはテクスチャに使用するオペレータ名を、Texture Index OPTexture Indexにはインスタンスごとに使用するテクスチャのインデックスを格納するオペレータとそのチャンネル名をそれぞれ指定します。Texture Indexとして指定するチャンネルのサンプル数はインスタンスの数と同じにしておく必要があります。

作例のネットワークではInstance Texturesにテクスチャとして使用する5つのTOP(text1text5)を指定し、Texture Index OPTexture IndexにはWebカメラの映像から作成したインデックス(math1indexチャンネル)を指定しています。

Webカメラの映像からテクスチャのインデックスを作成するために、Monochorme TOPでグレイスケール画像に変換し、Fit TOPでインスタンシングに利用するグリッドと頂点数が同じになるように解像度を変更しています。TOP to CHOPでTOPをCHOPに変換した後に、今回は5つのテクスチャを利用するのでMath CHOPで0以上5未満の値にしています。


以下の記事を参考にしました。

https://qiita.com/aokey/items/8b498021769a1ebe7e0f

Discussion