企业官网建设流程全解析

TiXL Rings 算子完全指南：同心圆环图案生成、逐参数解析与动画技巧

【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3

本篇技术指南以 TiXL（Tooll 3）教程视频Tip#004 – The Rings Effect的讲解脉络为核心，结合仓库中 Rings 算子定义、参数与界面配置 及其 HLSL 着色器实现，逐一剖析 Rings 算子的全部参数，说明哪些参数适合动画驱动，并给出可复现的实战配方。读完本文，你将能够用 Alt-悬停预设快速预览造型、用双值参数制造有机的不规则环带、用 Highlight 与 Seed 组合让环带逐圈"点亮"，以及用 Distort 与 Contrast 将平面圆环弯成透视隧道与柔光渐变。

Rings 算子是什么

Rings 位于Lib.image.generate.pattern命名空间，是 TiXL 内置的程序化纹理生成算子：它不依赖外部图片，而是在 GPU 上逐像素计算并输出一张同心圆环（concentric rings）纹理。其官方说明为：

Generates a procedural rings texture that can produce a wide variety of radial patterns. Please try the presets.

一个算子就能覆盖"简单唱片纹"到"有机碎片环带"再到"透视隧道"的巨大造型区间，因此在 VJ、实时视觉与循环动画中极为常用。仓库中多个示例作品直接引用它，例如 avjam24 场景中的 _AVColorRings 与 Deadline2021。

从源码结构看，Rings 是一个典型的"壳"型算子：真正的计算被委托给内部子算子_ImageFxShaderSetupStatic，该子算子加载着色器 Rings.hlsl，输出格式为R16G16B16A16_Float（见 Rings.t3 中OutputFormat配置）。也就是说，所有参数最终都被打包进常量缓冲区（cbuffer），由像素着色器psMain完成图案计算。这也意味着：调节任何参数都是实时的、GPU 并行执行的，非常适合现场演出场景。

第一课：Alt-悬停预设——最快的学习与创作入口

视频在 0:09→0:16 首先给出的建议是：Alt-悬停（Alt-hover）其预设，这是预览"一个算子能产生多大造型范围"的最快方式，在触碰任何旋钮之前就能浏览海量外观。

实操方法：

1. 在图元（Symbol）列表中定位 Rings 算子（image/generate/pattern/Rings）；
2. 按住Alt 键并悬停/点击其预设条目；
3. 逐个浏览不同预设下环带的密度、颜色、扭曲与高亮差异；
4. 找到心仪造型后，选中对应预设作为起点，再进行微调。

这套工作流背后的意义是：Rings 的 23 个输入参数高度耦合（例如段数、扭曲、厚度互相影响），从零开始手调很难直觉地到达目标造型；而预设直接给出了"参数组合 → 视觉结果"的映射，相当于作者的调参经验集。TiXL 的预设与快照体系（见 PresetsAndSnapshots.md）正是为此设计的。

第二课：构建环带的四大基础参数

视频 0:20→0:47 讲解了决定环带基本结构的参数：Inner/Outer Radius、Count、Rotate、Offset。

Radius（内径/外径）

• 类型：Vector2（X = 内半径，Y = 外半径），默认(0, 0.5)；
• UI 范围：-1.0 ~ 1.0；
• 作用：定义环形色带（band）的径向范围。配合Position（Vector2，默认(0,0)，UI 范围 -1~1）可整体平移图案。

在着色器中，像素到圆心的距离先被归一化：

float normalizedDistance = (d2 - Radius.x) / (Radius.y - Radius.x);

Radius.x与Radius.y的差值决定了环带厚度与密度分布，因此改变内外半径差会直接影响每一条环的粗细。

Count（环数量）

• 类型：Single，默认0.5，UI 范围 0 ~ 100（Scale 0.01）；
• 作用：乘数——环带内同心圆的数量。着色器中单环宽度为ringRadius = (Radius.y - Radius.x) / RingCount，即把内外半径之间的区域均匀切分成Count份。

Count 是视频中明确标注"适合动画"的核心参数之一：将 Count 接入动画曲线或 LFO，可以看到环带由疏到密"呼吸"般的生长过程。

Rotate（旋转）与 Offset（偏移）

• Rotate：Single，默认 0，UI 范围 -180° ~ 180°（Scale 0.5），负责整组环的径向自旋（angle + Rotate / 180 / PI）；
• Offset：Single，默认 0，UI 范围 -1 ~ 1（Scale 0.01），为环相位引入偏移。

