TouchDesigner OSC 手機控制教學：用手機感測器即時操控畫面｜IVD487 W10

想讓手機或 iPad 直接控制 TouchDesigner？這篇整理 W10 的互動核心：用 Window (COMP) 把 TD 變成表演輸出、純 TOP 做手電筒互動，並把重點放在 OSC 傳輸協定與 IP／Port 設定——只要記住連線四步驟，就能讓手機的傾斜、聲音、觸控即時映射到畫面。附節點速查表、OSC 四步驟表與章節時間戳，回來掃一遍就能接回流程。

Partical

May 11, 2026

TouchDesigner IVD487

TouchDesigner OSC 手機控制教學：用手機感測器即時操控畫面

一、Window (COMP)：把 TD 變成表演輸出

二、純 TOP 手電筒互動

三、OSC 是什麼？IP 與 Port（核心觀念）

🧰 TouchDesigner 工具庫｜ Luxmin Institute on Patreon
我們把接案與展場現場累積下來的 TouchDesigner 元件、專案檔與製作系統，整理發佈在 Patreon，部分工具與 Demo 免費開放下載。
→ https://www.patreon.com/cw/LuxminInstitute
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑

TouchDesigner OSC 手機控制教學：用手機感測器即時操控畫面

上一週把 Instance 實例化走完，這一週正式進入「互動」——接下來三週分別談軟體、硬體感測器與 AI，本週先從最容易上手的軟體控制開始：用手機或 iPad 當控制器，把畫面即時操控起來。

三個重點先講：怎麼把 TD 變成能上台的表演輸出（Window (COMP)）、一個全程只用 TOP 就能做的手電筒互動，以及今天著墨最多、也是手機控制關鍵的 OSC 傳輸協定。搞懂 OSC 的 IP 與 Port，手機的傾斜、聲音、觸控都能餵進 TD。這篇是重點整理，上完課回來掃一遍就能把流程接回來。

讀完這篇你會知道：

Window (COMP) 怎麼把作品輸出到投影機／螢幕，並進入 perform 全螢幕
純 TOP 手電筒互動的節點鏈與修色技巧
OSC 到底是什麼、為什麼需要同一個區域網路
IP 與 Port 的差別，以及 OSC 連線的四個步驟
手機感測器資料怎麼從 OSC In (CHOP) 一路轉成旋轉角度

一、Window (COMP)：把 TD 變成表演輸出

以前輸出作品多半是 Export TOP 或 Export Movie File，適合產素材。但如果要做互動或直接拿 TD 當表演媒介，就要改用 Window (COMP)。

接法很簡單： 任一 TOP 拉給新建的 Window (COMP)，來源選 Windows Operator，畫面就會被指定輸出。要跳出實際顯示畫面有兩種：

open as separate window： 另開一個視窗顯示輸出。
open as perform window： 節點畫面整個消失、進入表演模式；要叫回編輯畫面按 esc。

光這樣還不夠乾淨，因為還看得到邊框。幾個常用設定整理如下：

設定項	作用	建議
Border	視窗邊框	關掉，去除上方邊框
Opening Size	開啟尺寸	選 Fill 自動全螢幕佔滿顯示畫面
Display	輸出到第幾個螢幕	多裝置時指定螢幕／投影機；沒有對應裝置會跳驚嘆號
解析度	畫面比例	要與輸出裝置一致，否則會被壓縮或出現黑邊

⚠️ 解析度要對齊輸出裝置： Fill 會佔滿顯示畫面，但如果專案解析度和投影機／螢幕比例不同，畫面會被壓縮或上下留黑邊。上台前先算好解析度再輸出。

📺 影片段落：5:35 ｜ 6:02 ｜ 6:59 ｜ 7:31

二、純 TOP 手電筒互動

第一個互動全程只用 TOP，完全沒碰 CHOP 或資料——用手機手電筒照攝影機，就能像探照燈一樣照亮底圖。

節點鏈：


Video Device In (TOP) ─► Flip (TOP) ─► Level (TOP) ─► Bloom (TOP) ─► Multiply (TOP) ─► 輸出
     (引入攝影機)        (校正左右)     (濾出亮處)      (擴大光斑)      (疊底圖)

