TouchDesigner 節點家族總覽：TOP／CHOP／SOP 差別與變色香蕉實作練習｜IVD487 W02

TouchDesigner 節點家族總覽：七大 OP Family 與第一個變色香蕉

• TouchDesigner 介面的五大區塊各自做什麼
• 怎麼從線的流動判斷節點正在傳即時資料
• 節點邏輯為什麼只看 Output→Input、跟擺放位置無關
• 七大節點家族（TOP／CHOP／SOP／POP／MAT／DAT／COMP）的差別與代表節點
• 深色 Generator 與淺色 Filter/Effect 差在哪
• 怎麼用 LFO (CHOP) 綁參數，做出變色旋轉香蕉

一、操作環境：五大區塊

• 參數面板要留意 Tab。 有些功能會藏在第二或第三個 Tab，先熟悉哪個功能在第幾個 Tab，找起來才快。
• 時間軸是 Real Time 導向，跟 AE／Premiere 那種 Keyframe 邏輯不同；拿它做動畫會比較辛苦，但做即時互動最順。
• Palette 是資料夾概念：滑進去可以看到現成模組是用哪些基礎節點組成的，順便學它的思考邏輯。左側 image filter 裡就有把畫面 pixel 化、模糊、feedback 邊緣等效果（延伸：馬賽克與 Pixel Art：Limit TOP 與 Resolution TOP）。
• Operator Snippets 很值得逛。 在 Help 選單裡，它幾乎收錄了多數節點的範例網路，讓你看「這個節點能做什麼、怎麼接」，還能直接 Ctrl+C／Ctrl+V 複製出來用。

💡 用自己的電腦建議配三鍵滑鼠：左鍵拖曳平移、右鍵框選、滾輪縮放，操作 TouchDesigner 最順。觸控板也能用，只是切換數值等操作會卡一點。

二、讀懂預設網路：資料型別、即時傳輸、節點邏輯

• 紫色 TOP 通常是 2D 圖片或影片。
• 綠色 CHOP 通常是波形或數據資料，音訊也歸在綠色的 CHOP。

三、調參、建節點與連線：基本操作

1. 用滑鼠拖曳滑桿。
2. 點數字框手動輸入再 Enter。
3. 滑鼠中鍵點在數字上，跳出 10 / 1 / 0.1 / 0.01 級距選單，選好級距再拖（觸控板則是單指按住數值直到選單跳出）。大數值切換用 10，微調用 0.01——這招最好用，能一邊看畫面一邊逼近想要的值。

• 按 Tab 叫出 OP Create Dialog。
• 點左上角那個很小的加號。
• 在空白處按右鍵 → Add Operator。

• 快速連線： 先點第一個節點的 Output（線會黏在滑鼠上），再按 Tab 建下一個節點，線就會自動接好，一個接一個很快。
• 遠距離連線技巧： 點一下 Output 放開，線會一直黏著，這時可以用滾輪縮放、找到目標節點再接，不必一路按住拖。
• 斷線： 滑鼠移到線上按右鍵 → Disconnect。

• 旋轉是 0～360 度，不是 π 弧度。
• 顏色是 0～1（已正規化），1,1,1 就是白色。
• 同一參數的單位會影響級距：fraction（百分比）用小數值就有明顯變化，pixel 就要用大數值。

⚠️ 顏色已正規化（0～1）： 想沿用平常的 RGB（0～255）或 16 進位色碼，要自己先換算成 0～1 再填，不能直接貼進去。

⚠️ 空白鍵會暫停整個專案。 若發現所有節點都不動了，看下方暫停符號是不是亮橘色——再按一次空白鍵或按 Play 就恢復。

四、七大節點家族總覽（OP Family）

• 深色 = Generator：能自己產生資料，常當網路的第一個節點（如 Circle、Movie File In 左邊甚至沒有 Input）。
• 淺色 = Filter/Effect：對前面的資料做加工（如 Blur），一定要有前面的 Input 才能運作，不能單獨使用。