着色器中rings = normalizedDistance * RingCount + Offset，Offset 直接加在环序号上，配合动画可以产生环带向外/向内连续流动的效果——这正是视频所说的"trippy outward travel"：Offset 随时间增长，圆环就像从圆心不断涌出向外扩散，是制作循环动画（loop）的高性价比手法。

推荐动画组合：

第三课：让环带"有机化"——双值参数与随机化

视频 0:47→1:14 指出：大多数旋钮都带有一个成对的第二值（Y 通道），用于对该属性做逐环随机化，让图案看起来有机而非均匀。

这一机制在 Rings 中体现为_Segments、_Twist、_Thickness、_Ratio四个 Vector2 参数：X 是基础值，Y 是随机化幅度。每个环在着色器里根据环序号生成一个哈希值，再对基础值做扰动：

float2 ringHash = hash22(float2((ringIndex + 1) * 124.34 + 1.12, (Seed + 0.5) % 312.113)); float segments = _Segments.x + (ringHash.x - 0.5) * _Segments.y;

哈希函数hash22定义在 hash-functions.hlsl（第 47 行起），是逐环/逐段的确定性伪随机源——这意味着只要 Seed 不变，每一帧的图案都是稳定的，而动画 Seed 就能得到持续变化的新图案。

_Segments（段数）

• Vector2，默认(20, 0)，X 范围 1 ~ 10（UI）；
• 作用：把每一环拆分为若干圆弧段（arc）。X 决定基础段数，Y 决定各环节段数的随机偏差。段数越高，圆环越接近连续的圆形线框。

_Twist（扭曲）

• Vector2，默认(0, 0)，X 范围 -180 ~ 180；
• 作用：让段沿环序号逐圈错位，形成螺旋/扭动效果。ringAngle2 = mod(ringAngle + ringRotate.x * ringIndexFromCenter / RingCount, 1) * segments—— 偏离圆心越远的环，角向偏移越大，视觉上就像被"拧"过。

_Thickness（厚度）

• Vector2，默认(0.5, 0)，UI 范围 0 ~ 2（Scale 0.01）；
• 作用：控制环的粗细。Y 通道逐环随机厚度，配合Feather（Single，默认 0.0333，范围 -1~1）控制环边缘软硬过渡，可做出手绘笔触般的粗细不均感。

_Ratio（段占比）

• Vector2，默认(1.05, 0)，UI 范围 0 ~ 2；
• 作用：控制每个圆弧段占圆周的比例，X=1 表示满弧。Y 通道逐段随机，让某些弧段长、某些弧段短，从而打破"机械均匀"。

_FillRatio（填充比例）

• Single，默认 1.0；
• 作用：按段哈希值随机丢弃一部分弧段（c *= segmentHash.x > _FillRatio ? 0 : 1）。值越小，保留的弧段越少，环带被打散成"碎片化"的短弧，形成点阵/星芒感。

第四课：高亮系统——让环带"点亮"并随音乐舞动

视频 1:16→1:36 聚焦高亮系统：Fill ratio 把环带变细变稀疏，Highlight 颜色与种子从环带中随机挑出若干圈"点亮"，把振荡器（oscillator）接到种子上即可让哪些环点亮随之变化。

Highlight（高亮色）

• Vector4，默认(1, 0, 0, 1)（红色）；
• 作用：被选中的环显示为该颜色。

_HighlightRatio（高亮比例）

• Single，默认 0；
• 作用：控制被点亮环的比例。着色器用highlightHash = hash11(seed + HighlightSeed)生成每个环的高亮判定，highlightHash >= _HighlightRatio时显示普通颜色，否则显示高亮色。Ratio 越大，被点亮的环越多。

HighlightSeed（高亮种子）

• Int32，默认 0；
• 作用：改变"哪些环被点亮"的选取方式。把它接入振荡器或音频节拍信号（TiXL 的 BeatSynchronizer 可提供节拍驱动的值），就能实现逐圈随机点亮/熄灭的节奏动画——视频称之为"feeding the seed an oscillator animates which rings light up"。

实战配方（节拍同步点亮）：

Rings.HighlightSeed ← 振荡器/节拍信号 Rings._HighlightRatio ← 0.5~0.8（只点亮一部分） Rings.Highlight ← 亮色（如暖白/荧光色） Rings._FillRatio ← 0.6~0.9（让环带稀疏，突出点亮效果）

