Touch Designer 直播挑戰 Vol.2 | 製作兒時記憶中的夢幻萬花筒效果

課程概覽

本次直播課程主要介紹如何利用 TouchDesigner (TD) 中的 Remap TOP 和 UV Mapping 的概念，來重現經典的萬花筒視覺效果。課程中詳細解釋了 UV Mapping 的原理，並透過模組化 (Clap Selected) 的方式，快速建構出複雜的三角形鏡射效果。 

課程大綱 / Agenda

• 課前閒聊與作品分享： 回顧上次直播後學員的 AI 披薩作品。
• TD 入門課程推廣： 介紹 Monolab 官網的 TD 入門必修課（已新增理解 TD 概念的單元）。
• 核心概念： 介紹 UV Mapping / Remap TOP 的原理。
• 示範案例： 萬花筒效果的展示與分解。
• 步驟教學：
  1. 建立基礎 UV Map（漸層圖）。
  2. 將 UV Map 裁切成三角形（Polygon SOP 搭配 Multiply TOP）。
  3. 透過 Transform 和 Over TOP 進行三角形鏡射複製。
  4. 將重複操作模組化（Clap Selected）。
  5. 應用到輸入影像，調整解析度並放大輸出。
• 問答時間： 隨時解答學員疑問。

核心概念與理論

🗺️ UV Mapping 與 Remap TOP

• 原理： Remap TOP 的功能是根據輸入的 UV Map 圖像（第二個輸入）來重新佈局原始圖像（第一個輸入）。
• UV Map 圖像結構：
  • 紅色 (R) 通道： 代表原始圖像的 X 軸位置（0.0 到 1.0）。
  • 綠色 (G) 通道： 代表原始圖像的 Y 軸位置（0.0 到 1.0）。
  • 例如：UV Map 某像素的 RG 值為 (0.3, 0.2)，則 Remap 的輸出圖像上該像素會顯示原始圖像中 (X=0.3, Y=0.2) 位置的顏色。
• 實作基礎 UV Map： 透過兩個 Ramp TOP (一個水平 R=0-1，一個垂直 G=0-1) 並使用 Math TOP (Multiply 或 Combine) 組合，即可得到一張標準的 UV Map。
• 細節優化： 在進行 Mapping 或圖像扭曲時，建議將 Ramp TOP 的 Pixel Format 調整為 32-bit Float，以獲得更平滑（絲滑）的漸層和扭曲效果。

🌀 扭曲與重複

• 扭曲效果： 在基礎 UV Map 後方加入 Noise TOP（調整 RGB 值），即可隨機變動像素的取樣位置，產生類似毛玻璃或水面波動的扭曲。
• 圓形重複：
  • 將 X 軸 Ramp 替換為 Radial Ramp (Type: Angular)，控制角度重複。
  • 將 Y 軸 Ramp 替換為 Radial Ramp (Type: Radial)，控制半徑重複。
  • 組合後可產生類似電影《全面啟動》中不斷擴張或收縮的同心圓重複效果。

示範案例

• AI 披薩： 學員作品，利用 AI 生成披薩圖樣並即時轉換成音樂變動的視覺。
• 萬花筒效果：
  • 將渲染的亮片或碎屑圖像，透過 UV Mapping 鏡射並重複，呈現繁複的虛擬世界。
  • 替換輸入圖像為蝴蝶線框圖，展示冰雪世界般的線條萬花筒。

步驟教學（Step-by-Step）

1. 建立 UV Map 基礎與三角形遮罩

1. 建立原始圖像： 放入欲製作萬花筒的圖像（例如 moviefilein1 或 butterfly.png）。
2. 建立標準 UV Map：
   • Ramp 1 (X)： Type: Horizontal，Output: Red (R 0-1)。
   • Ramp 2 (Y)： Type: Vertical，Output: Green (G 0-1)。
   • 設定解析度為 2048x2048，Pixel Format 設為 32-bit Float。
   • 將兩者用 Math TOP (Combine TOPs: Add) 組合 $\rightarrow$ 輸出標準 UV Map (uv_map_base)。
3. 定義三角形範圍：
   • 新增 Circle SOP，將 Primitive Type 設為 Polygon，Sides 設為 3（三角形）。
   • 新增 Render TOP 將 SOP 渲染為 TOP 圖像。
   • 新增 Comp TOP (Operation: Multiply)，將 uv_map_base 與 Render TOP 的輸出相乘 $\rightarrow$ 得到三角形 UV Map 遮罩。

2. 製作萬花筒鏡射模組

萬花筒主要由多個鏡射的三角形組成。此處使用模組化（Base COMP）來重複鏡射步驟。

1. 建立 Base COMP： 框選所有操作（從 uv_map_base 到三角形遮罩輸出 NOR），按右鍵選擇 Collapse Selected。
   • Tip：將 Comp TOP 放在模組內，確保輸出為方形且大小一致。
2. 單次鏡射操作（在 Base COMP 內）：
   • 輸入： 單一三角形 UV Map。
   • Transform 1： 將三角形縮小 (Scale: 0.6) 並往右平移，使其貼至中心。
   • Transform 2： 複製 Transform 1，將 Scale 設為 -1（X 或 Y 鏡射），並移動位置使其與 Transform 1 貼合。
   • Over TOP： 將 Transform 1 和 Transform 2 合併。
   • 重複步驟： 繼續 Transform 和 Over，旋轉 $\pm 60^\circ / \pm 120^\circ / \pm 180^\circ$ 不等的角度，並平移貼合，直到做出一個完整的六角形或圓形範圍內的鏡射圖案 $\rightarrow$ 輸出萬花筒 UV Map (kaleidoscope_map)。

3. 應用 UV Map

1. Remap 應用：
   • 輸入 1 (Image)：原始圖像 (蝴蝶、影片等)。
   • 輸入 2 (UV Map)：kaleidoscope_map 的輸出。
2. 細節調整：
   • 重複模組： 複製 kaleidoscope_map 模組，將其輸出連接回新的 kaleidoscope_map 模組的輸入 $\rightarrow$ 重複切分三角形（深度鏡射）。
   • 縮放： 在 Remap TOP 輸出後接上 Transform TOP (Scale > 1)，將重複的圖樣放大，撐滿畫面。

常見問題 & 解決方案

練習任務

1. 替換輸入： 將蝴蝶或靜態圖片替換成 YouTube 影片或 Noise TOP 動態圖形，觀察萬花筒的變化。
2. 嘗試扭曲： 在最終的萬花筒 UV Map 輸入 Remap TOP 之前，加入一個 Noise TOP，嘗試製作「扭曲的萬花筒」效果。
3. 改變多邊形： 嘗試將遮罩從三角形 (3 Sides) 改為四邊形 (4 Sides) 或五邊形 (5 Sides)，觀察鏡射後的圖樣差異。

總結

本課程成功地利用 Remap TOP 和 UV Mapping 的進階技巧，實現了經典的萬花筒效果。掌握 UV Mapping 的原理，能讓您在 TouchDesigner 中製作出複雜的圖像佈局、扭曲和重複效果，這在即時音像視覺 (Audio-Visual) 創作中是非常實用且重要的技巧。

邀你一起學習！直播筆記專屬折扣碼「Live600」

輸入折扣碼「Live600」，即可享有600元的課程折扣，學員可享有：

• TouchDesigner 共學群組，有問題即可直接詢問哲宇老師
• 可不定期收到 TouchDesigner 小模組直播的製作素材包
• 小模組直播的許願池，會優先從TD共學群組的需求來教學

點擊連結進行報名，我們TD線上課相見囉！