Video Device In (TOP)：引入攝影機畫面（要自己試時記得把它 Active 打開）。
Flip (TOP)：水平翻轉，讓舉右手落在畫面右邊，軌跡才自然。
Level (TOP)：把 black level 拉到 0.99 左右，只留下最亮的光源處。
Bloom (TOP)：把 intensity 與 threshold 調大，讓原本細細的亮線變成明顯的光斑。
Multiply (TOP)：和底圖相乘，只有亮的地方才會顯現底圖顏色。

修色小技巧： 光斑會帶到原本光源的黃紅雜色。把 Bloom (TOP) 的 output 改成 Bloom with Alpha（背景變透明），再在 Bloom 與 Multiply 之間插一個 Channel Mix (TOP)，把 alpha 灌進 RGB 的第四個值全設為 1——有光的地方就會逼近白色，底圖顏色才顯示得正確。

📺 影片段落：9:00 ｜ 10:44 ｜ 11:34 ｜ 12:02 ｜ 14:04

三、OSC 是什麼？IP 與 Port（核心觀念）

OSC＝Open Sound Control。 雖然名字帶 sound，但它其實是一種讓不同裝置互相傳送數值的傳輸協定——位置、角度、壓力，只要是數字都能傳。這也是本週手機控制的核心。

它的傳送格式是 「路徑＋數值」：一個路徑（位置）後面帶一個數值，接收端就知道這個數字是什麼、要送到哪。

關鍵條件：收發兩端必須在同一個區域網路。 在家裡就是連同一個 Wi-Fi。理解連線要先分清兩個東西：

IP： 像「地址」。每個裝置在區域網路裡會拿到一個獨特的 IP address（例如 192.168.50.226）。
Port： 像「門牌號碼」。已經知道地址，還要知道門牌才能把資料準確送達。

⚠️ 學校電腦要開熱點才查得到 IP： 學校電腦防火牆比較囉嗦，看不到 Wi-Fi 詳情。建議用自己的手機開熱點、讓電腦連上，確保手機與電腦在同一個區域網路。自己的電腦則可直接點 Wi-Fi → detail 往下滑看到 IP address；學校電腦要走 iMac 的「終端機」用 ipconfig getifaddr en0（en0／en1 要試哪個網卡有值）查出 IP。

📺 影片段落：17:08 ｜ 19:20 ｜ 20:56

四、OSC 連線四步驟

把觀念收斂成一個可照做的清單。本週案例都是手機發送、電腦接收：

步驟	動作	重點
1	確保手機與電腦在同一個 Wi-Fi／區域網路	學校電腦用手機開熱點連上
2	確認誰是發送端、誰是接收端	本週：手機＝發送端，電腦＝接收端
3	查出接收端（電腦）的 IP 位置	自己電腦看 Wi-Fi detail；學校電腦用終端機
4	兩端設定 IP 與 Port	發送端填電腦 IP＋自訂 port（如 6001）；接收端用 `OSC In (CHOP)` 填相同 port

接收端細節： port 由發送端自訂（例如手機端填 6001），電腦端 OSC In (CHOP) 填同一個 port 即可；因為是廣播式協定，接收端不用填 IP，資料會自動送進來。channel 太雜時按 reset channels，只留下目前有在傳的通道，畫面更乾淨。

💡 OSC In 有兩個：OSC In (DAT) 與 OSC In (CHOP)。知道 DAT 版存在就好，實務多用 OSC In (CHOP)——可以直接把數值綁到參數或做數據轉換，方便得多。

📺 影片段落：22:05 ｜ 23:41 ｜ 25:34

手機端 App 用 data osc 與 zig sim（填 IP＋port 即可送出感測資料）。注意：這兩個 App 目前不支援 Android，Android 使用者本週較難跟做；下一週的實體感測器則會改用硬體，建議帶 Windows 筆電（可用的感測器較多）。

五、感測器資料流：傾斜控制 3D 茶壺

有了連線，來看資料怎麼一路變成畫面。目標：傾斜 iPad 讓 3D 茶壺跟著轉。做法拆成「先建 3D」和「再綁資料」兩段。

先建 3D（SOP／COMP 套組）：


File In (SOP, 選 teapot) ─► Transform (SOP, 置中) ─► Null (SOP)
                                                        │
                          Geometry / Camera / Light (COMP) ─► Render (TOP)

