TouchDesigner “Pixelatte” 效果教程

大家好！欢迎来到我的 TouchDesigner 教程。今天，我将带大家创建一个我称之为“Pixelatte”的视觉效果。这个效果看起来有点像像素化，但它的实现方式非常独特，我们实际上会用许多不同大小的纹理合成分层，来构建最终的图像。这有点类似于“数据腐蚀”（data mush）的效果，通过将不同尺度的纹理叠加在一起，创造出一种动态变化的、而非静止的视觉体验。

**初始设置**

好了，我们开始吧。首先，我导入了一个视频文件作为基础素材（在我的示例中，我用的是一个三叶草的视频）。

接着，我使用一个 `Constant` CHOP 来控制一些关键参数，比如分辨率和播放速度。在这里，我将分辨率设置为 2048×2048，并将播放速度设为三分之二。你需要根据你的输出显示来适当调整分辨率，确保我们的纹理能够被正确映射，并且能稍微超出视口范围。这样，我就为后续的纹理重新映射和处理建立好了基础环境。

 **UV 映射**

接下来，我要创建一个名为“UV”的 UV 坐标映射，这将是我们进行纹理重新映射的核心。

为了让项目文件看起来更整洁，我习惯将所有操作器的背景都设为黑色，这样管理起来会方便很多。现在，我使用一个 `Ramp` TOP 来生成一个分辨率为 32×32 的单通道渐变。我需要翻转这个梯度图像，让它的起点位于左下角。然后，我用一个 `Reorder` TOP 来调整通道，将绿色通道设为输入2，最终输出一个 32×32 的 RGB 格式图像。

这个 UV 映射现在是后续 `Remap` TOP 的基础。在这一步，你看到的图像不会有任何变化，直到我们加入噪声来扰动它。

**应用 Remap 和噪声**

现在，我将刚刚创建的 UV 映射应用到一个 `Remap` TOP 上。正如我刚才说的，图像暂时还没变化，因为我们还需要对 UV 进行修改。

为了实现那种块状的失真效果，也就是我们追求的“像素化”，我将插入一个噪声贴图来修改 UV。我不会只用一个噪声纹理，而是会创建多个，并且每个纹理的尺寸都是前一个的一半，逐级递减。

在创建这些噪声纹理时，我使用了“邻近像素”（Nearest Pixel）的采样方式，这样可以保持像素边缘的清晰感。对于噪声的参数，我设置周期（Period）大约为 `301`，谐波（Harmonics）为 `1`，谐波增益（Harmonic Gain）为 `1`，指数（Exponent）为 `5`。这样设置可以形成以黑白像素为主的强烈对比效果。

 **噪声纹理合成**

有了这些不同尺寸的噪声纹理后，我需要将它们合成为一个。我使用一个 `Composite` TOP，并将混合模式设置为“最大值”（Maximum）。这样一来，尺寸最大的块状纹理就会在视觉上占据主导地位。

请记住，合成的分辨率需要与输入分辨率匹配，以避免任何不必要的缩放问题。同时，采样模式也要继续保持“邻近采样”，以维持我们想要的像素化效果。最后，我将这个合成好的噪声纹理连接到之前的 `Remap` 操作中，这样，最终的像素化图像就生成了。

 **噪声动画**

静态的效果还不够，我希望它动起来。我通过将变换速度与绝对帧数（`absTime.frame`）绑定，来为噪声纹理添加动画。

我的计算方式是：用绝对帧数乘以一个速度值，然后再除以一个缩放系数（比如 1024），这样就能实现比较缓慢、平滑的运动。你可以随时调整这个速度参数，来控制噪声运动的快慢。适度的移动能让这些像素块看起来充满活力，避免画面显得单调。

 **通过噪声偏移来平衡视觉效果**

我发现，如果不做调整，所有尺寸的像素块会均匀分布，画面看起来有些呆板。为了解决这个问题，我会逐层偏移那些尺寸较小的噪声纹理。

具体来说，我会给每一层噪声设置一个递增的偏移值，比如第一层是 `0.5`，第二层是 `0.51`，第三层是 `0.52`，以此类推。我用一个简单的公式来计算偏移值，即用数字索引乘以一个系数再除以100，来确保偏移的步进是均匀的。这样做可以减少像素大小的均匀分布，让更大尺寸的像素块出现的频率更高，从而创造出一种更和谐、更美观的画面。

**最终调整**

在处理偏移时，我发现图像的整体位置也发生了偏移。为了解决这个问题，我使用了一个 `Mod` TOP，并利用颜色编码通道（红色代表 X 轴，绿色代表 Y 轴）来单独调整 X 轴的数值，通过屏蔽特定通道，我可以精确地进行调整。

我还利用了预加（pre-add）操作，确保合成后的噪声纹理位置能够居中。如果你的纹理边缘出现了一些视觉瑕疵，可以考虑使用镜像技术来修补它们，提升画面的完整性。

最后，我保留了所有关键参数的灵活性，比如像素大小、速度、偏移范围和颜色屏蔽，这样你就可以根据自己的需求方便地进行自定义调整。

**结论**

通过以上这些步骤，我们利用多层噪声纹理和 UV 重新映射技术，在 TouchDesigner 中成功创建了一个动态的“Pixelatte”像素化效果。你可以自由调整分辨率、噪声尺度、偏移和动画速度等参数，来打造属于你自己的、快速变化的独特视觉。

感谢大家的观看和支持！也希望大家能继续支持我在视觉计算领域的研究与创作探索。想获取更多支持、教程和项目更新，也欢迎关注我的小红书和其他社交媒体渠道。