• CHOP 有三種常見資料：波形／長條圖（Constant 之類）與音訊。音訊功能拆得很散：Audio File In (CHOP) 只負責引入音檔，要聽到聲音得再接 Audio Device Out (CHOP)；想做 EQ 就插 Audio Filter (CHOP)（Low Pass 濾高音、High Pass 濾低音）。本週範例會用 CHOP 的數值去控制 TOP 的參數。
• SOP 是 CPU 的程序化建模，特點是非破壞性：可隨時移掉、Bypass 中間的節點而不毀掉最後結果。連 Particle (SOP) 粒子也在這個家族，但需要前面先有一個基礎圖形。
• POP 是較新的家族（深藍），完全基於 GPU 運算，同樣的東西 SOP 做十萬點會卡、POP 卻還能 60 FPS。本課不教（太新、用到的數學較多），但自學時建議 POP 優先於 SOP。
• MAT 節點很少，用來給 3D 物件上色貼材質，是輔助 SOP／POP 的。貼圖若破碎，多半是 UV 問題，到 SOP 單元會細講。
• DAT 最特別的是能寫 Python（如 Execute DAT），用來補基礎節點難做到的邏輯。這門課只會提一點點 Python。
• COMP 內部分成幾類：第一欄多與 3D 渲染有關（Camera／Geometry／Light）、第二欄用來自建 UI（Button／Slider）。Base (COMP) 是空資料夾，可以滑進去再建節點、無限往下巢狀。

⚠️ 灰底節點 = 不能用。 可能是 License 限制，或像在 Mac 上用不了某些 Windows 限定功能。

五、實作：變色旋轉香蕉

Movie File In (TOP) ─► Transform (TOP) ─► HSV Adjust (TOP) ─► Bloom (TOP) ─┐
                          ▲                                                 ▼
                LFO (CHOP) 綁 Rotate                    Over (TOP) ─► Out (TOP)
                                                            ▲
                                            Constant (TOP，背景色/底圖)

1. 建香蕉： Movie File In (TOP) 匯入香蕉（或自己的圖）。
2. 接變形： 後面接 Transform (TOP)，可先試 Rotate／Scale／Translate。
3. 接調色： 再接 HSV Adjust (TOP)，拉 Hue Offset 就會變色；下面兩個是 Saturation（飽和度）與 Value（明度）。
4. 綁旋轉： 建 LFO (CHOP)（Low Frequency Oscillator，低頻震盪器）。點它左下的 Viewer Active（小星號／加號），節點變綠可互動後，用左鍵把數值拖到 Transform 的 Rotate 上，選 Export CHOP 完成綁定。
• LFO 預設 -1～1 震幅太小、看不出旋轉，把 Amplitude 調成 360，香蕉就轉起來了。範例 Type 用 ramp（從 0 一路加到振幅值），也可換其他 Type；Frequency 調快旋轉就快。
• 想解除綁定：在該數值上按右鍵 → Remove Export。
5. 加光暈： 接 Bloom (TOP) 做炫光，常調 Bloom Intensity（亮度）、Bloom Radius（範圍）等，變成閃亮香蕉。
6. 加背景： 建 Constant (TOP)（單色節點，例如紅色），再用 Over (TOP) 把香蕉疊在背景上。背景也可以換成別張圖。

⚠️ Over 的兩個 input 順序不能反。 反了就會變成背景（海／底圖）直接蓋住香蕉，完全看不到前景。前景在上、背景在下。

⚠️ 兩張圖 resolution／比例要一致。 疊加時比例不同，香蕉會被壓扁。可在 Constant 的 Common Tab 把 Resolution 設成跟前景一致的比例（例如 16:9 的 1280×720）再疊。

💡 你也可以把 LFO (CHOP) 改綁到 HSV Adjust 的 Hue Offset 或 Saturation，讓香蕉一邊轉一邊自動變色。

常見問題 FAQ

課後練習

1. 變色旋轉香蕉（本週主範例）。 Movie File In → Transform → HSV Adjust → Bloom，用 LFO (CHOP) 綁 Transform 的 Rotate（Amplitude 調 360），最後用 Constant + Over 加背景。做完可換自己的圖與底圖。
2. 逛一遍七大家族。 打開 Help > Operator Snippets，各家族挑幾個節點看範例網路，感受「哪個家族處理什麼資料」。
3. 音訊播放鏈。 Audio File In (CHOP) → Audio Device Out (CHOP) 放出聲音，中間插一個 Audio Filter (CHOP) 試 Low Pass／High Pass，聽濾波差別。
4. 練調參手感。 用中鍵切 10 / 1 / 0.1 / 0.01 級距，配合 fraction 與 pixel 兩種單位調同一個位移，體會單位如何影響變化幅度。

影片章節