Bonus：多媒體互動展演技術規劃：HDMI 傳輸距離、佈線與電力計算實戰｜IVD487 W18
一場互動展演在現場能不能順跑，關鍵不在軟體，而在基礎設施。這篇以體感作品「地面鬥技場」為範例，一層一層把技術規劃圖填滿：USB 線材與速度、顯示三大類、投影機規格、HDMI 傳輸距離解法、影像分配、音訊 PA、網路協定、電力計算、佈線與遠端監控。附多張對照表與章節時間戳，規劃前掃一遍就能跟廠商對得上話。
TouchDesigner MediaPipe 手勢辨識實作：Blob Track 追蹤與 Face AR 濾鏡｜IVD487 W12
想用 TouchDesigner 做即時手勢辨識？這篇整理互動控制第三堂的兩條路線：OpenCV 的 Blob Track 色塊追蹤（Resolution 降解析度、Edge 保輪廓、DAT to CHOP 轉資料），以及 Google MediaPipe 的 AI 辨識——手勢魔法方塊與 Face AR 濾鏡。附 Blob Track vs MediaPipe 對照表、DAT to CHOP 設定步驟與章節時間戳，上完課回來掃一遍就能接回來。
🧰 TouchDesigner 工具庫 ｜ Luxmin Institute on Patreon
我們把接案與展場現場累積下來的 TouchDesigner 元件、專案檔與製作系統，整理發佈在 Patreon，部分工具與 Demo 免費開放下載。
→ https://www.patreon.com/cw/LuxminInstitute
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
我們把接案與展場現場累積下來的 TouchDesigner 元件、專案檔與製作系統，整理發佈在 Patreon，部分工具與 Demo 免費開放下載。
→ https://www.patreon.com/cw/LuxminInstitute
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
TouchDesigner MediaPipe 手勢辨識實作：Blob Track 追蹤與 Face AR 濾鏡
上一週走的是實體感測器，這一週是互動控制系列的最後一堂，主題換成 AI：先用 OpenCV 的 Blob Track 做色塊追蹤，再用 Google MediaPipe 做手勢與臉部的即時辨識與視覺效果。
關鍵觀念先講：Blob Track 認的是「色塊」，MediaPipe 認的是「這是手、這是臉」。 前者基於 pixel、什麼都能追但不知道追到的是什麼；後者是預訓練的 AI 模型，直接給你有語意的點。搞懂兩者差別與資料怎麼轉，就能把辨識訊號接進任何互動。這篇是重點整理，上完課回來掃一遍就能把流程接回來。
讀完這篇你會知道：
- Blob Track 與 MediaPipe 差在哪、什麼時候用哪個
- 為什麼 Blob Track 前面要加
Resolution (TOP)與Edge (TOP) DAT to CHOP的三個關鍵設定- 怎麼把追蹤點畫成一個會跟著動的框線
- 手勢魔法方塊與 Face AR 濾鏡是怎麼組出來的
本週登場節點速查：
家族 | 節點 | 這週的用途 |
TOP | Movie File In／Resolution／Edge／Noise／Blob Track／Over／Render／Switch／Video Device In／Body Track／Face Track | 影像輸入、前處理、色塊追蹤、渲染、疊圖、切換 |
CHOP | Blob Track／DAT to CHOP／Select／Null／Math／Count | 把追蹤表格轉成 channel、選值、運算、累加 |
SOP | Rectangle | 要被 instance 複製的方框幾何 |
COMP | Geometry／Camera | 3D 容器與鏡頭（改 orthographic） |
MAT | Line | 讓方框以線框呈現的材質 |
.tox 元件 | MediaPipe | Google AI 辨識（手／臉／姿勢／分割） |
一、OpenCV 與 Blob Track：它在追什麼
OpenCV 是一套開源的電腦視覺函式庫（由 Intel 在 2000 年釋出），GitHub 上就找得到，常用來做辨識、分割、臉部偵測。TouchDesigner 只整合了其中少數效果，最常用的就是 Blob Track——它在 TOP 與 CHOP 兩個家族都有，TOP 版最直接。接法很單純：在影像後面接一個
Blob Track (TOP)，它下方會多出兩個 DAT 表格，記錄追蹤到的每個色塊：uv（等同 x／y）、width、height、ID，以及 lost／active／expired 狀態。它追的是「色塊（blob）」，所以：- min／max blob size 決定辨識範圍。 設太大框會消失（辨識不到）、設太小也抓不到；用
Noise (TOP)造隨機圖來試最清楚——整張圖縮小，相近色塊變多，blob 數量就跟著變多。 - lost／active／expired 是它的隱藏優點。 物件被短暫遮住會進入 lost，一定時間內追回來時 ID 不變，等於真的認得「還是同一個東西」。這也是 Lidar 人流追蹤常配 Blob 的原因——先拿到位置，再拿 x／y 去做後續轉換。
二、前處理：Resolution 降解析度、Edge 保輪廓
Blob Track 是完全基於 pixel 運算的，影片一大（例如 1920×1080）就會超級慢。標準前處理是兩步：Resolution (TOP)把 output resolution 降到約 1／8——畫面變糊，但對色塊辨識幾乎不影響，跑起來順很多。Edge (TOP)做邊緣預處理，只保留想要的輪廓、去掉多餘的顏色雜訊，讓 blob 更乾淨。
⚠️ 順序別接反：Resolution → Edge → Blob Track。先降解析度、再抽邊緣，最後才丟進追蹤。
💡 大影片先加 Resolution： Blob Track 吃 pixel，原始大檔直接跑會卡到不行。養成習慣：追蹤前先Resolution (TOP)降到 1／8。
⚠️ Blob Track 只追到兩個點？ 舊版 TD 的非商業版本 blob tracker 最多只有兩個追蹤點；近期版本已移除這個限制，追蹤數量無上限。回去記得把 TD 更新到最新版（右上角綠色 update 會帶你到官網）。
三、DAT to CHOP：把追蹤表格轉成 channel
Blob Track 給的是一張 DAT 表格，要拿去渲染得先轉成 channel。用 DAT to CHOP，但預設會把「每個橫排（row）」當成一個 channel，這不是我們要的——我們要的是「每個直行（column）」各自是一個 channel（id、u、v、width、height…），才能把 channel 餵給 instance。三個關鍵設定：
設定項 | 改成 | 為什麼 |
Channel per Rows | Channel per Column | 讓每個直行（column）各自成為一個 channel，而非每個橫排 |
第一個 Row | name | 最上面那排當 channel 名稱（id／u／v／width／height…） |
第一個 Column | value | 指定哪一行的數值當 channel 的實際值 |
轉好之後，後面接
Select (CHOP) 取需要的資料就好——例如選 u 跟 v 當待會 Rectangle (SOP) 的 x／y 值。📺 影片段落：14:03四、畫出追蹤框：Rectangle → Geometry → Render → Line
有了 u／v，就用 W 前面做 3D 物件的老套路把追蹤點畫成框：
Rectangle (SOP)→Geometry (COMP)→Camera (COMP)→Render (TOP)。- 不用燈光，但要給材質
Line (MAT)（賦予到Geometry的 material），讓方形以線框呈現。 - 在
Geometry打開 instance，把前面的Null (CHOP)（資料鏈的最後一個節點）拖進來，u 給 x、v 給 y——框框就會跟著追蹤點動。 - 再把 width／height 分配到 scale x／scale y，框的大小就跟著色塊變。（偷懶版：scale x、y 都用 width，保證是正方形。）
Camera 改 orthographic、對位 bottom left。 預設
Camera (COMP) 是 perspective（透視），會因距離改變物件大小；但追蹤資料是平面的，改成 orthographic（正投影，不論遠近同尺寸就同大小），並把對位點設 bottom left、scale 設 1，坐標才會貼近原本影像的辨識座標。最後把原圖用
Over (TOP) 疊回來（記得把渲染框調到上層），再用 Math (CHOP) 微調 u／v，讓左邊畫的框對齊右邊辨識的框。剩下的就是慢慢校位的例行細節。（線條版本同理，只是改用選取 line 的資料去連點成線。）五、Blob Track vs MediaPipe：什麼時候用哪個
Windows＋Nvidia 顯卡的機器，其實內建
Body Track (TOP) 與 Face Track (TOP)，把 Video Device In (TOP) 接進去就能用；但 Mac 沒有 Nvidia，跑不了這兩個節點，所以改走跨平臺的 MediaPipe。MediaPipe 是 Google 開發的開源 AI 辨識庫，最大優勢是跨平臺——Windows、Mac、手機、甚至網頁都能跑，內建臉部 mesh、手勢、手部關節、身體骨架、圖像分割（segmentation）等多種辨識。本課用的是社群大神 Torin 做的 TD 整合套件（GitHub 搜 mediapipe touchdesigner 即可），把對應辨識點一點就自動接好。ㅤ | Blob Track | MediaPipe |
原理 | 基於 pixel 的色塊（blob）追蹤 | Google 開源 AI 辨識模型 |
追蹤對象 | 任意色塊／輪廓，不認得「那是什麼」 | 臉、手、姿勢、手勢、分割等具語意的對象 |
前處理 | 需 Resolution 降解析度＋Edge，否則吃效能 | 載入 .tox 即用，點對應辨識自動接好 |
平臺 | 通用 | 跨平臺（Win／Mac／手機／網頁），Mac 也能跑 |
適用情境 | Lidar 人流追蹤、社群感的框線視覺 | 手勢控制、AR 濾鏡、骨架互動 |
⚠️ MediaPipe.tox 要第一個 download： 核心MediaPipe的 .tox 檔很大，存進專案容易 crash，所以老師把它移除、要用時再從 media pipe／toxes 資料夾把它拉進來，且它一定要排在最前面、後面配套的 1～9 個檔都要有。刪節點時先按 xx 再 delete 比較安全。
六、實作一：手勢魔法方塊
把
MediaPipe 的紫色 output 拉進來、點 detect hands，就能拿到兩隻手的資料。這個方塊做三件事（注意：h1／h2 沒有左右手之分，看誰先被辨識到）：- translate（定位）： 用
Math (CHOP)算兩手 x／y／z 的平均值（＝兩手中點），分配給 x／y／z。兩手等距左右張開時中心幾乎不動。 - scale（大小）： 選
hand distance（雙手距離）當 scale，並加一個條件——兩手都 active 才觸發，否則 scale 給 0（方塊完全看不到）。 - rotation（旋轉）： 取 h1、h2 的 rotation 做平均給 x／y／z（三軸同值，會一起轉，屬簡易做法、不算精確）。
數值再用
Math (CHOP) map 到適合畫面的範圍（例如 translate 到 -3.5～3.5、scale 到 0.5～3.5，都是試出來的經驗值）。整體比 Blob Track 更簡單：知道想要的效果需要哪個資料點，再做數學轉換就好。💡 「兩手都被辨識到才給值、否則歸零」本質就是條件運算——想把這種判斷寫得更漂亮，可參考 TouchDesigner Python 條件運算／三元表達式。想做多人時，調高max number of hands理論上就能多人互動（實際支援程度請自行查證）。
七、實作二：Face AR 濾鏡（手勢切換貼圖）
這個案例用複合追蹤：同時接 face 與 hand。做法拆成三塊：
- 定位： 用鼻子的 x／y 當方塊位置，讓整個貼圖跟著臉移動（正臉最準，臉一旋轉就會怪）。
- 深度： 臉部資料沒有 z 軸，用一個 tricky 的方法——拿左右耳的距離估算遠近（越遠、耳距在畫面上越近），把它當 scale 控制大小。
- 切換： 用 gesture channel 抓手勢（內建握拳、打開、上指等預訓練手勢），「打開手」→
Count (CHOP)累加 → 在 0～3 循環 → 控制Switch (TOP)切換貓臉／墨鏡／帽子／天線寶寶等貼圖。
每張貼圖的定位不同（貓貼臉、墨鏡在眼睛、帽子更往上），在
Math (CHOP) 各自微調偏移即可。本質上就是「用方塊追蹤臉，再把貼圖對到方塊上」。提醒：貼圖有時會追不完整（例如環繞整臉的效果），這屬正常現象，回去多調位置與 scale 就好。「單手 I love you」手勢老師當場沒比出來——有比出來的同學歡迎回報。
常見問題 FAQ
Q1：檔案打開後專案全是叉叉、沒有畫面？
外層被設成 stop cooking（省效能、暫停運算），是刻意的。把外層的叉叉點開，畫面才會出現。
外層被設成 stop cooking（省效能、暫停運算），是刻意的。把外層的叉叉點開，畫面才會出現。
Q2：Blob Track 好卡，怎麼救？
它完全基於 pixel 運算，大影片直接跑很慢。前面加
它完全基於 pixel 運算，大影片直接跑很慢。前面加
Resolution (TOP) 降到約 1／8，再接 Edge (TOP)，順序是 Resolution → Edge → Blob Track。Q3：Blob Track 只追到兩個點？
那是舊版 TD 非商業版本的限制。近期版本已移除，追蹤數量無上限——把 TD 更新到最新版即可（右上角綠色 update 會帶你到官網）。
那是舊版 TD 非商業版本的限制。近期版本已移除，追蹤數量無上限——把 TD 更新到最新版即可（右上角綠色 update 會帶你到官網）。
Q4：
預設是每個橫排（row）一個 channel。改成 Channel per Column，第一個 Row 設 name、第一個 Column 設 value，每個直行（id／u／v／width／height）就會各自變成一個 channel。
DAT to CHOP 出來的 channel 不對，全擠成一排？預設是每個橫排（row）一個 channel。改成 Channel per Column，第一個 Row 設 name、第一個 Column 設 value，每個直行（id／u／v／width／height）就會各自變成一個 channel。
Q5：MediaPipe 載入好久、還一直 crash？
第一次開會等比較久，因為要先載入必要的資料庫，耐心等別亂動。
第一次開會等比較久，因為要先載入必要的資料庫，耐心等別亂動。
MediaPipe 的 .tox 檔很大容易 crash，一定要第一個 download 並排在最前面、配套檔也都要；刪節點先按 xx 再 delete 比較安全。Q6：MediaPipe 開了但攝影機叫不出來？camera 一次只能被一個軟體使用。 把其他用到鏡頭的程式或 TD 檔先關掉，避免衝突導致開不起來。
課後練習
- Blob Track 框線視覺（本週基礎）。
Movie File In (TOP) → Resolution → Edge → Blob Track → DAT to CHOP → Select，再用Rectangle (SOP)＋Geometry (COMP)＋Render (TOP)＋Line (MAT)的 instance 畫出會動的追蹤框，Camera 改 orthographic 對位。 - 手勢魔法方塊。 拉
MediaPipedetect hands，用 translate（兩手中點）、scale（hand distance，兩手 active 才觸發）、rotation（兩手平均）三組資料控制一個方塊。 - Face AR 濾鏡。 face＋hand 複合追蹤：鼻子定位、耳距當深度、打開手 →
Count (CHOP)→Switch (TOP)切換貼圖。換成自己的貼圖對位試試。 - （進階） 改用 gesture 的其他手勢（握拳、上指）觸發不同效果，或調高
max number of hands試多人辨識。
影片章節
時間 | 內容 |
OpenCV 是什麼：開源電腦視覺函式庫 | |
TD 只整合少數效果，最常用 Blob Track（TOP／CHOP） | |
Blob Track 下方兩個 DAT：uv／width／height／ID | |
用 Noise 測 min／max blob size | |
lost／active／expired：被遮住能追回、ID 不變 | |
加 Resolution 降到 1／8，Blob Track 才順 | |
更新最新版：移除兩點追蹤限制 | |
加 Edge 做預處理，保留想要的輪廓 | |
DAT to CHOP：Channel per Column＋name／value | |
Rectangle→Geometry→Render＋Line 材質做框 | |
Camera 改 orthographic、對位 bottom left | |
width／height 給 scale，Over 疊回原圖校位 | |
Body／Face Track 需 Windows＋Nvidia，Mac 走 MediaPipe | |
MediaPipe 介紹＋Torin 的 TD 整合套件 | |
手勢魔法方塊：拉 MediaPipe、detect hands | |
translate 取兩手中點、scale 取 hand distance、rotation 取平均 | |
Face AR：手勢 → Count → Switch 切換貼圖 | |
鼻子定位 x／y、左右耳距離當深度 scale |
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
⭑Luxmin Institute (互動研究院) on Patreon
教學講的是觀念，工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上，免費層可以先看 Demo 與公開工具，付費層取得完整檔案與更新：
→ https://www.patreon.com/cw/LuxminInstitute
教學講的是觀念，工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上，免費層可以先看 Demo 與公開工具，付費層取得完整檔案與更新：
→ https://www.patreon.com/cw/LuxminInstitute
最新的活動動態與報名資訊：
→ https://www.threads.com/@luxmin.institute
→ https://www.threads.com/@luxmin.institute
TouchDesigner Line 討論群組：
→ https://line.me/ti/g2/5IkAcg_6dF_CbR0oChIRWVoTRWQdSEHEVmcjtw
→ https://line.me/ti/g2/5IkAcg_6dF_CbR0oChIRWVoTRWQdSEHEVmcjtw
如有相關專案或其他需求，請洽 luxmin.art
相關文章
Bonus:：MadMapper 光雕投影教學：描圖、遮罩與投影機規格判讀｜IVD487 W17
光雕投影（projection mapping）其實不難，難在動畫與腳本。這篇把 IVD487 第 17 週的 MadMapper 光雕工作坊整理成重點複習：從常用軟硬體、投影機五大規格判讀（ANSI 流明、支援 vs 實際解析度、投射比、光源、DLP vs 3LCD），到 MadMapper 平面描圖、Multiply 窗景、Mask／Invert Mask 與立體逐面 mapping。附投影機規格表與章節時間戳，上完課回來掃一遍就能接回來。
TouchDesigner Customize Component 自訂參數教學：打造專屬控臺｜IVD487 W14
想把 TouchDesigner 裡一堆節點收成一個乾淨控臺？這篇整理 Customize Component 自訂參數的完整流程：新增 page、挑參數類型、用 copy parameter→pass point 做雙向綁定，再帶 TD 內建 UI 元件、Container 整合，以及用手機／平板當觸控介面的 TouchOSC 十三種元件與連線設定。附 pass point vs reference 速查表與章節時間戳，上完課回來掃一遍就能接回來。