【初心者向け】新POPを体験！TouchDesignerワークショップレポ

みなさん、こんにちは。マッピング協会の北本です。

今回は、11月19日に大崎で開催された TouchDesigner ワークショップ（初心者向け） に参加してきましたので、その様子をレポートしたいと思います。

本当は翌日の中級者向けワークショップにも参加したかったのですが、予約が遅く満席になってしまいました…😭
また来年リベンジします！

それでは、さっそく本題に入っていきましょう。

この記事では、それぞれの内容を簡単にまとめていきます。

1.基本操作方法

画面構成

作業する画面のことをTouchDesignでは、ネットワークと呼びます。

オペレーターのつなぎ方

マウスの操作方法

・左クリック：オペレーターの選択(shift＋クリックで複数選択)

・中央ボタン：画面の拡大・縮小

・右ドラック：範囲選択

・左ドラック：画面の位置移動

２．OPクリエイトダイアログの説明

左ダブルクリックで開くと、OP（オペレーター）の一覧が表示されます。

TouchDesignerはこの OP たちを組み合わせて作品を作ります。

ここでは代表的な 8 カテゴリを紹介します。

TOP
２D画像や映像の処理を行うOP。

CHOP
数値等を処理を行うOP。

SOP
3D形状を扱うOP。

POP
3Dパーティクル処理を行う OP。
⚠️これからはSOPではなく、POPを使ってくださいということでした。

今回メインで扱うOPです。

MAT
3Dオブジェクトに材質（テクスチャ）を適用する OP。

DAT
データ処理や外部デバイスとの通信に使用する OP。

私は「コードを書く場所」というイメージが強いのもあり、まだ使いこなせていません😅

Custom
外部プログラムを TouchDesigner 内で OP として使える。

３．TOPとCHOPに触れてみる

それではさっそく、TouchDesignerで制作してみましょう。

こちらの映像を制作していきます。

■ プロジェクトの準備

TouchDesigner を起動し、
Ctrl＋Shift＋S（Macは Cmd＋Shift＋S） で保存しておきます。

こまめに Ctrl＋S で保存しましょう！

■ 不要な OP を削除

右ドラックで全選択し、削除してください。

■ 上昇する白いラインを作る

１．ネットワーク上で左ダブルクリックし、Rectangle TOPを作成

２．「Common」タブの Resolution を 720×1280 に変更

３．「Rectangle」タブの Size を 1・0.025 に設定（細いラインが完成）

■ ラインを動かす（CHOP）

１．CHOP から Beat CHOP を作成

２．Beat CHOP の設定を変更する

３．Trigger CHOP で Beat の数値を使って0→1の変化に

４．Null CHOP を繋ぐ

■ ラインをアニメーションさせる

Trigger → Null の値を Rectangle TOP の Position へドラッグし、パラメータへリンクするとラインが上昇します。

⚠️別の色のオペレーター同士はつなぎ合わせることができません❌

このように、ラインが動くようになりました✨

■ モーションブラーをつける

１．Feedback TOP を配置

２．Over TOP で合成

Feedbackが軌跡の役割をしています。(前のフレームの記憶をしてくれるイメージです。)

Overは合成のために置いているため、このままでは、真っ白になってしまいます。

３．Feedback の直後に Level TOP を入れ、不透明度を下げる→ ラインの軌跡がきれいに残る

最後に Null TOP を置いて、このパートは完成です。保存忘れずに！

４．新しく追加されたPOPに触れる

続いて、TouchDesignerで新しく追加された POP を使い、3Dオブジェクトを表示します。

■ 3Dオブジェクトの作成

１．Sphere POP（球体）を作成

２．Noise SOP を接続 → ゴツゴツした質感にNoise タブで好みの形に調整してください。

■ アニメーションをつける

Sphere POP の Transform タブのTranslate 4D に 【absTime.seconds】と入力すると動き出します。

激しすぎる場合は、【absTime.seconds * 0.02】など、数値を小さくすると滑らかになります。

■ 質感調整

１．Facet POP を接続

２．Operationを変更すると質感が変化

■ Geometry COMP を使って描画準備

💡3Dは必ず以下の 4点セット で管理します。

• Geometry COMP

• Camera COMP

• Light COMP

• Render TOP

Sphere → Noise → Facet でできた形を Geometry COMP に入れます。

ノードを繋ぐ方法はもう一つあります。

ノードの口（入出力ポート）を右クリックすると、そのまま OPクリエイトダイアログを開けるので、そこから Geometry COMP を追加できます。

また、2つ目の Geometry COMP は、既に作ったものをコピー＆ペーストすると簡単です。

■ マテリアルを適用

MAT から

• Line MAT（ワイヤーフレーム用）

• Phong MAT（本体用）
  を作成し、それぞれの Geo COMP に適用します。

色は Phong MAT で調整できます。

Phong MAT を適用したほうの Geometry COMP の Scale を小さく調整します。

そうすることで、外側のワイヤーフレームの内側に本体のオブジェクトが収まり、ワイヤーフレームの中に立体が浮かんでいるような表現ができます。

■仕上げ

その後、Render TOPにBloom(グローを加えられる)やRamp(背景を入れられる)を加え、自分オリジナルでアレンジしてみてください。

最後に、最初に作った上昇ラインをSelect TOP → Over TOPで合成すれば完成です！

まとめ

今回のワークショップでは、この他にも3Dオブジェクトを組み合わせた応用的な手法にも触れられた。

複数ディスプレイの接続方法や、自作したコンポーネントをCOMPとして保存する手順など、実践的で役立つ知識を幅広く学ぶことができました。

初心者向けの内容ではありましたが、これまで知らなかった便利な機能や曖昧だった部分を理解し直す良い機会となりました。

TouchDesignerの基本構造への理解も深まり、今後の制作にしっかり活かせていけたらと思います。

以上、北本でした。

分かりにくい部分ありましたら、コメントお待ちしています！