File In (SOP) 的 geometry file 右上角有內建茶壺可直接選；接 Transform (SOP) 手動置中，再走 Geometry / Camera / Light (COMP) ＋ Render (TOP) 這組和前幾週一樣的渲染套組（Render 記得選進 camera／geometry／light）。

再綁資料（CHOP 鏈）：


OSC In (CHOP) ─► Select (CHOP) ─► Merge (CHOP) ─► Math (CHOP) ─► Filter (CHOP) ─► 綁到 Transform 的 rx / rz
 (port 6001)     (挑 channel)     (合併)        (映射角度)      (平滑)

OSC In (CHOP) 設 port 6001，把感測資料拉進來。
Select (CHOP) 從 gyroscope／accelerometer 一堆通道裡挑出你要的軸（例如 x、y 各一份）。
Merge (CHOP) 把挑出的通道合併。
Math (CHOP) 用 range 把原始 -1～1 映射成想要的角度區間——實測 90～90 比 0～360 更接近手拿旋轉的手感；若某個軸方向相反，就乘以 -1 翻回來。
Filter (CHOP) 做 smooth，把資料變化放緩。

⚠️ 感測數據一定要 smooth： 原始感測值會一直亂抖，直接綁上去畫面會顫動、很傷體驗。最後補一個 Filter (CHOP) 減緩變化速率，互動就平順許多。另外感測器的 xyz 不一定對應 TD 的 xyz，哪個 channel 是你要的、要不要 ×-1，都得自己拿起裝置動一動測出來。

加材質（選配）： 想更有質感就給 PBR (MAT)（課堂也提到 Phong (MAT)，兩種材質節點皆可）。賦予材質時常會跳錯誤說缺 tangent 屬性——這時補一個 Attribute Create (SOP) 開 compute tangent 算出來，材質才渲染得出來。

⚠️ PBR 報缺 tangent 就加 Attribute Create： 3D 物件缺屬性時 PBR 材質會報錯。在 SOP 段補 Attribute Create (SOP) 計算 tangent，再回頭賦予材質即可。

📺 影片段落：29:38 ｜ 34:09 ｜ 36:19 ｜ 38:29 ｜ 39:54

六、再兩個範例：麥克風漣漪與觸控刮刮樂

同一套邏輯（引入資料 → 選取轉換 → 對應效果）換不同 sensor，就能做出不同互動。

麥克風漣漪（motion → microphone 音量）：

OSC In (CHOP) → Select (CHOP) 挑 microphone 通道 → Trail (CHOP) 記錄約 2 秒的音量變化，再 normalize 壓回 0～1。
用 CHOP to TOP (TOP) 把資料變成一長條影像，再靠 Ramp (TOP)（type 選 circular）＋ Lookup (TOP) 轉成由內而外的圓形漣漪，方向反了就插 Flip (TOP)。
最後叫一張圖，經 Fit (TOP) 對齊比例後，用 Displace (TOP)（displace weight 從 0 慢慢調到約 0.1）疊出波紋；想更自然可再 Noise (TOP) 混一點擾動。

觸控刮刮樂（zig sim 的 touch）：

多點觸控的 x／y 座標對應到圖形位置，接 Feedback (TOP) 迴圈把手指移動軌跡留下痕跡，再用 Multiply (TOP) 疊底圖，看起來像把畫面刮開。
體驗優化：在手指目前位置多畫一個較不透明的顯示點，讓體驗者清楚知道現在摸到哪裡。

📺 影片段落：42:43 ｜ 44:46 ｜ 46:28 ｜ 52:02 ｜ 53:29

常見問題 FAQ

Q1：OSC 到底是什麼？只能傳聲音嗎？
OSC 是 Open Sound Control，一種讓不同裝置互相傳送數值的傳輸協定。名字有 sound，但不限聲音——位置、角度、壓力等任何數字都能傳，格式是「路徑＋數值」。

Q2：手機連不上電腦，資料進不來？
先確認兩件事：手機與電腦是否在同一個區域網路（學校電腦要用手機開熱點），以及電腦端 OSC In (CHOP) 的 port 是否和手機端填的完全一樣。接收端不用填 IP，是廣播式協定會自動送達。

Q3：學校電腦查不到 IP 怎麼辦？
自己的電腦點 Wi-Fi → detail 往下滑就有 IP address。學校電腦看不到，要開 iMac 的「終端機」輸入 ipconfig getifaddr en0；en0 沒值就試 en1，換網卡代號再試。

