TouchDesingerについて、実際に手を動かして基本を学んでいこう。空間演出やインスタレーションを数多く手がける京都拠点のコレクティブ・SPEKTRAに、TouchDesignerのセットアップから、ノードをつなぐ基本操作、シンプルな表現の制作、実際の現場での活用事例までを紹介してもらった。

※本記事は月刊「CGWORLD + digital video」vol. 327（2025年11月号）掲載記事からの転載となります。

TouchDesignerとは？

TouchDesignerはノードベースのプログラミング環境であり、ある程度の処理をひとまとまりの「オペレータ」として扱い、それらをワイヤで接続することで構築していきます。専門的なプログラミングの知識がなくても比較的挑戦しやすい環境である点が特徴です。

プリレンダーの3DCGツールに慣れた人にとっては、「待たずに試せる」点が大きなちがいです。発想から検証までのサイクルが短く、短時間でアイデアを形にできるため、プロトタイピングに適した環境といえます。

オペレータとは？

オペレータにはいくつかの種類（ファミリー）が存在し、COMP、TOP、CHOP、SOP、MAT、そして新しく追加されたPOPがあります。いずれもパラメータやフラグを操作して処理をカスタマイズしていきます。

本記事で扱うものとしては、TOP（Texture Operators）は2D画像や映像の読み込みや加工、CHOP（Channel Operators）はオーディオ波形や数値信号の処理、SOP（SurfaceOperators）はベクターデータやポリゴンなどの3D情報の読み込みや加工、MAT（Material Operators）はマテリアルやシェーダに関する処理を行います。

何ができる？

TouchDesignerの大きな強みは、オフラインで長時間のプリレンダリングを前提とせずにCG映像を作成できる点や、ビルド工程なしでアプリケーションを動作させられる点にあります。そのため、開発時と本番利用時のプロジェクトの状態に大きな差がなく、直前まで修正が可能です。ライブコーディングのように常時実行しながら調整を加えられる点も実務に適しています。

また、多様な外部デバイスやセンサーとの連携に優れ、LiDARセンサーからの入力、DMXによる照明制御、MIDI経由でのAbletonとの連携、オーディオビジュアライゼーションなど、標準実装された通信プロトコルを通じて幅広い応用が可能です。

プロシージャルな構造であるため、処理のながれを途中段階で可視化できることも利点のひとつです。同じ素材から別のバージョンのコンテンツを展開したり、センサー入力を扱いやすかったりと、柔軟なコンテンツ制作を後押しします。

一方で、実行ファイルとしての書き出しができない、スマートフォンアプリやWebアプリを直接制作できないといった制約もあります。さらに、3Dレンダリングの精度においては、プリレンダー型のワークフローに一日の長があります。

SPEKTRAではVJ用途やレーザーのコントロール、LEDバーと音の連携、あるいは空間センシングなどに利用しています。現場では実際の環境での見え方や数値の反応を確認しながら微調整したり、必要に応じてコントローラ用のUIを作成するといったかたちで幅広く活用しています。

• 

• 

• 

• 

セットアップ

1.ユーザー登録

開発元DerivativeのWebサイト（derivative.ca）にてユーザー登録をします。この際、メールアドレスが必要になります。Derivativeのトップページから［MY ACCOUNT］を選択。

［SIGN UP FOR AN ACCOUNT］を選択。

各種情報を入力して［CREATE ACCOUNT］を押します。登録確認のメールが飛ぶのでメールを確認し、Derivativeのサイトにログインできることをチェックします。

2. ダウンロード・インストール

TouchDesignerを、利用したいPCにインストールします。インストールするには、Derivativeのトップページの中ほどにある、［GET TOUCHDESIGNER］を押します。

ダウンロードページに飛ぶので、自分のOSに合ったものをダウンロードします。

この際、注意しなければならないのはTouchDesignerのバージョンです。TouchDesignerには大きく分けて2つのバージョンが常に存在します。ひとつが上部のボタンからダウンロードできる「安定版」（ステイブル版と呼んだりします）、もうひとつが下部の［EXPERIMENTAL DOWNLOADS］からダウンロードできる「エクスペリメンタル（開発調整中）版」。

新機能として話題の「POPs」は2025年10月時点ではエクスペリメンタル版にのみ搭載されています。安定版は文字通り安定していますが、エクスペリメンタル版は新機能をいち早くテストできます。場合によってはエクスペリメンタル版を使うことになるので、バージョンには注意が必要です。

ちなみに［OFFICIAL DOWNLOADS］には過去の安定版がアーカイブされており、ダウンロードが可能。昔のTouchDesignerプロジェクトを開いて編集したい場合などに使用します。

3. 起動

初回起動時にはIDとパスワードを入力する必要があります。1.で登録したIDおよびパスワードを入力し、アクティベートするライセンス（ライセンスを購入していなければNon-Commercialライセンスのみ表示されている）を選択して起動します。

