TiXL Rings 算子完全指南同心圆环图案生成、逐参数解析与动画技巧【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3本篇技术指南以 TiXLTooll 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其预设这是预览一个算子能产生多大造型范围的最快方式在触碰任何旋钮之前就能浏览海量外观。实操方法在图元Symbol列表中定位 Rings 算子image/generate/pattern/Rings按住Alt 键并悬停/点击其预设条目逐个浏览不同预设下环带的密度、颜色、扭曲与高亮差异找到心仪造型后选中对应预设作为起点再进行微调。这套工作流背后的意义是Rings 的 23 个输入参数高度耦合例如段数、扭曲、厚度互相影响从零开始手调很难直觉地到达目标造型而预设直接给出了参数组合 → 视觉结果的映射相当于作者的调参经验集。TiXL 的预设与快照体系见 PresetsAndSnapshots.md正是为此设计的。第二课构建环带的四大基础参数视频 0:20→0:47 讲解了决定环带基本结构的参数Inner/Outer Radius、Count、Rotate、Offset。Radius内径/外径类型Vector2X 内半径Y 外半径默认(0, 0.5)UI 范围-1.0 ~ 1.0作用定义环形色带band的径向范围。配合PositionVector2默认(0,0)UI 范围 -1~1可整体平移图案。在着色器中像素到圆心的距离先被归一化float normalizedDistance (d2 - Radius.x) / (Radius.y - Radius.x);Radius.x与Radius.y的差值决定了环带厚度与密度分布因此改变内外半径差会直接影响每一条环的粗细。Count环数量类型Single默认0.5UI 范围 0 ~ 100Scale 0.01作用乘数——环带内同心圆的数量。着色器中单环宽度为ringRadius (Radius.y - Radius.x) / RingCount即把内外半径之间的区域均匀切分成Count份。Count 是视频中明确标注适合动画的核心参数之一将 Count 接入动画曲线或 LFO可以看到环带由疏到密呼吸般的生长过程。Rotate旋转与 Offset偏移RotateSingle默认 0UI 范围 -180° ~ 180°Scale 0.5负责整组环的径向自旋angle Rotate / 180 / PIOffsetSingle默认 0UI 范围 -1 ~ 1Scale 0.01为环相位引入偏移。着色器中rings normalizedDistance * RingCount OffsetOffset 直接加在环序号上配合动画可以产生环带向外/向内连续流动的效果——这正是视频所说的trippy outward travelOffset 随时间增长圆环就像从圆心不断涌出向外扩散是制作循环动画loop的高性价比手法。推荐动画组合参数动画方式效果Rotate线性递增整组环匀速旋转类似唱片转盘Offset线性递增环带持续向外扩散、无限循环Count曲线/呼吸环数疏密变化节奏感第三课让环带有机化——双值参数与随机化视频 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 ~ 10UI作用把每一环拆分为若干圆弧段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 ~ 2Scale 0.01作用控制环的粗细。Y 通道逐环随机厚度配合FeatherSingle默认 0.0333范围 -1~1控制环边缘软硬过渡可做出手绘笔触般的粗细不均感。_Ratio段占比Vector2默认(1.05, 0)UI 范围 0 ~ 2作用控制每个圆弧段占圆周的比例X1 表示满弧。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.0UI 范围 -10 ~ 10Scale 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 中拼写为ConstrastUI 范围 0 ~ 1且 ClampMin/ClampMax 开启作用重塑填充的衰减falloff让环带边缘趋于柔和渐变soft gradient ramp。着色器中brightness lerp(segmentHash.w, 1, Contrast)Contrast 越低越倾向于使用逐段随机的亮度值填充更柔和、更有颗粒感Contrast 越高越接近均匀的 1.0 亮度环带更实更硬。参数默认值UI 范围推荐动画Distort1.0-10 ~ 10适合缓慢扫掠可营造空间推拉Contrast1.00 ~ 1clamped适合切换实边/柔光两种质感参数总表与底层实现完整输入参数一览下表汇总 Rings 的全部输入类型与默认值取自 Rings.t3UI 范围取自 Rings.t3ui参数名类型默认值UI 范围作用视频讲解ImageTexture2Dnull—可选输入纹理作为合成底图FillVector4(1,1,1,1)—环带填充色BackgroundVector4(0,0,0,0)—背景色HighlightVector4(1,0,0,1)—高亮环颜色RadiusVector2(0, 0.5)-1 ~ 1内/外半径界定环带范围PositionVector2(0,0)-1 ~ 1图案平移CountSingle0.50 ~ 100环数量可动画FeatherSingle0.0333-1 ~ 1环边缘软硬RotateSingle0-180 ~ 180整体旋转可动画OffsetSingle0-1 ~ 1环相位偏移可动画_SegmentsVector2(20, 0)X: 1 ~ 10每环节段数 随机_TwistVector2(0, 0)X: -180 ~ 180逐环角向扭曲_ThicknessVector2(0.5, 0)0 ~ 2环粗细 随机_RatioVector2(1.05, 0)0 ~ 2弧段占比 随机_FillRatioSingle1.0—弧段填充比例稀疏化_HighlightRatioSingle0—高亮环比例HighlightSeedInt320—高亮选取种子可动画DistortSingle1.0-10 ~ 10透视隧道变形ConstrastSingle1.00 ~ 1填充对比/柔和度ResolutionInt2(0,0)—输出分辨率0跟随目标SeedInt320—全局随机种子BlendModeInt320—与 Image 的混合模式SharedEnums.RgbBlendModes输出名称类型TextureOutputT3.Core.DataTypes.Texture2DR16G16B16A16_Float渲染管线视角一条参数如何走到像素Rings 的完整调用链如下依据 Rings.cs 与 Rings.t3 的 Connections 结构C# 端Rings : InstanceRings声明TextureOutput输出槽与全部InputSlot输入槽图元内部_ImageFxShaderSetupStatic子算子载入Lib:shaders/img/generate/Rings.hlsl并设置GenerateMipsfalse、OutputFormatR16G16B16A16_Float着色器端全部输入映射进cbuffer ParamConstants像素着色器psMain逐像素计算距离场 → 环序号 → 哈希随机化 → 颜色混合 → 与ImageA若IsTextureValid按BlendMode混合输出输入Image与Resolution还通过GetTextureSize子算子参与分辨率/宽高比计算aspectRatio TargetWidth / TargetHeight确保图案不随输出比例变形。这一外壳算子 FX 着色器的结构意味着你可以在 UsingCustomShaders.md 的指导下直接复制 Rings.hlsl 作为自定义着色器的起点修改psMain中的距离场或哈希扰动逻辑快速做出自己的环带变体。实战配方30 秒做出无限流动的彩色环带结合上文给出一个可直接照做的动效配方全部参数均可动画放置Rings保持默认Radius (0, 0.5)将Count设为 8 左右得到均匀的 8 环把Offset接上线性递增的曲线每 4 秒 1.0得到持续向外扩散的循环流动把Rotate接上缓慢线性旋转每秒约 15°叠加唱片感打开_Segments.y 3、_Thickness.y 0.4、_Ratio.y 0.5让每环的段数、粗细、弧长各不相同图案立刻有机化设置Highlight为亮色、_HighlightRatio 0.6并把HighlightSeed接到一个低频振荡器让环圈轮流点亮最后把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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考