TouchDesigner SOP 3D 程序建模入門:基本圖形到渲染三套組|IVD487 W07

TouchDesigner 進入 3D!這篇整理 SOP 節點家族的入門重點:工作區多視圖自訂、基本圖形與資料結構(Box 為何有 24 點)、渲染三套組(Geometry/Camera/Light/Render),以及程序式建模 Copy/Sweep/Skin/Facet,最後用 Pattern (CHOP) 與 CHOP to SOP 做出麻花捲與徑向發散。附節點速查表與章節時間戳,上完課回來掃一遍就能接回來。

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

TouchDesigner SOP 3D 程序建模入門:基本圖形到渲染三套組

上一週玩完音樂視覺化,這一週跨進一個全新的節點家族——SOP(Surface Operator),也就是 TouchDesigner 的 3D 世界。從最基本的方形、球形,一路到「複製、掃出、連面」堆出有機造型,核心觀念只有一句話:用基礎圖形當單位,跟著資料一步步長成你要的樣子
這篇是重點整理。內容分成三塊:先把 3D 的介面操作與基本圖形摸熟,再學怎麼把 3D 畫面「渲染」成 2D,最後進到程序式建模(procedural modeling)做出麻花捲與徑向發散。上完課回來掃一遍就能把流程接回來。
讀完這篇你會知道:
  • 工作區怎麼切成多視圖,還能存起來重複用
  • SOP 操作三個必記快捷鍵,以及 Box 為什麼有 24 個點
  • 基本圖形的關鍵參數與最容易踩的坑
  • 渲染三套組(Geometry/Camera/Light/Render)怎麼接
  • Copy/Sweep/Skin/Facet 的分工,以及怎麼把 CHOP 資料餵進 3D
Video preview

一、工作區自訂:多視圖 layout

螢幕最上方那條 layout 區可以把畫面切成左右、上下、三塊或四塊,每一塊指定成不同的 viewer。做 3D 時最實用的接法:左側切成 Geometry Viewer 看 3D 大畫面,另一塊放 parameter 調參數,上面保留節點——邊操作邊看效果。調好喜歡的排版可以按下儲存(例如 layout1),它會跟著檔案一起存,切走再點一下就跳回來。現場表演即時控制也常用這招。
📺 影片段落:0:49

二、SOP 介面操作:viewer active 與三個快捷鍵

SOP 資料互動的前提,一樣是先打開節點的 viewer active,滑鼠移上去才能轉、平移、縮放:
  • 旋轉:左鍵/觸控板單指
  • 平移:右鍵/觸控板雙指
  • 縮放:滾輪/觸控板雙指上下
接著記三個快捷鍵就夠用了:
快捷鍵
功能
用途
H
fit 視窗
圖形縮太小、找不到時一鍵拉回置中
W
wireframe 邊框模式
清楚看到點、連線與構成面
I
看資料統計
point/primitive/vertex/polygon 的數量
I 會跳出一個關鍵疑問:一個 Box 明明長得方方正正,為什麼有 24 個點? 因為 Box (SOP) 每個面是由 4 個點構成,角落的點被相鄰的面重複計算,6 面 × 4 點 = 24。primitive(面)是 6,vertex(頂點)跟著面走也是 24。想更直觀,打開 viewer active → display options 勾點與法向量(normal,那些從面上長出來的箭頭),球形一看數字就很可怕。
💡 primitive type 會改資料結構。同一顆 Sphere (SOP),選 mesh 是整體一個面、選 polygon 點數不變但面與頂點會暴增。單純建模影響不大,但拿它當粒子或延伸資料點時,就會影響最後結果。
📺 影片段落:7:3810:50

三、基本圖形與關鍵參數