無事ログインできたら、どのライセンスを利用するかを選択します。選択したライセンスはオレンジ色にハイライトされ、選択状態であることがわかります。その状態で［Create Key］ボタンを押すと、ライセンスが有効化され、TouchDesignerを利用できるようになります。

完了すると、通常のスタート画面（サンプルのオペレータが配置されている）が表示されます。次回以降の起動では前回終了時のライセンスでそのまま起動するため、入力作業は不要です。

基本的な操作画面の名称

➀オペレータ：ひとつひとつが機能をもった箱。それらを接続して様々なしくみを制作していきます。

➁オペレータクリエイトダイアログ：オペレータを作成するためのダイアログ。ネットワークエディタ上で［Tab］キーまたはマウスの左ボタンのダブルクリックで表示します。

➂オペレータサーチボックス：オペレータ名を入力することで絞り込みができます。

➃オペレータタブ：オペレータのグループの切り替えを行います。クリックまたは［Tab］キーで切り替え。

➄パラメータウインドウ：オペレータのもつ機能の様々な設定を変更するためのウインドウ。選択中のオペレータのパラメータが自動的に表示されます。［p］キーで表示／非表示を切り替え。

➅ネットワークエディタ：作業場所。オペレータの配置や接続を行います。

➆タイムライン：アニメーションなどを行うため、TouchDesignerの中では常に時間がながれています。［Space］キーで一時停止／再開。

覚えておきたい基本操作

TouchDesignerのネットワークエディタは階層構造になっています。フォルダ分けするように、処理をある程度ひとまとめにして、その結果を上の階層で別の処理に入れる、という風に処理のながれを追いやすくなります。マウスはホイール付きの3ボタンマウスがオススメです。

階層を下がる

・オペレータをダブルクリック（中に入れるものと入れないものがある）
・マウスやタッチパッドでスクロールでズームイン
・［i］キー

階層を上がる

・マウスやタッチパッドでスクロールでズームアウト
・［u］キー

ネットワーク全体を表示する

・右クリック →［Home All］
・［h］キー

オペレータを作成する

オペレータクリエイトダイアログを開く

ネットワークエディタ上で［Tab］キーを押す、またはネットワークエディタ上の何もない場所でマウスの左ボタンダブルクリックでオペレータクリエイトダイアログが表示されます。

タブを切り替える

さらに［Tab］キーを押すか、タブをクリックし、必要なタブ内容を表示します。

オペレータを配置

配置したいオペレータをクリックし、さらに配置したい場所をクリックすると、オペレータが配置されます。

オペレータをワイヤで接続する

基本的なプログラムのながれは左から右へ。左のオペレータのアウトプットからドラッグしながらワイヤを引き出し、右のオペレータのインプットへドロップして繋ぎ込みます。

バナナを回してみよう

①オペレータクリエイトダイアログの［COMP］タブを選択し、［GeometryCOMP］を置きます。

②Geometry COMPをマウスのホイールボタンでズーム／ダブルクリック／選択して［i］キーでオペレータの中の階層に移動します。

③中にある［Torus SOP］を選択し［Delete］キーで削除します。オペレータクリエイトダイアログを開き、［SOP］タブから［Rectangle SOP］を選択し、配置します。

④Rectangle SOPの右下にある紫色と青色の丸印をクリックして有効な状態にします。

⑤マウスのホイールボタンでズームアウト／［u］キーで上の階層へ移動します。

⑥オペレータクリエイトダイアログの［CHOP］タブから、［Timeline CHOP］を選択して置きます。

⑦Timeline CHOPの右下の［+］マークを押すと、timelineの値が選択できるようになります。

⑧先ほどの［Geometry COMP］を選択してパラメータウインドウを表示させ、Rotateの真ん中の値に先ほどのtimelineの値をドラッグ＆ドロップで参照（CHOP Reference）させます。

⑨オペレータクリエイトダイアログの［COMP］タブから［Light COMP］、［Camera COMP］を置きます。

⑩オペレータクリエイトダイアログの［TOP］タブから［Render TOP］を置くと、オペレータウインドウ内にRectangleのジオメトリが表示されます。

⑪オペレータクリエイトダイアログの［MAT］タブから［Phong MAT］を置きます。

⑫オペレータクリエイトダイアログの［TOP］タブから［Movie File In TOP］を置くと、デフォルトでバナナの画像が表示されています。

⑬Movie File In TOPをPhong MATの上にドラッグ＆ドロップし［Parm: Color Map］を選択します。

⑭Phong MAT をGeometryCOMPの上にドラッグ＆ドロップし［Parm: Material］を選択します。

⑮Movie File In Top のパラメータウインドウにある［i］をクリックして、画像のアスペクト比を確認します（ここでは1.77:1の値を使います）。

⑯Geometry COMPの中に入り、中の［Rectangle SOP］のパラメータウインドウ上で、［Size］の2つ並んでいるうちの左の入力欄を先ほどの1.77にして、1.77:1のRectangleにします。

