教程视频讲解(文件已发布在付费资源群)

初级教程

简介 (Introduction)

本教程旨在演示如何在 TouchDesigner 中实现两种核心视觉效果。第一种是复现艺术家 Kensuke Koike 的一种标志性技术: 将一幅图像分割成网格, 并对网格单元进行随机重排, 创造出一种可控的碎片化拼贴效果。

在此基础上, 教程进一步探索了一个“意外发现” (Happy Accident) 的视觉效果: 通过程序化生成法线贴图 (Normal Map), 模拟在每个网格单元上凸起的玻璃或球面, 最终实现一种“玻璃砖墙” (Glassy Wall) 或带有迷幻感的毛玻璃失真特效。这种技术在实时视觉表演 (VJing)、交互艺术装置和动态图形设计中有广泛的应用场景。

2. 核心概念 (Core Concepts)

UV Mapping (UV 贴图)

定义: UV 贴图是一个二维坐标系统, 用于将二维纹理 (图像) 精确地应用到三维或二维表面上。在本次教程中, 我们不直接贴图到三维模型, 而是生成一个自定义的 UV 查找图 (Lookup Table), 并通过 Remap TOP 将其应用于源图像。这个 UV 查找图的 R 通道和 G 通道分别对应源图像的 X 和 Y 坐标, 通过扰乱这个图, 我们可以实现对源图像像素位置的重新映射。

关联: 这是实现图像随机重排和玻璃失真的核心基础。整个流程都是在创建和修改一个最终用于 Remap TOP 的 UV 贴图。

Remapping (重映射)

定义: 在 TouchDesigner 中, 这通常指使用 Remap TOP 节点的操作。该节点接收两个输入: 第二个输入是源图像, 第一个输入是 UV 偏移图。它会根据第一个输入中每个像素的 (R, G) 值, 去第二个输入(源图像)的对应 (X, Y) 坐标处抓取像素颜色, 从而生成最终输出。这是实现所有空间扭曲、置换和重组效果的关键。

Height Map (高度图)

定义: 一种单通道 (通常是灰度) 纹理, 其中每个像素的亮度值代表该点在空间中的“高度”或“深度”。在本教程中, 我们通过数学计算生成了一个代表半球体表面的高度图。

关联: 高度图是生成法线贴图的前置步骤。

Normal Map (法线贴图)

定义: 一种特殊的 RGB 纹理, 其中 R, G, B 通道不代表人眼可见的颜色, 而是存储了表面法线向量的 X, Y, Z 分量。它被广泛用于计算机图形学中, 以在不增加几何复杂度的前提下, 模拟物体表面的细节和光照反射。

关联: 在本教程中, 我们使用 Slope TOP 将高度图转换为法线贴图。这个法线贴图随后与基础 UV 贴图相加, 模拟光线穿过曲面玻璃时发生的折射, 从而产生视觉位移和失真。

Pythagorean Theorem (勾股定理)

定义: 在一个直角三角形中, 两条直角边的平方和等于斜边的平方 (a² + b² = c²)。

关联: 教程后半部分利用该定理的变体 height = sqrt(radius² – distance²) 来计算半球体上任意一点的高度。这里的 radius 是球体半径 (斜边), distance 是某点到圆心的平面距离 (一条直角边), height 则是该点需要抬升的高度 (另一条直角边)。

3. 环境准备与前置条件 (Prerequisites)

软件: TouchDesigner (任意近期版本均可)。

前置知识:

对 TouchDesigner 的基本界面和操作有初步了解。

理解不同节点家族 (TOP, CHOP, SOP) 的基本概念。

本教程从零开始构建, 无需准备任何外部文件 (.tox) 或插件。

4. UV 随机重映射与法线贴图生成详解 (Detailed Explanation of UV Random Remapping and Normal Map Generation)

本教程的核心技术分为两个主要部分: 首先是构建一个随机打乱的 UV 网格系统, 其次是在此基础上生成一个用于模拟玻璃质感的法线贴图。

UV 随机化原理

该技术的目标不是真正地切割图像, 而是创建一个“欺骗” Remap TOP 的 UV 贴图, 让它以为图像的各个部分被移动到了新的位置。

网格中心点定位: 首先, 我们将整个 UV 空间 (从 0 到 1) 想象成一个虚拟网格 (例如 6×6)。我们使用 Fit TOP 的 Nearest Pixels (最近邻像素) 模式, 可以快速生成一个纹理, 其中每个大色块的值都等于该网格单元的中心点坐标。

索引生成与随机化:

为每个网格单元创建一个从 0 开始的唯一索引值 (例如, 6×6 网格有 36 个单元, 索引为 0-35)。这通过一个一维的 Ramp TOP 实现。

将这个包含索引的纹理数据转换到 CHOPs (通道操作符) 中, 因为 CHOPs 提供了强大的数据排序工具。

使用 Sort CHOP 的 Random (随机) 模式, 将这些索引的顺序完全打乱。

创建随机化的坐标查找图:

将打乱后的索引顺序从 CHOPs 转回 TOPs。

