TouchDesigner · MediaPipe · Generative Art

手勢驅動的
生成式建築視覺

把一堆混凝土方塊，instance 成隨手勢呼吸、變形、套上復古 dithering 的 brutalist 作品
素材：Torin Blankensmith YouTube 教學（約 29:30）· 2026-06-19

為什麼值得學

一件桑拿後半小時的速寫，
贏過你拍十次的作品

反直覺的事實

作者整個一月每天做一件生成藝術。這件 brutalist 速寫「第一次就過」，IG 衝到 近 900 萬瀏覽（作者自述）。

真正的啟示

他精雕十次的作品反而沒人理。觀眾買單的是對的「組合」，不是疊了多少工時。
重點是抓骨架，不是追完美。

[00:00]–[00:54]

全片地圖 · 九個可重組的零件

這件作品的骨架

  • 01 起點：舊檔刪視覺、留 audio
  • 02 音訊先行
  • 03 Render 骨架
  • 04 混凝土材質
  • 05 Instancing 核心
  • 06 形變變體
  • 07 燈光動畫
  • 08 Dithering 收尾
  • 09 開放給你改造
  • 前置 instancing + PBR 基礎

前置：作者 3 部 hand-tracking master class（看 project 1、2 + 一點 3）；不熟 instancing/PBR 先去 derivative.com/learn [01:23]–[02:21]

01 · 起點

不開白紙，先有聲音再長畫面

  • 拿 master class 最終檔當底，刪掉所有舊視覺，只保留 audio 配置
  • 「先聲音、後畫面」的順序貫穿整件作品 — 聲音定節奏，畫面再貼上去

[03:17]

02 · 音訊先行

q pulse 觸發 + Math CHOP 乾淨混音

  • 背景曲 + 三組磚塊音效（rotate 觸發時才播）；媒材 nest 在專案旁
  • 三個音效一起選，關掉 repeat → pulse q 單次觸發
  • 陷阱：直接走主混音會被 audio filter 悶掉
  • 解法：插 Math CHOP 用 add 合併 → 走一條不被淡入淡出影響的乾淨路徑
  • 重用既有 rotation trigger expression → 拖到 q pulse；另一隻手控 filter 淡入淡出

[03:48]–[06:40]

03 · Render 骨架

相機、兩盞 cone light、救 FPS 的環境光

  • 刻意不用 point light → 兩盞 cone light + soft shadows（柔和陰影調性）
  • 一盞 pan 右上、一盞 pan 左上（之後做成繞場動畫）
  • PBR 打光關鍵：constant TOP → null → 設成 environment map
  • 效能提醒：用影片當環境光時，environment light 關掉 automatic 救回 frame rate

[06:40]–[07:38]

03 · Render 骨架（續）

先設解析度，再補法線

  • 先設 render 解析度免得忘：python 表達式 parent().width / parent().height + 32-bit float
  • box SOP → 右鍵 tabs→comps 建 geometry → 拖 PBR material（會偏暗）
  • 打亮小技巧：substance TOP 的 default 版拖進 PBR 的 substance TOP 參數
  • 新手卡點：material normal map 警告 = box 缺 normals
  • 修法：Attribute Create → 開 compute normals / tangents，警告消失

[08:30]–[09:54]

04 · 混凝土材質

貼圖 → 法線 → 高度圖

  • 鐵律：所有媒材 local to project，別帶 downloads 路徑 → 才能跨機搬移
  • null → PBR material 的 base color map，顏色就上了
  • 混凝土的靈魂在凹凸：Normal Map TOP + 啟用 height map
  • 降低 z-scale → 把平面照片「立體化」，加上一堆紋理
  • 每加一層細節都回頭平衡光 — 過曝會把辛苦做的紋理洗白（光調暗到 ~6）

[10:55]–[11:54]

05 · Instancing 核心觀念

把幾何位置編碼成像素，讓 GPU 來 blend

想在不同位置之間 blend → 在 GPU 上做更有效率
所以：SOP 位置資料 → 轉成 TOP（一張圖）
紅 = X  ·  綠 = Y  ·  藍 = Z
每個 instance 該擺在哪，寫進這張圖的色彩裡

這是整件作品的觀念核心：位置不再是清單，而是可被 shader 高速插值的紋理。[12:49]–[13:15]