⑰上の階層に戻り、［Out TOP］を配置してRender TOPとワイヤで接続します。

⑱Out TOPの右下にあるdisplayフラグ（水色の丸）をONにします。

⑲3D回転するバナナが完成！

• 

• 

TouchDesignerの勉強法

TouchDesignerの勉強に役立つ各種リソースを一部紹介します。英語のものが多いですが、日本語もあります。まずは、これらを参考に「とりあえず深く考えずにつくってみる」ことから始めることをオススメします。

公式チュートリアル

・公式 User Guide「Tutorials」
公式の教科書。カリキュラムや初心者向けプレイリストへの導線が

まとまり、学ぶ順番を迷わず辿れます。

・公式「Tutorials」ポータル
コミュニティ投稿やイベント動画も含む更新型の一覧で、興味別に掘り下げて題材を見つけやすいです。ほとんどが英語ですが、豊富に学習資源がアップロードされているので、英語に抵抗がない方はこれらの中から始めてみましょう。最新情報が充実しており、英語がわからなくとも動画を見れば操作はわかるため、見よう見まねで操作に慣れることもできます。

・Operator Snippets
TD内蔵の「各OPの最小ネットワーク＋解説」1000+実例集で、右クリックやHelpメニューから開いて即動くサンプルを見てコピペすることができ、未知のオペレータで詰まったとき、答えに最短でたどり着くことができます。

森岡東洋志氏（SPEKTRA）のnote

Touch Designer Studyシリーズでは、大学の講義向けに制作したTouchDesignerのドキュメントを公開しています。BasicはTouchDesignerを扱うにあたっての基礎知識や基本操作を中心に紹介します。

YouTube

TDSW YouTube Academy（日本語・再生リスト）

UI／OPの基礎から小課題まで順番に学べる導線が整っており、#00から追うだけで迷わず基礎固めできます。TouchDesignerはノードプログラミングでマウス操作が非常に多く、特に初心者だと書籍や記事で使い方を見てもわかりづらいかもしれません。マウスの動きや操作がわかるチュートリアル動画や、つくったものがわかるサンプルファイル付きの動画がオススメです。

書籍

Visual Thinking with TouchDesigner プロが選ぶリアルタイムレンダリング&プロトタイピングの極意（ビー・エヌ・エヌ）

書籍から学びたい方には、日本語で最初に出版された解説書の第2版がオススメです。TouchDesignerが日本で大きく普及するきっかけのひとつになった書籍だと思います。

SPEKTRA制作事例《Interplay》

Information

《Interplay》
展示期間：2023年12月4日～2024年2月29日
場所：新風館（京都）
spktr.jp/2023/12/04/interplay

環境条件を活かした光と音のインスタレーション

《Interplay》は、2023年12月から2024年2月にかけて京都・新風館の中庭で展示された、SPEKTRAによるインスタレーション作品だ。草木や歩道が配された開放的な半屋外空間を舞台に、LEDチューブとハーフミラーを組み合わせた照明制御と、音楽アーティストSawa Angstromによるサウンドデザインを融合させている。

依頼時に提示された要件は「来場者が思わず足を止める体験を生み出すこと」というシンプルなものだった。SPEKTRAはこの条件を出発点に、中庭という具体的な環境をどう作品へ落とし込むかを検討。美術館のように完全にコントロールされた空間ではなく、自然光や周囲の喧騒が入り込む場であることを前提に、昼夜で異なる見え方を生み出す設計を行なった。

照明面での大きな挑戦は、日中でも色彩を鮮やかに見せることだった。そこでLEDチューブにハーフミラーを組み合わせ、外光を遮断しながら発光部分だけを観客に見せるしくみを構築。これにより昼間でも発色が保たれると同時に、消灯時には周囲の景色を映し込み、点灯時との差が新たな表情を生むことになった。

技術的な中核を担ったのはTouchDesignerである。複数のLEDやセンサーを統合的に制御するためのインターフェイスを構築し、光と音をリアルタイムに同期させるしくみを実装。環境条件に左右されやすい屋外空間において、プログラム的な柔軟性をもたせることで安定した運用を可能にした。

演出設計では、昼間には鏡の反射が周囲に溶け込む中に光が浮かび上がり、夜間には照明の存在感が強まり空間全体を包み込むように意図した。こうした光と環境、観客との相互作用が、時間帯によってまったく異なる体験を生み出す作品の特徴となっている。

こうして完成した《Interplay》は、指定された会場条件を制約として捉えるのではなく、むしろ創造の契機として取り込んだ作品だ。自然環境とデジタル制御が交錯する中庭において、光と音の相互作用を通じて新たな感覚を提示したインスタレーションと言える。

TouchDesignerを中核としたシステム構成

TouchDesignerによる制御と演出設計

• 

• 

• 

• 

詳細・ご購入はこちら