第五课：透视隧道与柔光渐变

视频 1:36→1:49 收尾讲解两个"变形"参数：

Distort（扭曲透视）

• Single，默认 1.0，UI 范围 -10 ~ 10（Scale 0.01）；
• 作用：把平面的环带弯成透视隧道。着色器中normalizedDistance = pow(max(normalizedDistance, 0), Distort)：Distort ≠ 1 时，径向距离被非线性重映射，环带密度从中心向外呈幂次分布——>1 时中心稀疏、边缘密集（向外"推远"的隧道感），<1 时中心密集（内缩）。这是视频所说"bends the flat rings into a perspective tunnel"的数学本质。

Contrast（对比度）

• Single，默认 1.0（注意 t3ui 中拼写为Constrast），UI 范围 0 ~ 1，且 ClampMin/ClampMax 开启；
• 作用：重塑填充的衰减（falloff），让环带边缘趋于柔和渐变（soft gradient ramp）。着色器中brightness = lerp(segmentHash.w, 1, Contrast)：Contrast 越低，越倾向于使用逐段随机的亮度值，填充更柔和、更有颗粒感；Contrast 越高，越接近均匀的 1.0 亮度，环带更实更硬。

参数总表与底层实现

完整输入参数一览

下表汇总 Rings 的全部输入，类型与默认值取自 Rings.t3，UI 范围取自 Rings.t3ui：

输出

渲染管线视角：一条参数如何走到像素

Rings 的完整调用链如下（依据 Rings.cs 与 Rings.t3 的 Connections 结构）：

1. C# 端：Rings : Instance<Rings>声明TextureOutput输出槽与全部InputSlot输入槽；
2. 图元内部：_ImageFxShaderSetupStatic子算子载入Lib:shaders/img/generate/Rings.hlsl，并设置GenerateMips=false、OutputFormat=R16G16B16A16_Float；
3. 着色器端：全部输入映射进cbuffer ParamConstants，像素着色器psMain逐像素计算距离场 → 环序号 → 哈希随机化 → 颜色混合 → 与ImageA（若IsTextureValid）按BlendMode混合输出；
4. 输入Image与Resolution还通过GetTextureSize子算子参与分辨率/宽高比计算（aspectRatio = TargetWidth / TargetHeight），确保图案不随输出比例变形。

这一"外壳算子 + FX 着色器"的结构意味着：你可以在 UsingCustomShaders.md 的指导下，直接复制 Rings.hlsl 作为自定义着色器的起点，修改psMain中的距离场或哈希扰动逻辑，快速做出自己的"环带变体"。

实战配方：30 秒做出"无限流动的彩色环带"

结合上文，给出一个可直接照做的动效配方（全部参数均可动画）：

1. 放置Rings，保持默认Radius (0, 0.5)；
2. 将Count设为 8 左右，得到均匀的 8 环；
3. 把Offset接上线性递增的曲线（每 4 秒 +1.0），得到持续向外扩散的循环流动；
4. 把Rotate接上缓慢线性旋转（每秒约 15°），叠加唱片感；
5. 打开_Segments.y = 3、_Thickness.y = 0.4、_Ratio.y = 0.5，让每环的段数、粗细、弧长各不相同，图案立刻"有机化"；
6. 设置Highlight为亮色、_HighlightRatio = 0.6，并把HighlightSeed接到一个低频振荡器，让环圈轮流点亮；
7. 最后把Distort缓慢扫过 0.8 ~ 1.4，在平面环带与透视隧道之间切换，作为段落过渡。

该配方融合了视频标注的全部四个重点：预设启发（步骤 1）、基础结构动画（2~4）、双值随机化（5）、高亮种子动画（6）与变形（7）。在演出时你甚至可以只动画Seed与HighlightSeed两个整型参数——由于哈希的确定性，它们会带来"换一整套图案"的效果，是低成本高冲击力的现场技巧。

延伸阅读

• 算子参考文档：Rings 官方算子页
• 同目录兄弟算子：NGon、RoundedRect、RadialGradient、Blob、LinearGradient
• 源码：C# 算子定义｜着色器实现｜图元配置｜界面配置
• 相关系统：预设与快照 PresetsAndSnapshots.md｜自定义着色器 UsingCustomShaders.md

【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3