05 · Instancing 節點鏈

位置編碼 8 步

#操作
1Box SOP，divisions 3×3
2SOP → CHOP（tabs→chops，SOP to CHOP）
3CHOP → TOP（tabs→tops，CHOP to TOP）
4取 RGB + fit to square（拿全部資料）
5null 命名 pose → Instance tab → 拖到 translate（R=X G=Y B=Z）
6複製 null 命名 scale → 拖到 geometry scale
7Noise：關 monochrome、offset 歸零、period 調小
8transform 加 ABS time.seconds × 0.01（緩慢漂移；×0.1 太快）

[13:15]–[15:11]

06 · 形變變體

box ↔ sphere ↔ torus

= 64

三者點數
必須完全相等

  • 三個 network 接到 Switch，開 blend between inputs
  • 鐵律：沒有相等點數，blend 就無從插值（box 按 'in' 查得 64 點）
  • sphere：用 Sprinkle 在表面配出 64 點
  • torus：orientation y 軸 → z 軸 留中孔，radius ~1.2

[16:09]–[17:34]

06 · 切換互動

手一旋轉，整堆方塊飛到下一排列

  • count loop min/max 從 0–1 改成 0–2（三個 index 遞增）
  • 加 Lag 做轉場 easing（1/1 太快 → 調到 4/4 或 3）
  • switch 放 active mode → 旋轉時 blend 到下個變體
  • 錄影實務：reset 回 0 會快速跳 → 從頭 0 開始，確認好看再逐次旋轉

[18:02]–[18:30]

07 · 燈光動畫

光繞場飛，但永遠看著作品中心

  • 建 null comp → 兩盞光的 transform look at 這個 null → 繞行仍朝原點
  • 圓形軌跡 = sin / cos 配對：
光1：X = sin(ABS time.seconds × 0.1) × 30　　Y = cos(…) × 30
光2：X = sin(…) × 20　　Y = cos(…) × 20　// 更靠近場景微擺

[20:00]–[21:25]

07 · 陰影修補

光一動，陰影就開始挑剔

關鍵值

shadow res → 1920×1920
light size → 0.1 和 1（兩盞一致，平滑鋸齒）

再加一道

renderer 後 insert Anti-Alias = Ultra
normal map 別太強（避免 aliasing / artifact）
camera 拉遠給空間

材質與光的拉扯 — 「剛好就好」。[21:25]–[23:16]

08 · Dithering 收尾

老電玩的灰階騙術

  • 原理：純黑白螢幕用特定圖案製造「灰階的錯覺」，遠看像深淺區域（參考 ShaderToy）
  • 底層就是一段 GLSL shader；plugin 是 patreon bonus，但管線可自己重現
  • 管線：壓縮解析度 → 套 shader → 放大回原尺寸（scale amount）
  • 點睛：pinch distance（H2）→ index，套 1-minus → 手閉(0)=dithering、手開=看混凝土

[23:43]–[26:03]

📋 實作速查 · 一頁帶走

關鍵參數

  • render：parent().width/height · 32-bit float
  • 缺法線 → Attribute Create（normals + tangents）
  • media 一律 local to project
  • normal map + height map，降 z-scale 加紋理
  • instancing 點數 = 64（box/sphere/torus 對齊）
  • noise 漂移 ×0.01，不要 ×0.1
  • shadow 1920 · light size 0.1/1 · AA Ultra
  • 磚塊聲：關 repeat · q pulse · Math CHOP add
09 · 開放給你改造

從這裡開始你自己的版本

  • 換貼圖、換形狀（box → sphere 美感全變，但混凝土真的很搭）
  • 玩不同 instancing：改旋轉、給每個 instance 獨特顏色
  • 依物件配對應的 foley 音效
  • 改 overlay 文字：next → rotate、scale → dither（dither amount 在 round 內做 1-minus）

[26:31]–[27:56]

不是因為它完美，
而是把對的零件組對了

一件桑拿後半小時的速寫能贏過十次重拍 —
那些零件，現在都在你手上。

素材 · Torin Blankensmith「Generative Architecture and Hand Tracking in TouchDesigner with MediaPipe」
youtube.com/watch?v=UFVvmCuM2Is