使用这个随机索引图作为 UV 贴图, 去 Remap 我们在第一步中生成的“网格中心点”纹理。

这样操作的结果是, 我们得到了一个新的纹理, 其中包含了随机分布的网格中心点坐标。

扩展坐标以填充单元:

目前我们只有随机的中心“点”, 需要将它们扩展成完整的网格“面”。

通过 Transform TOP 将一个连续的 UV 坡道图缩小到单个网格单元的大小 (例如 1/6)。

利用 Math TOP 对其进行偏移, 使其中心对齐原点。

最后, 将这个微型 UV 坡道图与我们随机化的中心点坐标图相加。这样, 每个随机中心点都“长”出了一个完整的 UV 填充, 形成最终的乱序 UV 查找图。

“玻璃砖” 效果的法线贴图生成

这个效果通过在原始 UV 贴图上叠加一个程序化生成的法线贴图来实现, 模拟光线折射。

计算距离: 使用 Math TOP 的 Length 模式, 计算每个像素到其所在网格单元中心的距离。这会生成一系列以网格中心为圆心的圆形渐变 (距离场)。

应用勾股定理计算高度:

根据公式 height = sqrt(radius² – distance²) 来构建高度图。

首先, 我们得到距离的平方 (distance²)。

然后, 从一个预设的半径平方值 (radius²) 中减去它。

最后, 对结果取平方根 (sqrt), 便得到了一个代表半球体表面的高度图 (亮度越高, 代表位置越高)。

从高度图到法线贴图: 使用 Slope TOP 节点, 它可以分析输入的高度图中每个像素的亮度变化率 (斜率), 并将其转换为一个标准的法线贴图。

最终合成: 将生成的法线贴图与之前创建的 (有序或乱序的) UV 贴图通过 Add TOP 相加。这个微小的、由法线贴图带来的坐标偏移, 会被 Remap TOP 解释为对源图像像素的拾取位置偏移, 从而创造出逼真的玻璃凹凸和折射效果。

5. 关键节点与参数解析 (Key Nodes & Parameter Analysis)

Constant CHOP:

功能: 用于全局定义和控制关键参数, 如 resolution (分辨率) 和 grid (网格维度)。方便统一修改。

Ramp TOP:

功能: 用于生成基础的 UV 坐标图 (Type: Vertical, Horizontal) 和网格索引图 (一维, 36×1 像素)。

关键参数: Resolution (分辨率), Pixel Format (像素格式, 设为 32-bit float 以保证精度)。

Fit TOP:

功能: 将连续的 UV 坡道图量化为网格化的中心点坐标。

关键参数: Fit: Native Resolution, Scale: 1, Translate: 0, Fit Method: Nearest Pixel。

Sort CHOP:

功能: 随机化网格索引的核心节点。

关键参数: Order -> Sample Order Method: Random。

Remap TOP:

功能: 使用了两次。第一次用于根据随机索引重排网格中心点; 第二次是最终步骤, 应用生成的 UV/法线贴图来扭曲源图像。

关键参数: Input 1: UV/Normal Map, Input 2: Source Image, Extend UV: Mirror (用于处理边缘, 避免黑边)。

Transform TOP:

功能: 将一个完整的 UV 贴图缩放到单个网格单元的大小。

关键参数: Scale: 1/grid, Pivot: (0, 0), Extend: Repeat。

Math TOP:

功能: 执行各种数学运算, 是本教程中使用最频繁的节点之一。

用于重新中心化 UV (Subtract 0.5)。

计算距离场 (Channel Pre-Op: Length)。

计算平方和与平方根, 以实现勾股定理。

关键参数: Operation (操作类型), Pre-Op (通道预操作), Post-Op (通道后操作)。

Slope TOP:

功能: 将单通道的高度图转换为三通道的 RGB 法线贴图。

关键参数: Green: Vertical Luminance, Blue: Neutral, Strength (控制凹凸强度)。

Add TOP:

功能: 将基础 UV 贴图与生成的法线贴图叠加, 合成最终的失真效果贴图。

6. 总结 (Conclusion)

本教程从一个图像网格随机化的案例出发, 深入探索了 TouchDesigner 中程序化纹理生成 (Procedural Texture Generation) 的强大能力。我们不仅学习了如何通过 CHOPs 对数据进行排序和随机化, 还掌握了如何利用数学和计算机图形学原理 (如勾股定理) 来创建复杂的高度图和法线贴图, 从而实现高级的视觉特效。

扩展应用方向:

动态效果: 可以通过 Noise CHOP 或 LFO CHOP 驱动 Sort CHOP 的 Seed (种子) 参数, 实现动态的、不断变化的网格洗牌效果。

改变形状: 在生成高度图的 Math TOP 环节中, 将 Length 替换为 Maximum 等其他算法, 可以将半球体变为金字塔或其他多边形形状, 创造出更多样的折射质感。

交互控制: 将网格数量、法线强度 (Slope 的 Strength)、半径等关键参数链接到 MIDI 控制器或传感器数据, 实现可实时交互的视觉装置。