TouchDesigner 2D 碰撞偵測教學：高效圖像乘法法打造多目標互動系統

實際範例畫面

技術原理解析

• Multiply (TOP)：將互動感測來源與目標圖像進行乘法運算，當兩圖形重疊，會在該像素處產生非零值。

• Analyze (TOP)：設定為 Maximum Pixel，即會回傳圖像中最大像素值，作為「是否碰觸」的依據。

操作步驟教學

第一步：準備圖像來源

• 建立互動感測圖像（例如感測器輪廓、手電筒亮區）與目標圖像。

• 不論是靜態或動態圖像都可以使用。

第二步：進行圖像乘法運算

• 使用 Multiply (TOP) 將兩張圖重疊運算。當兩者有重疊區域時，結果圖像會出現亮點（值非零）。

第三步：提取碰觸資訊

• 加入 Analyze (TOP)，設定如下：
• Operation → Maximum Pixel
• Mask → Red（可選，用於只分析某個通道）

第四步：壓縮成單一像素（可選最佳化）

• 加入 Resolution (TOP)，設定解析度為 1×1：
• Output Resolution → Custom Resolution
• Resolution → 1, 1
這樣能讓輸出變成單一像素，方便後續轉為 CHOP 數值使用。

第五步：轉換為 CHOP 值

• 使用 Top to (CHOP) 將結果圖像轉為數值資料。

• 再加上 Math (CHOP)，設定：
• Combine Channels → Average

進階技巧：提升精準度

• 使用 Math (CHOP) 的四捨五入、無條件進位功能。

• 使用 Logic (CHOP)，只要值不為 0，輸出就為 1，是我最常用的方式。

• 你也可以依照實際需求，自訂不同的閾值判斷條件。

總結

• 感測互動地板 / 牆面

• 手電筒或雷射筆互動追蹤

• 即時多目標碰撞感知系統