Q4：IP 和 Port 差在哪？
IP 像「地址」，是裝置在區域網路裡的獨特位置；Port 像「門牌號碼」，知道地址後還要門牌才能把資料準確送達。發送端要填對方 IP＋自訂 port，接收端用同一個 port 接。

Q5：茶壺會轉但抖得很厲害，怎麼修？
感測原始值本來就會亂抖。在 CHOP 鏈最後加 Filter (CHOP) 做 smooth 放緩變化；角度太小或方向相反，則用 Math (CHOP) 的 range 映射到 -90～90、必要時乘以 -1。

Q6：給 3D 物件上 PBR 材質跳錯誤說缺 tangent？
在 SOP 段補一個 Attribute Create (SOP)，開 compute tangent 把屬性算出來，再回頭把 PBR (MAT) 賦予給 geometry，材質就渲染得出來。

課後練習

表演輸出。 把任一 TOP 接 Window (COMP)，練習 open as perform window 進全螢幕、按 esc 叫回，並調 Border／Opening Size Fill／Display，把畫面乾淨地送到外接螢幕或投影機。
手電筒互動。 用 Video Device In → Flip → Level(0.99) → Bloom → Multiply 接出手電筒效果，再用 Bloom with Alpha ＋ Channel Mix (TOP) 把光斑修成白色。
傾斜控制 3D（本週重點）。 用 OSC In (CHOP) 接手機 motion，經 Select → Merge → Math(range -90~90) → Filter 綁到 Transform 的 rx／rz，讓 3D 物件跟著手機轉；記得測出正確軸向與是否 ×-1。
（挑戰） 換一種 sensor（麥克風或觸控）重做一次「引入資料 → 選取轉換 → 對應效果」，例如用 Trail → CHOP to TOP → Ramp(circular) → Lookup → Displace 做聲音漣漪。

影片章節

時間	內容
`5:35`	舊輸出法回顧：Export TOP／Movie File
`6:02`	Window (COMP)：把 TD 變成表演輸出
`6:59`	open as separate／perform window（esc 叫回）
`7:31`	Window 設定：Border／Fill／Display 與解析度
`9:00`	純 TOP 手電筒互動 demo
`10:44`	Video Device In ＋ Flip 校正左右
`11:34`	Level black level 0.99 濾出亮處
`12:02`	Bloom 擴大光斑
`14:04`	Bloom with Alpha ＋ Channel Mix 修色
`17:08`	OSC 協定介紹（Open Sound Control）
`19:20`	IP 與 Port 概念
`20:56`	終端機查 IP（ipconfig／en0）
`22:05`	OSC 連線四步驟
`23:41`	電腦端 OSC In (CHOP) 設 port 6001
`29:38`	傾斜控制 3D 茶壺
`34:09`	OSC In 綁 gyroscope／accelerometer
`36:19`	Math range -90～90、反向 ×-1
`38:29`	Filter smooth 消除抖動
`39:54`	PBR ＋ Attribute Create 算 tangent
`46:28`	Ramp circular ＋ Lookup 做漣漪

📺 觀看完整影片：https://www.youtube.com/watch?v=D3Te-lw000s&list=PLNN2D2V32B7jDCKsTHyhHBzJdKsei3EUC

📋 完整課程播放清單：https://www.youtube.com/playlist?list=PLNN2D2V32B7jDCKsTHyhHBzJdKsei3EUC

⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑

⭑Luxmin Institute (互動研究院) on Patreon
教學講的是觀念，工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上，免費層可以先看 Demo 與公開工具，付費層取得完整檔案與更新：
→ https://www.patreon.com/cw/LuxminInstitute

最新的活動動態與報名資訊：
→ https://www.threads.com/@luxmin.institute

TouchDesigner Line 討論群組：
→ https://line.me/ti/g2/5IkAcg_6dF_CbR0oChIRWVoTRWQdSEHEVmcjtw

如有相關專案或其他需求，請洽 luxmin.art

TouchDesigner Kinect 體感偵測入門：LiDAR、MIDI、Arduino 感測器總覽｜IVD487 W11 TouchDesigner Instance 實例化教學：從魔術方塊到音樂頻譜長條圖｜IVD487 W08

Partical

Luxmin 創辦人暨體驗設計總監，專注在實體互動體驗 Creative Technologist + Interactive Researcher