一直关注我动态的朋友应该知道我手上有一个叫BISHI的系列视觉实验从最早的单帧水墨质感练习到后来逐渐转向连续动态影像前前后后已经攒了十几个版本。这次要聊的BISHI11是最近刚收尾的一版主题就四个字变幻莫测。这版的核心目标很明确——让画面在每一秒都处于持续变化之中形态、光影、色彩全面流动但整体又不至于散成一盘沙。听起来有点像又要马儿跑又要马儿不吃草但实际做下来这套平衡是可以靠参数设计拿捏的。这个系列适合谁看如果你是做视觉设计、动态影像、程序化艺术或者刚开始接触 TouchDesigner、GLSL 这类工具那这篇复盘里关于变化节奏控制、噪声驱动、渲染输出的思路应该能帮你少走不少弯路。哪怕你平时只做平面设计也会发现这些让画面动起来的底层逻辑放在静态排版里同样处处适用。1. 项目缘起为什么想做变幻莫测这组视觉实验1.1 从笔势延续下来的系列创作BISHI 这个名字取自笔势。最早做这个系列是因为我发现传统书画里对势的把握特别迷人——一笔下去有起承转合有轻重缓急静止的墨线上能看出运动感。当时我就想如果把这套规律搬到数字媒介上用代码、粒子、噪声来重新演绎会是一种什么结果。于是有了 BISHI 系列的连续实验。前几版做的多是单体素材比如一张墨迹、一段线条追求的是单张画面的气质。到了第十一版我刻意做了一个方向转变不再让画面停留在某一个瞬间而是让整张画面自己活起来。这也是变幻莫测这个主题的由来——我想做的是那种你盯着看三十秒每一秒都跟上一秒不完全一样却始终保持着同一个家族气质的东西。1.2 变幻莫测的视觉坐标变幻莫测用在视觉语言里到底指的是什么我给自己的定义是结构有变化、光影有呼吸、色彩有漂移、整体有情绪。它不是简单的一直在动而是变化的方向、幅度、节奏有一种不可预测感。自然界里这种感受最典型。拿一滴墨滴进清水里来说墨会散开、旋转、沉淀过程中你永远猜不到下一帧它会变成什么样但不管怎么变它的色调、质感和形态基因始终统一。再想想云层翻滚、布料起伏、夕阳下水面碎光流转都是同一个道理。所以这版作品从一开始就不是做一个炫酷的动态壁纸而是捕捉并模拟活物的反应与不确定性把野生感和秩序感揉在一起。1.3 设定技术边界可控与失控的配比做这类创作有个容易踩的大坑一开始就开大范围的随机。所有参数全部乱跳画面确实变幻了但观众看两秒就会觉得烦躁因为没有东西能抓住眼睛。反过来如果所有参数都固定那又变回了一幅静态画。我的处理方式是在项目启动前就给自己立规矩主干参数在一定范围内自由流动但范围的上下限必须经过人为约束。这就好比让一个爵士乐手即兴但调性、拍号和曲式结构还是定死的——自由发挥永远在现场的框架里。落实到具体技术上我用了两层控制第一层是核心的几何形体和光影基调保证画面还是那个画面第二层是叠加在上面的噪声、色相偏移、材质扰动给画面注入不可预测的细节。边界定清楚之后失控也就成了另一种可控。2. 设计思路拆解让画面活起来的三层变化变幻莫测如果只有一层变量很快就会被看穿——观众会意识到哦原来就是一个圆圈在变大变小这就没意思了。我把变化拆成了三个相互叠加、却不同步的层级形态、光影、色彩。它们各自按照独立的节奏运转合在一起时才会产生那种怎么下一秒又会变成这样的错觉。2.1 形态层让结构自己长出来形态层的目标是让画面里的主体结构不断流动像有机生物一样缓慢生长。我用的核心手段是噪声驱动的顶点偏移先搭一个基础的几何网格然后把噪声函数叠加到网格顶点的位置坐标上。这个过程用一句话解释就是不让形状保持数学意义上的光滑而是让每一个顶点都按照一个连续但随机的规律在空间里发生微小移动。由于相邻顶点的噪声值是连续的所以整体看过去不是乱甩而是像果冻、布料或流体一样在扭动。关键点在于噪声的频率和振幅配比。频率决定皱褶密度——频率高表面细节多频率低整体形态更接近笨拙的缓慢变形。振幅决定变形程度——振幅小只是表面微微呼吸振幅大整个结构会被拉扯到面目全非。我会把同等量的变形同时作用在多个尺度上也就是做多层噪声叠加FBM这样画面既保留了大的形态轮廓细看又全是层叠的小变化。2.2 光影层把材质从静止里解放出来形态在动如果灯光纹丝不动画面依然会闷。我做的第二件事是让光影也活起来。这里没有走复杂的物理灯光路线而是用了更直接的方法在着色器里动态调制反照率、粗糙度和自发光强度。以球体材质为例粗糙度的数值在高光和哑光之间平滑游走反照率在偏亮和偏暗之间缓慢变化自发光用噪声做扰动——这样一来即使体块本身没动高光的位置和面积也在不断流转看起来就像光线自己会钓鱼一样。更重要的一步是引入视差感。我用一个额外的噪声场驱动法线贴图的偏移让原本平滑的表面产生细微的凹凸变化并且这些凹凸是实时流动的。这一步对鲜活感的提升极大物体不再像一块塑料雕塑而是像是有生命的皮肤。很多动态视觉作品一眼看去很CG问题往往就出在表面太干净、太静态。2.3 色彩层给画面装一个自动漂移的情绪色彩是最容易出效果、也最容易翻车的一层。如果让色相在0到360度之间全范围随机跳画面会迅速变得像霓虹灯故障现场。我的策略是固定一个基色区间只在这个区间内缓慢漂移同时让不同区域的色彩变化不同步。比如这一版 BISHI11 里我选的是橙褐到青灰这条连续的色相带色相偏移始终在10度到180度这个范围内游走。饱和度维持在30%到70%之间亮度则交给光影层一起联动。这样出来的效果就是画面有时偏暖、有时偏冷、有时呈中间调情绪跟着色彩像潮汐一样自然起伏。不同步也很重要。我在 CPU 侧给画面的左上、右下等几个区域分别赋了不同的时间偏移值让每个区域的色相变化都有自己的相位。整体来看画面不是整张一起换色而是像水彩晕开一样一部分先变另一部分追着变——这个细节让变这件事有了空间流动性而不是简单的全局滤镜。3. 实操落地从零搭建一套变幻莫测的视觉引擎3.1 工具选型我为什么选了 TD GLSL做这种动态视觉工具选择其实挺多的。拿 AE 硬叠关键帧不是不行但那是线性动画的思路想让曲线之间互相影响、实时反馈会很痛苦。Processing 也很好画布逻辑清晰但对实时合成 节点连线 参数面板这套工作流支持有限。我最后选择了TouchDesigner 配合 GLSL 着色器的组合。TouchDesigner 的好处在于它的节点式流程很适合调参。形态、光影、色彩各有独立的节点模块模块之间通过 CHOP 通道控制信号连接相当于把参数本身变成了一条线——想同时调节五个参数时只需要把数值信号广播到目标节点就行。而 GLSL 负责干最重的活在 GPU 里直接处理顶点和像素级别的变化效率吊打 CPU 逐帧计算。我的项目架构大概是这样的一个 GLSL TOP 节点作为主渲染核心接收来自 CHOP 的噪声频率、振幅、色相偏移等控制信号另外几个 TOP 节点做后处理比如辉光、模糊、色调映射。这样既保留了实时预览的速度又在意料之外的地方留了足够的自由操作空间。GLSL TOP (核心形态 光影 色彩) ↓ 辉光 TOP (提升光感) ↓ 模糊 TOP (柔化细节) ↓ 色调映射 TOP (输出成片画面)3.2 底盘搭建稳定底座的三个关键节点不管画面怎么变总得先有一个不会崩的底盘。我搭底座时只做了三件事定画布、定基础几何、定材质模式。定画布指的是分辨率和画面比例。这版我统一用 1920×1080 的横构图因为后续打算输出成视频放到大屏上看而且横构图对形态横向铺开的表达更友好。如果做竖屏短视频建议直接用 1080×1920适配合适的画面逻辑。定基础几何就是决定画面中心是一个球体、平面还是曲线网格。这次我用了三个球体一个主球在画面中央偏左两个辅球在两侧三个球体用同一个噪声场驱动但各自有不同的权重所以它们的变化不是复制粘贴。球体作为基础形有一个天然优势——任何角度都好看而且顶点分布均匀做位移扰动时不容易出现穿插或穿帮。定材质模式我直接选用了自带散射的塑料材质但最关键的参数是Base Normal 的强度也就是法线贴图的混入比例。这一步决定物体看起来是软的还是硬的。我把它绑定到一个低频正弦波上让它在0.2到0.8之间周期性变化——物体会在看起来像海蜇和看起来像瓷器之间反复横跳直接从材质层面参与变幻莫测。3.3 核心驱动噪声扰动 UV 与顶点偏移底子搭好了接下来写主角。我在 GLSL 里写了一段基于多层 Simplex 噪声的 UV 扰动逻辑。原理不复杂把渲染坐标 uv 打进噪声函数用噪声返回值反过来偏移 uv再用偏移后的 uv 去采样图案。这样原本均匀的线条或颜色就会像水中倒影一样不断抖动、断裂、重组。下面这段是简化后的核心片段方便直接理解和修改uniform vec2 u_res; uniform float u_time; uniform float u_freq; // 噪声频率越大细节越密 uniform float u_amp; // 偏移幅度越大变形越猛 uniform float u_speed; // 时间流速控制变化快慢 // Simplex 或 Perlin 噪声函数省略此处假设 noise() 已定义 void main() { vec2 uv (gl_FragCoord.xy * 2.0 - u_res) / u_res.y; // 用低频噪声制造大尺度流动 float n1 noise(uv * 1.5 u_time * 0.15 * u_speed); float n2 noise(uv * 1.5 - u_time * 0.12 * u_speed 7.3); // 用高层级 FBM 制造细碎闪烁感 float n3 noise(uv * 6.0 vec2(n1, n2) * 2.0 u_time * 0.4 * u_speed); // 合并扰动位移 vec2 p uv; p vec2(n1 - 0.5, n2 - 0.5) * u_amp; p vec2(n3 - 0.5, n3 * 0.7 - 0.35) * u_amp * 0.3; // 用扰动后的坐标绘制基础纹理 float d length(p * vec2(0.75, 1.0)) ; float shape smoothstep(0.42, 0.38, d); // 输出主体颜色后续叠色相映射 vec3 col mix(vec3(0.05, 0.04, 0.03), vec3(0.95, 0.45, 0.15), shape); gl_FragColor vec4(col, 1.0); }这里最重要的调节点是 u_amp。实验中我发现u_amp 在 0.05 到 0.3 之间是优雅活物感的安全区间低于 0.05 几乎看不出来高于 0.3 就会变成彻底的液体乱甩视觉重心直接被扯没了。u_freq 我通常保持在 2 到 6 之间这个范围能兼顾轮廓的整体性和细节的丰富度。3.4 联动调参让形态、光影、色彩共用一组控制GLSL 做着色器TouchDesigner 负责给这些 uniform 实时喂数值。这一步的关键是把所有参数集中到一颗控制球上。我在TD里创建了一个 LFO CHOP输出一路周期性变化的信号然后把这路信号经过若干个Math CHOP做范围映射分别输出到 u_freq、u_amp、u_speed 等输入端。这就像给所有参数找了一个共同的呼吸节拍器——它们都在动但各自波动的相位和范围不一样于是产生了错落有致的自然感。举个例子只有一个节奏控制全场的做法是数值A和B都按同一频率变化观感生硬我做了三个不同周期的 LFO周期分别设定为 3 秒、7 秒、13 秒。三个周期的最小公倍数很长意味着画面大约需要 270 多秒才会完整重复一次人类盯着一分钟内的变化会觉得这好像是源源不断的新东西。这种共用驱动 各异相位的思路是我做完这一版之后最大的收获。想复现的朋友可以直接套用这个模式先定一个主时钟再派生几个相差较大的频率分配到不同属性上。3.5 输出与渲染从预览到成片的最后一步实时预览和最终成片之间永远有差距。预览时为了流畅我会把画布分辨率降到 960×540甚至关掉部分后处理节点。等到确认所有参数都满意了再切回 1920×1080 输出序列帧。关键设置如下渲染帧率锁定 30fps输出格式用 PNG 序列帧。我不用 H.264 直出原因很简单万一某几帧有闪烁或者噪点序列帧可以单独替换而视频文件就得整段重渲。序列帧全部生成后再导入剪辑软件按 30fps 组装成 ProRes 422 的母版最后再压一版 H.264 方便传播。渲染合成环节还要注意后处理的次序。我的顺序固定为辉光 → 模糊 → 色调映射 → 轻微噪点。辉光能给高光一点柔和的溢出感是光感的主要来源模糊会让噪讯扰动产生的水彩感更圆润色调映射负责把亮部和暗部收在一个舒适的动态范围内。4. 常见问题与排查实录这一路迭代下来踩过的坑实在不少挑几个高频的出现频率最高的做个速查手册。很多问题你在文档里根本找不到答案因为参数没炸之前你压根不知道什么是炸。4.1 画面太乱看不到视觉中心这是最容易出现的问题尤其是第一次把所有变化同时开大的时候。满屏都是东西眼睛不知道往哪放这种画面再变幻也没有意义。排查思路先从形态层下手把 u_amp 直接砍到原来的一半甚至更多。如果画面回归稳定说明问题出在变形幅度太大。接下来检查色彩层是不是全图都在大幅度漂移——如果是就把色彩变化的范围缩到一条窄色带里只让局部区域参与漂移。我自己的经验是画面里最好保证至少一块区域是相对稳定的。哪怕只是一个模糊的光晕、一小块底色不变观众的眼睛就有了落脚点。变幻的部分越复杂这个稳定锚点就越重要。4.2 变化节奏失控要么太快要么太慢如果观众反馈眼晕多半是变化节奏太快噪声一上来就高频乱闪如果反馈不动多半是低频占比太高数值波动幅度压根不够。排查手段挺直接把 u_time 的系数单独拉出来做成一个可调参数从0开始慢慢往上加。你要找的那个甜点通常在 0.15 到 0.6 这个区间。超过 1.0 之后就会明显进入躁动区。另外要注意变化节奏不等于参数速度。参数变化快慢是线性时间的问题但视觉节奏还受信号波形影响。用正弦波驱动的参数动起来是先慢后快再慢,显得更从容。用三角波驱动的参数则是匀速往返机械感强适合偏冷峻的风格。我在这版里基本全用了正弦波只在色彩层混了一点三角波——这样转换时会有轻微的顿挫感反而让画面更有笔势的停顿节奏。4.3 色彩脏、扎眼、没有高级感数码感太重颜色像彩虹糖这类反馈多半是饱和度拉太满、色相区间太宽导致的。很多人一听说色彩要漂移直接让 hue 从 0 转到 360结果就是一场灾难。我的避坑方法是预先在色轮上选定两个色相锚点比如 25 度和 190 度然后只用这两个锚点之间的插值区间做漂移。更重要的是把饱和度上限控制在 75% 以下亮度不要全程顶格给暗部留出透气空间。如果你对配色没有把握可以直接用现成的色彩模板再微调。我在这一版先用了一组低调的标题橙褐-青灰然后在材质参数里把 subsurface 强度调高了一点让色彩之间出现透光混合的效果。中间调不再是一条死线而是丰富的过渡带——这比单纯靠色相偏移做出的颜色要耐看得多。4.4 预览卡顿与渲染意外中断实时预览卡顿是TD使用者的家常便饭。我的习惯是开发阶段一律用一半分辨率后处理节点全部 bypass只看基础效果。等到要出片了再逐步开启。如果开了之后帧率还有问题优先检查是否是辉光或模糊的半径开太大。渲染中断最头疼而且通常发生在跑了几个小时后。应对策略是给输出序列帧的文件名加上四位数的帧序号比如 frame_0001.png 这种格式。这样哪怕渲染到一半崩了也不用从头重来——直接从断点帧继续即可。另外设置里要关掉自动创建新文件夹否则大工程里找文件会找得想哭。5. 几组可以直接抄作业的参数模板光讲思路不给配置等于耍流氓。我把 BISHI11 过程中验证有效的三套参数组合整理如下。可以直接套进自己的项目里微调每个数值都经过实际渲染测试能出效果不容易翻车。5.1 模板A雾中墨迹克制、文人气质u_freq2.2u_amp0.08u_speed0.25色相锚点15° 到 45°饱和度25% 到 45%粗糙度0.4 到 0.7基础几何单球体 弱法线扰动这套参数的变化非常轻像隔着毛玻璃看墨在水中缓慢化开适合做氛围背景、片头底纹或者书籍装帧的动态素材。5.2 模板B熔岩之夜张力、戏剧性u_freq5.5u_amp0.22u_speed0.55色相锚点15° 到 205°饱和度45% 到 70%粗糙度0.1 到 0.9基础几何三球体 强法线扰动 辉光拉高这套参数让画面处于即将沸腾但还没沸腾的状态暗部有红色在翻涌亮部时不时跳出冷青色非常适合音乐节 VJ、舞台背景这类需要抓眼球的场景。但要注意把变化周期拉慢一点别让两个色相频繁交替否则会变成廉价迪厅灯球。5.3 模板C深海微光安静、通透u_freq3.0u_amp0.12u_speed0.15色相锚点175° 到 220°饱和度15% 到 35%粗糙度0.5 到 0.8基础几何单球体 法线扰动弱 色调映射压亮部门儿清且温柔。这套会让我想到阳光透进深海的画面变化像水下暗流一样存在但不容易察觉适合冥想类 App、展览序厅、睡眠场景的视觉配图。三套模板用的都是同一个项目架构只是改了驱动参数的值域和 LFO 的频率。这就是我反复强调架构先行的价值底子想明白了风格切换只需要动数值不需要重写代码。6. 创作之外的小经验如何让实验真正沉淀下来视觉实验做多了最大的敌人不是没想法而是做完就忘。我有个习惯每完成一个版本都会给项目建一个 one-page 文档记录当时的核心思路、关键参数、踩过的坑、以及哪些节点可以复用到下一版。BISHI11 完成时我顺手写了一份后来回看时才发现很多当时觉得很自然的决定其实都藏着规律。另一个特别想分享的细节是一个实验项目最好不要追求样样都做全。如果你每版都同时塞形态、光影、色彩、交互、声音最后只会得到一个面目模糊的大杂烩。这次我就刻意把交互砍了声音也只在渲染时后续配全部精力都放在变化本身上。一言以蔽之做变幻莫测类视觉核心不在于变化多到让人眼花而在于变化有序到让人觉得一切都正在发生却永远不会重复。参数是死的配比是活的多试几组你也能找到属于自己的节奏。
变幻莫测的视觉实验：用TouchDesigner与GLSL实现动态程序化艺术
一直关注我动态的朋友应该知道我手上有一个叫BISHI的系列视觉实验从最早的单帧水墨质感练习到后来逐渐转向连续动态影像前前后后已经攒了十几个版本。这次要聊的BISHI11是最近刚收尾的一版主题就四个字变幻莫测。这版的核心目标很明确——让画面在每一秒都处于持续变化之中形态、光影、色彩全面流动但整体又不至于散成一盘沙。听起来有点像又要马儿跑又要马儿不吃草但实际做下来这套平衡是可以靠参数设计拿捏的。这个系列适合谁看如果你是做视觉设计、动态影像、程序化艺术或者刚开始接触 TouchDesigner、GLSL 这类工具那这篇复盘里关于变化节奏控制、噪声驱动、渲染输出的思路应该能帮你少走不少弯路。哪怕你平时只做平面设计也会发现这些让画面动起来的底层逻辑放在静态排版里同样处处适用。1. 项目缘起为什么想做变幻莫测这组视觉实验1.1 从笔势延续下来的系列创作BISHI 这个名字取自笔势。最早做这个系列是因为我发现传统书画里对势的把握特别迷人——一笔下去有起承转合有轻重缓急静止的墨线上能看出运动感。当时我就想如果把这套规律搬到数字媒介上用代码、粒子、噪声来重新演绎会是一种什么结果。于是有了 BISHI 系列的连续实验。前几版做的多是单体素材比如一张墨迹、一段线条追求的是单张画面的气质。到了第十一版我刻意做了一个方向转变不再让画面停留在某一个瞬间而是让整张画面自己活起来。这也是变幻莫测这个主题的由来——我想做的是那种你盯着看三十秒每一秒都跟上一秒不完全一样却始终保持着同一个家族气质的东西。1.2 变幻莫测的视觉坐标变幻莫测用在视觉语言里到底指的是什么我给自己的定义是结构有变化、光影有呼吸、色彩有漂移、整体有情绪。它不是简单的一直在动而是变化的方向、幅度、节奏有一种不可预测感。自然界里这种感受最典型。拿一滴墨滴进清水里来说墨会散开、旋转、沉淀过程中你永远猜不到下一帧它会变成什么样但不管怎么变它的色调、质感和形态基因始终统一。再想想云层翻滚、布料起伏、夕阳下水面碎光流转都是同一个道理。所以这版作品从一开始就不是做一个炫酷的动态壁纸而是捕捉并模拟活物的反应与不确定性把野生感和秩序感揉在一起。1.3 设定技术边界可控与失控的配比做这类创作有个容易踩的大坑一开始就开大范围的随机。所有参数全部乱跳画面确实变幻了但观众看两秒就会觉得烦躁因为没有东西能抓住眼睛。反过来如果所有参数都固定那又变回了一幅静态画。我的处理方式是在项目启动前就给自己立规矩主干参数在一定范围内自由流动但范围的上下限必须经过人为约束。这就好比让一个爵士乐手即兴但调性、拍号和曲式结构还是定死的——自由发挥永远在现场的框架里。落实到具体技术上我用了两层控制第一层是核心的几何形体和光影基调保证画面还是那个画面第二层是叠加在上面的噪声、色相偏移、材质扰动给画面注入不可预测的细节。边界定清楚之后失控也就成了另一种可控。2. 设计思路拆解让画面活起来的三层变化变幻莫测如果只有一层变量很快就会被看穿——观众会意识到哦原来就是一个圆圈在变大变小这就没意思了。我把变化拆成了三个相互叠加、却不同步的层级形态、光影、色彩。它们各自按照独立的节奏运转合在一起时才会产生那种怎么下一秒又会变成这样的错觉。2.1 形态层让结构自己长出来形态层的目标是让画面里的主体结构不断流动像有机生物一样缓慢生长。我用的核心手段是噪声驱动的顶点偏移先搭一个基础的几何网格然后把噪声函数叠加到网格顶点的位置坐标上。这个过程用一句话解释就是不让形状保持数学意义上的光滑而是让每一个顶点都按照一个连续但随机的规律在空间里发生微小移动。由于相邻顶点的噪声值是连续的所以整体看过去不是乱甩而是像果冻、布料或流体一样在扭动。关键点在于噪声的频率和振幅配比。频率决定皱褶密度——频率高表面细节多频率低整体形态更接近笨拙的缓慢变形。振幅决定变形程度——振幅小只是表面微微呼吸振幅大整个结构会被拉扯到面目全非。我会把同等量的变形同时作用在多个尺度上也就是做多层噪声叠加FBM这样画面既保留了大的形态轮廓细看又全是层叠的小变化。2.2 光影层把材质从静止里解放出来形态在动如果灯光纹丝不动画面依然会闷。我做的第二件事是让光影也活起来。这里没有走复杂的物理灯光路线而是用了更直接的方法在着色器里动态调制反照率、粗糙度和自发光强度。以球体材质为例粗糙度的数值在高光和哑光之间平滑游走反照率在偏亮和偏暗之间缓慢变化自发光用噪声做扰动——这样一来即使体块本身没动高光的位置和面积也在不断流转看起来就像光线自己会钓鱼一样。更重要的一步是引入视差感。我用一个额外的噪声场驱动法线贴图的偏移让原本平滑的表面产生细微的凹凸变化并且这些凹凸是实时流动的。这一步对鲜活感的提升极大物体不再像一块塑料雕塑而是像是有生命的皮肤。很多动态视觉作品一眼看去很CG问题往往就出在表面太干净、太静态。2.3 色彩层给画面装一个自动漂移的情绪色彩是最容易出效果、也最容易翻车的一层。如果让色相在0到360度之间全范围随机跳画面会迅速变得像霓虹灯故障现场。我的策略是固定一个基色区间只在这个区间内缓慢漂移同时让不同区域的色彩变化不同步。比如这一版 BISHI11 里我选的是橙褐到青灰这条连续的色相带色相偏移始终在10度到180度这个范围内游走。饱和度维持在30%到70%之间亮度则交给光影层一起联动。这样出来的效果就是画面有时偏暖、有时偏冷、有时呈中间调情绪跟着色彩像潮汐一样自然起伏。不同步也很重要。我在 CPU 侧给画面的左上、右下等几个区域分别赋了不同的时间偏移值让每个区域的色相变化都有自己的相位。整体来看画面不是整张一起换色而是像水彩晕开一样一部分先变另一部分追着变——这个细节让变这件事有了空间流动性而不是简单的全局滤镜。3. 实操落地从零搭建一套变幻莫测的视觉引擎3.1 工具选型我为什么选了 TD GLSL做这种动态视觉工具选择其实挺多的。拿 AE 硬叠关键帧不是不行但那是线性动画的思路想让曲线之间互相影响、实时反馈会很痛苦。Processing 也很好画布逻辑清晰但对实时合成 节点连线 参数面板这套工作流支持有限。我最后选择了TouchDesigner 配合 GLSL 着色器的组合。TouchDesigner 的好处在于它的节点式流程很适合调参。形态、光影、色彩各有独立的节点模块模块之间通过 CHOP 通道控制信号连接相当于把参数本身变成了一条线——想同时调节五个参数时只需要把数值信号广播到目标节点就行。而 GLSL 负责干最重的活在 GPU 里直接处理顶点和像素级别的变化效率吊打 CPU 逐帧计算。我的项目架构大概是这样的一个 GLSL TOP 节点作为主渲染核心接收来自 CHOP 的噪声频率、振幅、色相偏移等控制信号另外几个 TOP 节点做后处理比如辉光、模糊、色调映射。这样既保留了实时预览的速度又在意料之外的地方留了足够的自由操作空间。GLSL TOP (核心形态 光影 色彩) ↓ 辉光 TOP (提升光感) ↓ 模糊 TOP (柔化细节) ↓ 色调映射 TOP (输出成片画面)3.2 底盘搭建稳定底座的三个关键节点不管画面怎么变总得先有一个不会崩的底盘。我搭底座时只做了三件事定画布、定基础几何、定材质模式。定画布指的是分辨率和画面比例。这版我统一用 1920×1080 的横构图因为后续打算输出成视频放到大屏上看而且横构图对形态横向铺开的表达更友好。如果做竖屏短视频建议直接用 1080×1920适配合适的画面逻辑。定基础几何就是决定画面中心是一个球体、平面还是曲线网格。这次我用了三个球体一个主球在画面中央偏左两个辅球在两侧三个球体用同一个噪声场驱动但各自有不同的权重所以它们的变化不是复制粘贴。球体作为基础形有一个天然优势——任何角度都好看而且顶点分布均匀做位移扰动时不容易出现穿插或穿帮。定材质模式我直接选用了自带散射的塑料材质但最关键的参数是Base Normal 的强度也就是法线贴图的混入比例。这一步决定物体看起来是软的还是硬的。我把它绑定到一个低频正弦波上让它在0.2到0.8之间周期性变化——物体会在看起来像海蜇和看起来像瓷器之间反复横跳直接从材质层面参与变幻莫测。3.3 核心驱动噪声扰动 UV 与顶点偏移底子搭好了接下来写主角。我在 GLSL 里写了一段基于多层 Simplex 噪声的 UV 扰动逻辑。原理不复杂把渲染坐标 uv 打进噪声函数用噪声返回值反过来偏移 uv再用偏移后的 uv 去采样图案。这样原本均匀的线条或颜色就会像水中倒影一样不断抖动、断裂、重组。下面这段是简化后的核心片段方便直接理解和修改uniform vec2 u_res; uniform float u_time; uniform float u_freq; // 噪声频率越大细节越密 uniform float u_amp; // 偏移幅度越大变形越猛 uniform float u_speed; // 时间流速控制变化快慢 // Simplex 或 Perlin 噪声函数省略此处假设 noise() 已定义 void main() { vec2 uv (gl_FragCoord.xy * 2.0 - u_res) / u_res.y; // 用低频噪声制造大尺度流动 float n1 noise(uv * 1.5 u_time * 0.15 * u_speed); float n2 noise(uv * 1.5 - u_time * 0.12 * u_speed 7.3); // 用高层级 FBM 制造细碎闪烁感 float n3 noise(uv * 6.0 vec2(n1, n2) * 2.0 u_time * 0.4 * u_speed); // 合并扰动位移 vec2 p uv; p vec2(n1 - 0.5, n2 - 0.5) * u_amp; p vec2(n3 - 0.5, n3 * 0.7 - 0.35) * u_amp * 0.3; // 用扰动后的坐标绘制基础纹理 float d length(p * vec2(0.75, 1.0)) ; float shape smoothstep(0.42, 0.38, d); // 输出主体颜色后续叠色相映射 vec3 col mix(vec3(0.05, 0.04, 0.03), vec3(0.95, 0.45, 0.15), shape); gl_FragColor vec4(col, 1.0); }这里最重要的调节点是 u_amp。实验中我发现u_amp 在 0.05 到 0.3 之间是优雅活物感的安全区间低于 0.05 几乎看不出来高于 0.3 就会变成彻底的液体乱甩视觉重心直接被扯没了。u_freq 我通常保持在 2 到 6 之间这个范围能兼顾轮廓的整体性和细节的丰富度。3.4 联动调参让形态、光影、色彩共用一组控制GLSL 做着色器TouchDesigner 负责给这些 uniform 实时喂数值。这一步的关键是把所有参数集中到一颗控制球上。我在TD里创建了一个 LFO CHOP输出一路周期性变化的信号然后把这路信号经过若干个Math CHOP做范围映射分别输出到 u_freq、u_amp、u_speed 等输入端。这就像给所有参数找了一个共同的呼吸节拍器——它们都在动但各自波动的相位和范围不一样于是产生了错落有致的自然感。举个例子只有一个节奏控制全场的做法是数值A和B都按同一频率变化观感生硬我做了三个不同周期的 LFO周期分别设定为 3 秒、7 秒、13 秒。三个周期的最小公倍数很长意味着画面大约需要 270 多秒才会完整重复一次人类盯着一分钟内的变化会觉得这好像是源源不断的新东西。这种共用驱动 各异相位的思路是我做完这一版之后最大的收获。想复现的朋友可以直接套用这个模式先定一个主时钟再派生几个相差较大的频率分配到不同属性上。3.5 输出与渲染从预览到成片的最后一步实时预览和最终成片之间永远有差距。预览时为了流畅我会把画布分辨率降到 960×540甚至关掉部分后处理节点。等到确认所有参数都满意了再切回 1920×1080 输出序列帧。关键设置如下渲染帧率锁定 30fps输出格式用 PNG 序列帧。我不用 H.264 直出原因很简单万一某几帧有闪烁或者噪点序列帧可以单独替换而视频文件就得整段重渲。序列帧全部生成后再导入剪辑软件按 30fps 组装成 ProRes 422 的母版最后再压一版 H.264 方便传播。渲染合成环节还要注意后处理的次序。我的顺序固定为辉光 → 模糊 → 色调映射 → 轻微噪点。辉光能给高光一点柔和的溢出感是光感的主要来源模糊会让噪讯扰动产生的水彩感更圆润色调映射负责把亮部和暗部收在一个舒适的动态范围内。4. 常见问题与排查实录这一路迭代下来踩过的坑实在不少挑几个高频的出现频率最高的做个速查手册。很多问题你在文档里根本找不到答案因为参数没炸之前你压根不知道什么是炸。4.1 画面太乱看不到视觉中心这是最容易出现的问题尤其是第一次把所有变化同时开大的时候。满屏都是东西眼睛不知道往哪放这种画面再变幻也没有意义。排查思路先从形态层下手把 u_amp 直接砍到原来的一半甚至更多。如果画面回归稳定说明问题出在变形幅度太大。接下来检查色彩层是不是全图都在大幅度漂移——如果是就把色彩变化的范围缩到一条窄色带里只让局部区域参与漂移。我自己的经验是画面里最好保证至少一块区域是相对稳定的。哪怕只是一个模糊的光晕、一小块底色不变观众的眼睛就有了落脚点。变幻的部分越复杂这个稳定锚点就越重要。4.2 变化节奏失控要么太快要么太慢如果观众反馈眼晕多半是变化节奏太快噪声一上来就高频乱闪如果反馈不动多半是低频占比太高数值波动幅度压根不够。排查手段挺直接把 u_time 的系数单独拉出来做成一个可调参数从0开始慢慢往上加。你要找的那个甜点通常在 0.15 到 0.6 这个区间。超过 1.0 之后就会明显进入躁动区。另外要注意变化节奏不等于参数速度。参数变化快慢是线性时间的问题但视觉节奏还受信号波形影响。用正弦波驱动的参数动起来是先慢后快再慢,显得更从容。用三角波驱动的参数则是匀速往返机械感强适合偏冷峻的风格。我在这版里基本全用了正弦波只在色彩层混了一点三角波——这样转换时会有轻微的顿挫感反而让画面更有笔势的停顿节奏。4.3 色彩脏、扎眼、没有高级感数码感太重颜色像彩虹糖这类反馈多半是饱和度拉太满、色相区间太宽导致的。很多人一听说色彩要漂移直接让 hue 从 0 转到 360结果就是一场灾难。我的避坑方法是预先在色轮上选定两个色相锚点比如 25 度和 190 度然后只用这两个锚点之间的插值区间做漂移。更重要的是把饱和度上限控制在 75% 以下亮度不要全程顶格给暗部留出透气空间。如果你对配色没有把握可以直接用现成的色彩模板再微调。我在这一版先用了一组低调的标题橙褐-青灰然后在材质参数里把 subsurface 强度调高了一点让色彩之间出现透光混合的效果。中间调不再是一条死线而是丰富的过渡带——这比单纯靠色相偏移做出的颜色要耐看得多。4.4 预览卡顿与渲染意外中断实时预览卡顿是TD使用者的家常便饭。我的习惯是开发阶段一律用一半分辨率后处理节点全部 bypass只看基础效果。等到要出片了再逐步开启。如果开了之后帧率还有问题优先检查是否是辉光或模糊的半径开太大。渲染中断最头疼而且通常发生在跑了几个小时后。应对策略是给输出序列帧的文件名加上四位数的帧序号比如 frame_0001.png 这种格式。这样哪怕渲染到一半崩了也不用从头重来——直接从断点帧继续即可。另外设置里要关掉自动创建新文件夹否则大工程里找文件会找得想哭。5. 几组可以直接抄作业的参数模板光讲思路不给配置等于耍流氓。我把 BISHI11 过程中验证有效的三套参数组合整理如下。可以直接套进自己的项目里微调每个数值都经过实际渲染测试能出效果不容易翻车。5.1 模板A雾中墨迹克制、文人气质u_freq2.2u_amp0.08u_speed0.25色相锚点15° 到 45°饱和度25% 到 45%粗糙度0.4 到 0.7基础几何单球体 弱法线扰动这套参数的变化非常轻像隔着毛玻璃看墨在水中缓慢化开适合做氛围背景、片头底纹或者书籍装帧的动态素材。5.2 模板B熔岩之夜张力、戏剧性u_freq5.5u_amp0.22u_speed0.55色相锚点15° 到 205°饱和度45% 到 70%粗糙度0.1 到 0.9基础几何三球体 强法线扰动 辉光拉高这套参数让画面处于即将沸腾但还没沸腾的状态暗部有红色在翻涌亮部时不时跳出冷青色非常适合音乐节 VJ、舞台背景这类需要抓眼球的场景。但要注意把变化周期拉慢一点别让两个色相频繁交替否则会变成廉价迪厅灯球。5.3 模板C深海微光安静、通透u_freq3.0u_amp0.12u_speed0.15色相锚点175° 到 220°饱和度15% 到 35%粗糙度0.5 到 0.8基础几何单球体 法线扰动弱 色调映射压亮部门儿清且温柔。这套会让我想到阳光透进深海的画面变化像水下暗流一样存在但不容易察觉适合冥想类 App、展览序厅、睡眠场景的视觉配图。三套模板用的都是同一个项目架构只是改了驱动参数的值域和 LFO 的频率。这就是我反复强调架构先行的价值底子想明白了风格切换只需要动数值不需要重写代码。6. 创作之外的小经验如何让实验真正沉淀下来视觉实验做多了最大的敌人不是没想法而是做完就忘。我有个习惯每完成一个版本都会给项目建一个 one-page 文档记录当时的核心思路、关键参数、踩过的坑、以及哪些节点可以复用到下一版。BISHI11 完成时我顺手写了一份后来回看时才发现很多当时觉得很自然的决定其实都藏着规律。另一个特别想分享的细节是一个实验项目最好不要追求样样都做全。如果你每版都同时塞形态、光影、色彩、交互、声音最后只会得到一个面目模糊的大杂烩。这次我就刻意把交互砍了声音也只在渲染时后续配全部精力都放在变化本身上。一言以蔽之做变幻莫测类视觉核心不在于变化多到让人眼花而在于变化有序到让人觉得一切都正在发生却永远不会重复。参数是死的配比是活的多试几组你也能找到属于自己的节奏。
