Touch Designer 直播挑戰 Vol.5｜用TD結合POPs系統製作跳舞海膽

直播挑戰#5 課程筆記
MONOLAB｜藝術 x 科技 x 教育

MONOLAB｜藝術 x 科技 x 教育

2025年12月8日 上午 7:44

TD直播課程筆記

課程概覽 (Course Overview)

  • 主題： 使用 TouchDesigner 的 POPs (Point Operators) 功能，製作 Keyang 海膽（一種多刺球體）的動態幾何視覺藝術作品。
  • 目標： 拆解複雜作品的製作思路，掌握 POPs 的基本概念與應用，學習如何將點資料轉換為複雜的幾何圖形（如錐體觸手），並在球體上進行複製與定位。
  • 關鍵技術：POPs 運算、Line Mattresses 取得線條方向、Lookup Channel 數據映射、Copy 複製幾何體、Skin 連接輪廓，以及基本的 3D 渲染設置（燈光、材質、SSAO）。
  • 資源： 官方 POPs 範例資料夾 (POPs example)、課程網站 (education.monolab.word)。

課程大綱 / Agenda 🗓️

  1. 開場與近況分享 (00:00:04 - 00:01:22)
    • 問候與暖場，確認音訊正常。
    • 介紹 Stream Deck (直播控制小工具)。
  2. 作品與理念分享 (00:02:44 - 00:11:28)
    • 分享近期每日/每週 TD 創作挑戰的成果。
    • 介紹靈感來源：喇叭星球 (Planet of Trumpets)、P5.js 外星生物、Noise + Particle 軌跡、音像互動實驗（如彩虹/筆跡的量化音色變化）、Lofi 車窗、聖誕樹等。
    • 分享累積的 TD 模組：Allbow Controller、攝影棚燈光組、Easing (E-Sync) 緩動函數、LUT 電影上色、Motion Blur、色彩管理、音訊分析等。
  3. 核心概念：POPs 介紹 (00:11:28 - 00:16:00)
    • 為什麼要用 POPs？
  4. 示範案例與步驟教學：製作海膽 (00:16:00 - 00:30:00)
    • 步驟一：建立單隻海膽觸手 (單根錐體)。
    • 步驟二：複製觸手至球體表面。
    • 步驟三：3D 渲染與後製設定。

核心概念與理論 ✨

1. 什麼是 POPs (Point Operators)? (00:14:33 - 00:15:54)

  • 定義： TouchDesigner 推出的一種新的 Operator 類型，即 Point Operator。
  • 重要性： 它將所有運算以 點 (Point) 為單位進行資料紀錄和操作，極大地優化了粒子和大量幾何體複製的效能和操作性。
  • 與傳統 TD/Shader 的差異：
    • POPs 之前： 需要撰寫複雜的 GLSL shader code，以 Pixel（像素） 為單位來組合數值，記錄點的位置、速度、顏色等屬性，過程繁瑣且難以維護。
    • POPs 之後： TD 官方將點的屬性（如位置 P、速度 V、法線 N 等）模組化，使用者可以直接透過 POPs Operator 以點為單位來操作資料，取代手動寫 Shader 的過程，大幅降低門檻。
  • 核心思路： 一個點點 (Point) 儲存一個資料包，方便針對單個物件進行操作與組合。

2. 製作海膽的幾何體思路 (00:12:27 - 00:13:40)

製作一隻海膽觸手（圓錐體）的過程是將抽象的資料（點的位置和大小）具象化為幾何圖形：

步驟幾何概念說明TouchDesigner Operator
1. 曲線定義一條線（軸線）決定觸手的路徑/形狀。Pattern CHOP $\rightarrow$ Chop to POP
2. 半徑定義沿線的圓圈群決定觸手各點的半徑大小（粗 $\rightarrow$ 細）。Pattern CHOP (Ramp) $\rightarrow$ Lookup Channel POP
3. 複製與定位圓圈沿線複製沿著軸線上的每個點，複製一個具有指定半徑的圓圈，並使其朝向線的方向。Circle SOP $\rightarrow$ Copy POP
4. 連接表面表面連皮將所有圓圈的外緣連續連接起來，形成一個有表面的圓錐體。Skin SOP

示範案例與步驟教學（Step-by-Step）▶️

步驟一：製作單隻海膽觸手（錐體）(00:16:00 - 00:26:18)

1. 建立觸手軸線與點資料 (POPs)

  1. 新增一個 Pattern CHOP (00:17:41) 作為觸手的形狀（軸線的 Y 值變動）。
    • 可調整 Taper 和 Face 參數使其看起來更「有機」。
  2. 將 Pattern CHOP 轉換為 POPs 點資料：Chop to POP。
  3. 在 Chop to POP 參數設定中，將 Channel Scope 設為 chan1，Attribute Scope 設為 P.Y (點的位置 Y 軸)，將 CHOP 的值灌入點的位置資訊。
  4. 設定 Range：Start 為 0，End 可設為 1 或 2，控制觸手的長度。

2. 確定圓圈的旋轉方向 (Tangent)

  1. 在 Chop to POP 之後，新增 Line Mattresses POP (00:21:09)。
    • 目的： 取得線段上每個點的 法向量 (Tangent)，即該點的行進方向。這是確保圓圈能沿著曲線正確對齊的關鍵。
  2. 在 Line Mattresses 中，我們主要使用其輸出的 Tangent 屬性。

