---
title: "Touch Designer 直播挑戰 Vol.2 | 製作兒時記憶中的夢幻萬花筒效果"
slug: livestream02
url: https://education.monolab.world/posts/livestream02
published_at: 2025-12-03
modified_at: 2025-12-03
author: "MONOLAB｜藝術 x 科技 x 教育"
category: "TD直播課程筆記"
access: public_access
---

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

> 直播挑戰#2 課程筆記

By **MONOLAB｜藝術 x 科技 x 教育** - 跨領域互動設計與藝術實驗室 | 2025-12-03

課程概覽本次直播課程主要介紹如何利用 TouchDesigner (TD) 中的 Remap TOP 和 UV Mapping 的概念，來重現經典的萬花筒視覺效果。課程中詳細解釋了 UV Mapping 的原理，並透過模組化 (Clap Selected) 的方式，快速建構出複雜的三角形鏡射效果。 課程大綱 / Agenda課前閒聊與作品分享： 回顧上次直播後學員的 AI 披薩作品。TD 入門課程推廣： 介紹 Monolab 官網的 TD 入門必修課（已新增理解 TD 概念的單元）。核心概念： 介紹 UV Mapping / Remap TOP 的原理。示範案例： 萬花筒效果的展示與分解。步驟教學：建立基礎 UV Map（漸層圖）。將 UV Map 裁切成三角形（Polygon SOP 搭配 Multiply TOP）。透過 Transform 和 Over TOP 進行三角形鏡射複製。將重複操作模組化（Clap Selected）。應用到輸入影像，調整解析度並放大輸出。問答時間： 隨時解答學員疑問。核心概念與理論🗺️ 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 基礎與三角形遮罩建立原始圖像： 放入欲製作萬花筒的圖像（例如 moviefilein1 或 butterfly.png）。建立標準 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)。定義三角形範圍：新增 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）來重複鏡射步驟。建立 Base COMP： 框選所有操作（從 uv_map_base 到三角形遮罩輸出 NOR），按右鍵選擇 Collapse Selected。Tip：將 Comp TOP 放在模組內，確保輸出為方形且大小一致。單次鏡射操作（在 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 MapRemap 應用：輸入 1 (Image)：原始圖像 (蝴蝶、影片等)。輸入 2 (UV Map)：kaleidoscope_map 的輸出。細節調整：重複模組： 複製 kaleidoscope_map 模組，將其輸出連接回新的 kaleidoscope_map 模組的輸入 $\rightarrow$ 重複切分三角形（深度鏡射）。縮放： 在 Remap TOP 輸出後接上 Transform TOP (Scale > 1)，將重複的圖樣放大，撐滿畫面。常見問題 & 解決方案問題 (Q)解決方案 (A)Q： 輸出圖像邊緣有鋸齒或不連續/不平滑。A： 確認用於製作 UV Map 的 Ramp TOP 輸出 Pixel Format 是否已設為 32-bit Float，確保漸層的連續性。Q： 萬花筒效果不清晰，解析度很差。A： 檢查 輸入圖片 (e.g. 蝴蝶) 的解析度是否足夠高。同時，將 Ramp TOP 的解析度設定為 2048x2048 或 4096x4096 以上，以提供足夠的像素細節。Q： 如何讓萬花筒圖案動起來？A： 在輸入的 Ramp TOP (如 Radial Ramp) 的 Phase 參數中，輸入 absTime.seconds * speed (* 0.1 左右) 即可讓圖案產生持續擴張的動畫。練習任務替換輸入： 將蝴蝶或靜態圖片替換成 YouTube 影片或 Noise TOP 動態圖形，觀察萬花筒的變化。嘗試扭曲： 在最終的萬花筒 UV Map 輸入 Remap TOP 之前，加入一個 Noise TOP，嘗試製作「扭曲的萬花筒」效果。改變多邊形： 嘗試將遮罩從三角形 (3 Sides) 改為四邊形 (4 Sides) 或五邊形 (5 Sides)，觀察鏡射後的圖樣差異。總結本課程成功地利用 Remap TOP 和 UV Mapping 的進階技巧，實現了經典的萬花筒效果。掌握 UV Mapping 的原理，能讓您在 TouchDesigner 中製作出複雜的圖像佈局、扭曲和重複效果，這在即時音像視覺 (Audio-Visual) 創作中是非常實用且重要的技巧。邀你一起學習！直播筆記專屬折扣碼「Live600」輸入折扣碼「Live600」，即可享有600元的課程折扣，學員可享有：TouchDesigner 共學群組，有問題即可直接詢問哲宇老師可不定期收到 TouchDesigner 小模組直播的製作素材包小模組直播的許願池，會優先從TD共學群組的需求來教學點擊連結進行報名，我們TD線上課相見囉！