SOP 的基本圖形共用一組參數:radiussizecenterrotate,部分圖形多了 orientation(初始躺在哪個座標軸)、rowscolumns(細緻度)。逐一補上最容易踩的坑:
節點
一句話用途
最容易踩的坑
Box (SOP)
方形(不是 cube)
use division 切片後面會消失(點不足以構成面),變魔術方塊
Sphere (SOP)
球形
點數多;變化主要跟連線方式有關
Torus (SOP)
甜甜圈
radius 放大縮小、另一參數調圈寬
Circle (SOP)
3D 座標裡的 2D 圓
切分後記得把 arc type 改成 open arc,否則自動關成封閉
Rectangle (SOP)
2D 方
不能切分,只有 4 點,建議改用 Grid
Grid (SOP)
平面
可調 rowscolumns,比 Rectangle 好用
Tube (SOP)
管狀(中空)
第二個 tab 的 end caps 才能把上下蓋封起來
Line (SOP)
一條線
number of points 在起終點間差值,開點預覽才看得出來
小提醒:Circle 跟 Rectangle 的參數,和之前 TOP 家族的 Circle/Rectangle 幾乎一樣,可以互相對照。Tube 跟其他 3D 軟體一樣是中空的(由外圈點構成,裡面不是實心)。
⚠️ Rectangle 很雞肋。 它跟 Grid 外觀都是平面,但 Rectangle 不能調切分點,後面想做變形還得多接節點。實務上優先選 Grid (SOP) 就對了。
📺 影片段落:15:0117:3619:23

四、渲染三套組:把 3D 變成 2D

3D 畫面要呈現在螢幕或投影機上,得先「渲染」成 2D。TouchDesigner 這步拆得比較複合,固定要四樣東西——老師直接叫它渲染三套組(外加 Render):
基本圖形 (SOP) ──► Geometry (COMP) ─┐ ← 3D 資料容器 Camera (COMP) ──────────────────────┤ ← 鏡頭 Light (COMP) ───────────────────────┴─► Render (TOP) ──► 2D 畫面
  • Geometry (COMP):3D 資料的容器,把圖形丟進去準備渲染。想換圖形要進容器裡刪掉重建,再點開藍色小點才能被外部渲染。
  • Camera (COMP)Light (COMP):有鏡頭跟燈光,Render (TOP) 才知道要渲染成什麼樣子。燈光可疊加多盞,Light 裡還能各自調顏色(一側藍、一側紅做氣氛)。
  • Render (TOP):輸出 2D 成果。
實作流程可以這樣走:Box (SOP)Grid (SOP)Merge (SOP) 疊在一起(Grid 記得放大、Box 稍微往上坐落在平面上)→ 進 Geometry (COMP) → 建 CameraLightRender (TOP)
⚠️ Render 的米字號要手動指定。 Render (TOP) 預設是米字號(*),會把場景裡所有同類節點全抓進來,畫面連一堆虛線。要指定特定的 Geometry/Camera/Light,第一個可以直接拉線,但第二個以後直接拉會取代掉前一個,得回到參數手動輸入節點名稱才能一起渲染。
⚠️ Geometry 一定要在連線狀態下建。 沒接著圖形就直接建 Geometry (COMP),它會沒有 input/output 藍點,之後很麻煩。習慣先接著基本圖形再建 Geometry,它會自動幫你處理好容器裡的 In/Out。
📺 影片段落:22:0122:3831:00
⚠️ viewer 調不動 geometry。 打開 viewer active 後,拖曳只會改 CameraLight 的角度,渲染畫面跟著變;但拖 Geometry 完全沒反應——那只是在轉你的觀察視角。要真的移動、旋轉物體本身,得回到 Geometry (COMP)參數調。
📺 影片段落:32:15

五、程序式建模:Copy/Skin/Sweep/Facet

