yoppa.org


前橋工科大学 – クリエイティブコーディング2024

TouchDesigner基本 2 – TOPを極める!

本日の内容

TOPを極める!

  • Derivative社提供のThe 100 Series: TouchDesigner Fundamentalsの中から102 – TOPs: Working with Imagesをやっていきます!
  • TOPsで画像 (Texture) を扱う様々な方法についてマスターしていきましょう!
  • ファイルのインポートからビジュアルFXの構築まで、画像やビデオをどのように扱うか、またTouchDesignerでどのように操作できるかについて
  • 今回は分量が多いのでビデオを観ることはせず、サンプルファイルを使用しながら直接学んでいきます
  • 後半は演習を行います!

[スライド資料]

TOP – 画像 (テクスチャー) を扱うオペレーター

TOPs 画像を扱う – 全体の流れ

  1. 画像ファイルを扱う
  2. 動画ファイルを扱う
  3. 画像の補正
  4. 形と色
  5. 画像合成の基本
  6. マットとマスク
  7. パターンの生成
  8. コンテンツのルーティング
  9. Bloom (光沢) エフェクト
  10. フィードバックループの作成
  11. ライブ入力
  12. 画像と動画の保存

102-1 Working with Image Files (画像ファイルを扱う)

  • テクスチャオペレータ(TOP)は、リアルタイムでGPUベースの合成と画像操作を提供する
  • Movie file in TOPは、ムービーと静止画の両方をTOPにロードするために使用する
  • はじめに、画像ファイルを読み込んでから、インタラクティブビューワを使って画像を詳しく見ていく

サンプルファイル

102-2 Working with Video Files (動画ファイルを扱う)

  • このビデオでは、Movie File In TOPを使用して、動画を読み込みや動画の再生と制御に関する重要な事項について見ていく
  • Movie File In TOPには、ユーザーがファイルの再生モードを制御できるパラメータがある (シーケンシャル、タイムラインにロック、インデックス指定)
  • TouchDesignerでは動画のフレームレートを「image per second」または「サンプルレート」と呼ぶ
  • ファイルのサンプルレートは、Index指定モードを使用する場合に特に重要

サンプルファイル

102-3 Adjusting Images (画像の補正)

  • TOPを使って画像を補正するいくつかの異なる方法を見ていく
    • Level TOP
    • HSV Adjust TOP
    • Edge TOP
    • Open Color IO
    • Monochrome TOP
    • Composit TOP

サンプルファイル

102-4 Shapes & Colors (形と色)

  • 入力画像を扱うだけでなく、TOPでいくつかの基本的な図形を作成することもできる
    • Circle TOP
    • Rectangle TOP
    • など
  • この例では、回転するインジケータ、多角形、ビネット、ドロップシャドウ付きのボタンを作成する方法を見ていく

サンプルファイル

102-5 Basic Compositing (合成の基本)

  • コンポジット (画像の合成) は、リアルタイムグラフィックスを扱う際によく使われる操作
  • 背景の追加、グラフィックの合成、画像のブレンドなど
  • Composite TOP
    • 2つ以上の画像を合成、ブレンドモードがある
  • 2つのTOP入力に対して単一のタイプの演算を実行するTOPもある
    • Add TOP, Subtract TOP, Multiply TOP

サンプルファイル

102-6 Mattes & Masks (マットとマスク)

  • マットとマスクは、トランジション、レイアウト、さらに複雑な合成を作成するためによく使用される
    • Matte TOP
  • Composit TOPやMultiply TOPでエレメントをマスクできることはすでにみた
  • さらに、Matte TOPを使って、より複雑なコントロールすることができる

サンプルファイル

102-7 Building Patterns (パターンの生成)

  • TouchDesignerでは、TOPを使ってパターンを作成する方法が数多くある
  • Tile TOPは反射または鏡面された重なり合うパターンを作成するために使用
  • Mirror TOPは万華鏡のようなタイル状のパターンを作成するために使用
  • Composit TOPにはトランスレート・ステップという便利なパラメータがあり、トランスレートとタイルの両方のパラメータを使用することで、タイルブロックを構築し、それを調整することで詳細な繰り返しシーケンスを作成することができる

サンプルファイル

102-8 Routing Your Content (コンテンツのルーティング)

  • オペレータ信号のルーティングは、ワイヤとリンクの両方で行うことができる
    • Cross TOPとSwitch TOPは、オペレータワイヤを使用
    • Select TOPはリンクを使用
  • Null TOPは、時間を節約し、ネットワークの変更を簡単にする
  • In TOPとOut TOPは、TOPネットワークを他のコンポーネントを通してルーティングするために使用される

サンプルファイル

102-9 Creating a bloomEffect (Bloomエフェクトの作成)

  • 高速ブルーム(光沢)フィルタの例

サンプルファイル

102-10 Creating a Feedback (フィードバックの作成)

  • Feedback TOPは、無限再帰ループを作成することなくフィードバックループを作成できる
  • 軌跡の描画、パターン生成、その他の視覚効果の作成方法

サンプルファイル

102-11 Live Sources (ライブ入力)

  • Video Device In TOP: ライブビデオをキャプチャする
  • Video Device In TOPは、コンピュータ上でローカルにビデオストリームを公開する他のアプリケーションとも連動できる
  • OBS、Notch、Snap Camなど
  • NDI In TOP、Syphon Spout In TOP、Video Stream In TOP、WebRTCはTouchDesignerでライブビデオを受信する他の方法

サンプルファイル

102-12 Saving Images & Video (画像と動画の保存)

  • 動画の保存: ファイルメニューから利用できるムービーエクスポートダイアログを使用するのが最も簡単
  • よりカスタムな書き出し処理を行うには、Movie File Out TOPを使うこともできる
  • 書き出しのコーデック、圧縮、フィールド、マルチチャンネル、メタデータ、色深度、オーディオコーデック、ビットレートを設定可能

サンプルファイル

本日の実習

本日の演習: タイル + フィードバックで遊んでみる!

height:420px

アンケート

本日の演習に参加した方は以下のアンケートに答えてください。