3. 定義觸手的半徑 (Scale) 變化

  1. 新增一個 Pattern CHOP (00:23:11) (Pattern 2) 作為半徑（Scale）的變化曲線。
    • 將 Type 設為 Ramp (坡道)，並勾選 Reverse (反轉) $\rightarrow$ 數值從 1 變化到 0，代表從粗到細。
  2. 新增 Lookup Channel POP (00:23:59)。
    • Input 1 (Value to Lookup): 連接 Chop to POP 輸出。
    • Input 2 (Channel Table): 連接 Pattern CHOP 2 輸出。
    • 參數設定：
      • Lookup Index (取值依據)：選擇 Point U (點在線段上的索引值，0 到 1 之間)。
      • Output Attribute (輸出屬性)：選擇 Scale。
    • 結果： 將 Pattern 2 的值映射到軸線上的每個點，建立每個點的半徑 (Scale) 屬性。

4. 複製圓圈並連成錐體

  1. 新增一個 Circle SOP (00:19:40) 作為要被複製的幾何體。
    • 調整 Orientation 至 $YZ Plane$ (00:20:48)，確保圓圈垂直於線段在 $X$ 軸上的延伸方向。
    • 調整 Radius 使圓圈足夠小。
  2. 新增 Copy POP (00:19:43)。
    • Input 1 (Geometry to Copy): 連接 Circle SOP。
    • Input 2 (Template): 連接 Lookup Channel POP 輸出。
    • 參數設定：
      • Template Scale： 勾選，並選擇 Scale 屬性 $\rightarrow$ 將上一步計算的半徑應用到每個複製的圓圈上。
      • Template Rotate to Vector： 勾選，並選擇 Tangent 屬性 (來自 Line Mattresses) $\rightarrow$ 使圓圈沿著軸線曲線的方向旋轉。
      • Force Direction： 設為 $Positive X$ $\rightarrow$ 確保圓圈的法線對齊軸線的方向。
  3. 新增 Skin SOP (00:20:38)。
    • 連接 Copy POP 輸出 $\rightarrow$ 連接所有圓圈的外緣，形成一個連續的錐體。
  4. 新增 Normal SOP (00:25:56)。
    • 連接 Skin SOP 輸出 $\rightarrow$ 修正幾何體表面的法線，確保 3D 渲染時上色和光影效果正常。

步驟二：複製觸手至球體表面 (00:26:18 - 00:30:00)

  1. 新增一個 Sphere POP (00:26:18)。
    • 目的： 作為海膽的主體，提供複製觸手所需的點位和法線。
    • 可調整 Frequency 參數，控制球體上的點數（即觸手的數量）。
    • 可調整 Radius 控制海膽主體的大小。
  2. 新增 Copy POP (00:27:14) (Copy 2)。
    • Input 1 (Geometry to Copy): 連接 Normal SOP 輸出（單隻觸手）。
    • Input 2 (Template): 連接 Sphere POP 輸出（球體點位）。
    • 參數設定：
      • Template Rotate to Vector： 勾選，並選擇 N (Normal，法向量) 屬性 $\rightarrow$ 確保每隻觸手都朝向球體的正切方向（即球體表面外側）。
  3. 新增 Geo COMP (00:28:14) (Geometry) $\rightarrow$ 將完成複製的觸手群轉換為可渲染的 3D 物件。

常見問題 & 解決方案 💡

問題 (FAQ)原因與解決方案 (Solution)關鍵 Operator
複製出的圓圈方向錯誤，Skin 連接失敗圓圈幾何體的軸向與線段的軸向不匹配，或是 Copy 時旋轉方向錯誤。Circle SOP ($YZ$ Plane) $\rightarrow$ Copy POP (Template Rotate to Vector 設為 Tangent，Force Direction 設為 $+X$)
Skin SOP 渲染結果光影不正常幾何體的表面法線 (Normal) 缺失或錯誤，導致光線計算錯誤。Normal SOP (在 Skin 之後加入)
無法調整觸手從粗到細的漸變缺少將 Pattern 數值 $\rightarrow$ 點索引 $\rightarrow$ 輸出為 Scale 屬性的步驟。Lookup Channel POP (以 $Point U$ 為索引，輸出 $Scale$)
觸手數量過多或過少球體上的點數 (Vertex/Point) 決定了複製的次數。Sphere POP (Frequency 參數)
動畫看起來死板不自然缺少非線性的緩動 (Easing) 函數。應用 E-Sync (Easing) 函數模組。

練習任務 ✍️

  1. 改變觸手形狀： 嘗試調整 Pattern CHOP 1 的參數 (如 Frequency、Phase、Amplitude)，創造出波動、扭曲或螺旋狀的觸手。
  2. 改變半徑漸變： 調整 Pattern CHOP 2 的 Type（例如從 Ramp 換成 Sine 或 Gaussian），使觸手的粗細變化呈現不同的曲線。
  3. 材質與動態：
    • 為海膽加上 PBR Material，使其具有金屬或玻璃質感。
    • 利用 Noise CHOP 連結到 Pattern CHOP 1 的參數上，使海膽的觸手能夠動態生長或扭動。

總結 🚀

  • POPs 是 TouchDesigner 中處理大量點資料和粒子系統的強大新工具，能大幅提升幾何體操作的效率和複雜度。
  • 製作複雜的幾何體（如海膽觸手）的核心在於將 CHOPs（數值資料）巧妙地映射到 POPs（點屬性：位置 $P$、方向 $Tangent$、大小 $Scale$），再利用 Copy 和 Skin SOPs 進行具象化。
  • 透過重複利用功能模組（如 3D 燈光/攝影機組、Easing 函數），能顯著加快未來的創作速度。