程序式建模最迷人的是非破壞性:整條節點鏈上任一個都能隨時停用、替換、插入,不會像傳統建模那樣一刀切下去就回不了頭。先給節點分工:
節點
做什麼
重點
Copy (SOP)
依來源圖形的每個點複製一份
number of copies 可複製多次,每次帶位移/旋轉;點太多會當機
Skin (SOP)
把一段段斷面連成面
group of N primitives 控制每幾個斷面連成一節
Sweep (SOP)
斷面沿路徑掃出
第二個 input 放路徑;第二個 tab 有 twist 可扭轉、scan output 連面
Facet (SOP)
low poly 風格
unique pointscompute normal,每個面才明顯
Copy 徑向發散怎麼做: 拿一個單元(例如 Circle 掃出的節)接 Copy (SOP),來源資料放 Sphere (SOP),就會依球面上的點往外發散。要讓它真的由球心朝外,得在 base 與 Copy 之間插一個 Transform (SOP),把 rotate y 轉 90 度,方向才正。至於大量複製這種需求,下一週會用更有效率的做法——IVD487 W08|Instance 實例化,本週的 3D 圖形正是它的基礎。
⚠️ Copy 接 Sphere 容易當機。 Sphere (SOP) 預設點數很多,直接丟進 Copy 複製會讓電腦卡死。先把 Sphere 的 primitive type 改成 polygon 降點,再連 Copy 就安全多了。
補充一顆常客:Noise (SOP) 接在圖形後面會讓它開始亂動,設定跟 Noise (CHOP) 幾乎一樣,可針對 point position(xyz 各自加噪)或 normal(法向量像毛一樣晃)。想先看變化量,也可以先用 Noise (CHOP) 看波形再回填數值。
📺 影片段落:27:4935:0938:1741:11

六、資料互轉:做一根麻花捲

這段是本週最需要理解的資料操作——把 CHOP 的波形餵進 3D 圖形,讓直線變成波動的麻花捲。
接法:
  1. Rectangle (SOP) 當斷面 → Sweep (SOP)Line (SOP) 接第二個 input 當路徑(Line 的 number of points 拉高,例如 20 點才有段數)。
  2. Pattern (CHOP),選 sin 波。要讓每個點都動,得讓 Pattern 的 sample 數對齊 Line 的點數:對 Line 的 number of points 右鍵 copy parameter,貼到 Pattern 的 lengthpath reference,兩邊數量就同步了。
  3. 加一個 Null (CHOP) 純粹整線。
  4. 在 Line 與 Sweep 之間插入 CHOP to SOPSOP 家族),把 Null (CHOP) 拉進來當來源。
  5. 設定 CHOP to SOP:channel scope 用 chan1(波形資料);attribute scope 預設是 p0 p1 p2(position 的 x/y/z),只留 p1 讓它上下震盪,直線就變成曲線。
  6. 後面接 Convert (SOP) 把 mesh 轉 polygon,再接 Facet (SOP)(unique points + compute normal)做 low poly,回頭把 Sweeptwist 帶一點旋轉——麻花捲成形。
⚠️ Pattern 沒對齊點數,只有前段會動。 如果 Line 有 30 點但 Pattern 只有 15 個 sample,你會發現只有前 15 個點有變化,後面完全不動——因為沒有資料告訴它們 y 值要怎麼變。這就是要用 copy parameter 把兩邊數量綁死的原因。
⚠️ CHOP to SOP 的 p 是向量,會報錯。 p 一次帶 x/y/z 三個值,你只有一個 channel 卻想塞給整個 p,數量對不上就報錯。指定成 p1(只給 y 軸)才行。
📺 影片段落:44:4946:0249:4952:26

七、材質與貼圖:Constant (MAT) 與 Movie File In

上色與貼圖交給 MAT(材質)家族,最常用的是 Constant (MAT)——直接把顏色賦予圖形,拖進 Geometry (COMP) 的 render 頁面的 material 欄即可。
貼圖片要兩步(順序別接反):
Movie File In (TOP) ──► Constant (MAT) ──► Geometry (COMP) (香蕉圖) (color map 欄) (material 欄)
貼上去常常破碎、每一面不一樣,這跟 UV 的 texture coordinate 有關。以 Box (SOP) 為例,回到 Box 把 texture coordinate 改成 facebox outside,每一面才會是完整的單獨圖片。渲染想要環境光,LightAmbient Light (COMP) 就有均勻打光的感覺。
📺 影片段落:55:11

常見問題 FAQ

Q1:Box 明明六面,為什麼有 24 個點?Box (SOP) 每個面由 4 個點構成,角落的點被相鄰的面重複計算,6 面 × 4 = 24。primitive(面)是 6、vertex(頂點)跟著面走也是 24。
Q2:Circle/Rectangle 切了角度卻還是封閉的?
arc type 改成 open arc(或其他開放型態)。預設它會自動把線關成封閉連線,才顯示得出圖形。
Q3:建了 Geometry 卻沒有 input/output 藍點?
你在「非連線狀態」下建了 Geometry (COMP)。習慣先接著基本圖形再建,它會自動補好 In/Out;已經建成沒點的,就要進容器裡刪掉重建、點開藍點。
Q4:Render 只顯示一個 geometry/light,第二個加不進去?Render (TOP) 的欄位是米字號(*)自動全抓。要指定多個,第一個可拉線,第二個以後直接拉會取代掉,得手動輸入節點名稱。
Q5:CHOP to SOP 一直報錯?p 是 x/y/z 的向量(一次三個值),你只有一個 channel 塞不進整個 p。指定成 p1(只給 y 軸)就正常了。
Q6:Copy 一接 Sphere 電腦就當?Sphere (SOP) 預設點太多。先把 primitive type 改成 polygon 降點,再連 Copy (SOP)

課後練習

  1. 渲染三套組。Box (SOP)Grid (SOP)Merge 疊出「物體+地面」,接 Geometry (COMP),配 Camera兩盞不同顏色的 Light,最後 Render (TOP) 輸出。練熟四樣東西的接法與米字號指定。
  2. 程序建模單元。 Rectangle (SOP)Line (SOP)Sweep (SOP),開 twist 扭轉、接 Facet 做 low poly,掃出一根麻花捲。
  3. 資料互轉(重點)。Pattern (CHOP)(sin 波)+ CHOP to SOP(只給 p1)讓直線變波形,記得把 Pattern 的 length 用 copy parameter 綁上 Line 的 number of points,否則只有前段會動。
  4. 貼圖。 Box (SOP)Movie File In (TOP)Constant (MAT)Geometry,把 Box 的 texture coordinate 調成 box outside,讓每一面都是完整圖片。

影片章節

時間
內容
工作區 layout 自訂:多視圖與 Geometry Viewer
Houdini 與 TD 師出同源,核心邏輯相近
SOP 介面操作:viewer active、H fit、W wireframe
按 I 看資料:Box 為何有 24 個點
Box use division:切片後面會消失
arc type:Circle/Rectangle 要開 open arc
Tube 的 end caps 與 Line 的點數
Geometry (COMP):3D 資料容器
Render (TOP) 與米字號指定
Noise (SOP) 亂動 + Facet low poly
Box + Grid 打光渲染實作
viewer 只調 camera/light,geometry 要用參數
Copy (SOP):依來源點複製
Skin (SOP):把斷面連成面
Sweep (SOP) + twist 扭轉
Pattern (CHOP) 綁 Line 點數
CHOP to SOP 做麻花捲(只給 p1)
Convert + Facet 做 low poly
Copy + Sphere + Transform 徑向發散
Constant (MAT) 上色與 Box 貼圖
 
⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑⭑
Luxmin Institute (互動研究院) on Patreon
教學講的是觀念,工具則是我們在真實展場裡跑過、改過、確定能用的東西。TD 元件、專案檔、校正與製作流程都陸續發佈在 Patreon 上,免費層可以先看 Demo 與公開工具,付費層取得完整檔案與更新:
https://www.patreon.com/cw/LuxminInstitute
最新的活動動態與報名資訊:
https://www.threads.com/@luxmin.institute
 
如有相關專案或其他需求,請洽 luxmin.art