TiXL 图像特效 EdgeRepeat 详解沿直线拉伸复制像素的边缘延展技法【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3EdgeRepeat 是 TiXL 实时图形软件中Lib.image.fx.distort图像扭曲类别下的一个图像处理算子其核心作用是沿着一条可旋转的直线将输入图像中的像素进行重复拉伸延展从而制造出边缘被拖拽、复制出带状延伸区域的特效。本篇文章将基于该算子的官方文档、源码定义、图元配置文件.t3/.t3ui以及底层 HLSL 着色器实现从原理到实战参数逐一讲解帮助你掌握如何在实时动态图形项目中利用 EdgeRepeat 快速构建科技感边缘延展、镜面拖影等视觉效果。算子概述与定位EdgeRepeat 属于 TiXL 开源实时图形软件项目描述TiXL is an open source software to create realtime motion graphics内置运算符库Lib.image.fx.distort中的图像扭曲类算子。官方文档对该算子的定义是Repeats (stretches) pixels of the input image along a line.即沿着一条直线重复拉伸输入图像的像素。它把输入图像中特定方向带上的像素取样并复制出去形成像素沿直线被延展、拖拽的视觉结果常用于制作边缘光延伸、条纹化拉伸、镜面反射拖影等效果。该算子在官方库中的注册信息如下运算符命名空间Lib.image.fx.distort运算符标识符Guid72e627e9-f570-4936-92b1-b12ed8d6004e源码位置EdgeRepeat.cs图元定义.t3EdgeRepeat.t3界面定义.t3uiEdgeRepeat.t3ui着色器源码EdgeRepeat.hlsl其中 EdgeRepeat.cs 是该算子在 C# 侧的公开接口壳声明了 8 个输入槽InputSlot和 1 个输出槽SlotTexture2D真正的像素运算逻辑全部由 HLSL 着色器完成这与 TiXL 中大多数图像特效算子的架构模式一致图元内部挂载_ImageFxShaderSetup子运算符 着色器资源。工作原理着色器中的像素拉伸逻辑EdgeRepeat 的完整运算实现在 EdgeRepeat.hlsl 中。理解它的核心机制有助于你精确预测每个参数对画面的影响。参数常量缓冲区ParamConstants着色器从register(b0)的常量缓冲区读取所有参数与 C# 侧输入槽一一对应cbuffer ParamConstants : register(b0) { float4 Fill; // 填充颜色RGBA float4 Background; // 背景颜色RGBA float4 LineColor; // 延展线颜色RGBA float2 Center; // 延展中心点归一化坐标 float Width; // 延展宽度归一化长度 float Rotation; // 延展方向旋转角度 float LineThickness; // 延展线厚度 }此外着色器还使用了时间常量register(b1)包含globalTime/time/runTime/beatTime和输出目标尺寸register(b2)的TargetWidth/TargetHeight。这意味着你既可以把 EdgeRepeat 绑定到节拍beatTime或时间time上做动态动画也可以根据输出画布自适应宽高比。核心算法逐步拆解主函数psMain的运算流程可归纳为五个步骤1. 坐标归一化与宽高比校正float aspectRatio TargetWidth / TargetHeight; float2 p psInput.texCoord; p.x / aspectRatio; p - float2(0.5 / aspectRatio, 0.5);将纹理坐标按画布宽高比做缩放平移使后续几何运算基于画布居中、比例均衡的坐标系从而保证圆形、角度、宽度等几何概念在不同分辨率下表现一致。2. 计算像素到延展线的有向距离float radians Rotation / 180 * 3.141578; float2 angle float2(sin(radians), cos(radians)); float dist dot(p - Center, angle) / Width;延展线由Center定位、Rotation定向。这里用点积把每个像素投影到延展方向angle上得到归一化距离dist除以Width缩放。dist 0表示位于中心点的反向一侧。3. 符号归一化保证单侧延展if (dist 0) { dist -dist; angle * -1; }当dist 0时取其绝对值并把方向向量取反最终所有像素都在dist 0一侧处理确保延展只沿一个方向进行。4. 距离大于 1 时拉伸像素 / 填充背景float4 colorEffect Fill; if (dist 1) { p - (dist - 1) * Width * angle; colorEffect Background; }这是延展动作的核心当像素距离超过 1 时把采样坐标p沿延展方向反向回推(dist - 1) * Width * angle让超出区域的像素重复取样延展线边缘的像素从而形成像素被拉伸复制的视觉效果同时该区域使用Background颜色调制。5. 叠加延展线颜色与最终采样float line2 smoothstep(1, 0, abs(1 - dist) * 1000 * Width - LineThickness 1); colorEffect lerp(colorEffect, LineColor, line2); return ImageA.Sample(texSampler, p) * colorEffect;在延展线边缘dist接近 1处通过smoothstep生成一条由LineThickness控制厚度的亮线用LineColor与其混合最终结果 输入图像采样颜色 × 颜色调制Fill/Background/LineColor三者的合成。由此可见EdgeRepeat 的几何结构是中心点 一条有方向的延展线延展宽度、旋转角与线厚度共同决定了拉伸区域的范围与视觉形态。输入参数详解与推荐取值根据官方文档的输入参数表并结合 EdgeRepeat.t3 中的默认值与 EdgeRepeat.t3ui 中的 UI 约束各参数说明如下参数名相关性与类型说明默认值 / UI 约束ImageTexture2D必需输入源图像纹理。官方文档标记为 Required缺省时效果无意义无默认值nullFillVector4RGBA延展区域的调制颜色与延展出来的像素颜色相乘默认(1, 1, 1, 1)白色即不改变像素BackgroundVector4RGBA超出延展范围区域的背景调制色默认(1, 0.99999, 0.99999, 0.804)近似白色带轻微透明LineColorVector4RGBA延展边界处亮线的颜色默认(1, 1, 1, 1)白色CenterVector2延展线经过的中心点归一化坐标默认(0, 0)UI 使用 Vec2 位置控件范围 -2.0~2.0Scale 0.01WidthSingle延展宽度归一化长度决定拉伸作用范围默认0.25UI 范围 0.0~2.0并启用 ClampMin/ClampMaxRotationSingle延展线方向单位为度默认45°UI 范围 -180°~180°格式{0:0.0}°LineThicknessSingle延展边界亮线厚度默认0.0UI 范围 0.0~1000.0启用 ClampMin/ClampMaxResolutionInt2输出分辨率设置如(0,0)表示跟随输入/输出目标默认(0, 0)UI 开启 AddPadding从 EdgeRepeat.t3 的连接关系可以看出Fill、Background、LineColor三个 Vector4 参数分别经Vector4Components子节点拆解后接入着色器 Setup 的 Color 输入Center经Vector2Components拆分后接入Width、Rotation、LineThickness直接连入Resolution则单独连到 Setup 的 Resolution 输入。这种Vector 拆分 Shader Setup的组织方式是 TiXL 图像特效图元的通用范式也说明三个颜色参数都是标准的 RGBA 四通道向量。输出输出名类型TextureOutputT3.Core.DataTypes.Texture2D输出为单张 2D 纹理可直接连入其他图像处理算子的 Image 输入或直接送入输出合成管线。官方提示探索预设与搭配 Dither官方文档给出了两条重要的使用建议值得在实战中落实探索预设Please explore the presetsTiXL 的预设系统为该算子提供了多种现成组合。进入 TiXL 编辑器后在Lib.image.fx.distort分类下放置 EdgeRepeat 算子通过右键菜单或预设面板浏览其预设即可快速看到不同 Center/Width/Rotation/LineThickness 组合下的视觉形态是理解各参数作用的最快途径。与 Dither 搭配效果良好Works well with DitherDither 算子是Lib.image.fx.stylize分类下的图像风格化算子官方文档描述为Applies Floyd-Steinberg dithering to an image to convert it to black and white colors应用 Floyd-Steinberg 抖动将图像转换为黑白。在 EdgeRepeat 之后串联 Dither可以将延展后的边缘像素转换为抖动网点/二值化风格制造出更具版画、故障与数位感的视觉效果。Dither 算子的完整参数见 Dither.md同类可搭配的风格化算子还包括 MosaicTiling、VoronoiCells、SubdivisionStretch、HoneyCombTiles、AsciiRender 等。实战应用在 TiXL 中构建边缘延展效果以下是一个可直接落地的使用流程TiXL 图元均为可视化节点连接无需编写代码放置算子在 TiXL 编辑器的运算符库中依次展开Lib.image.fx.distort找到EdgeRepeat并拖入图元画布。接入图像源将任意纹理源如视频、图片、渲染缓冲连接到 EdgeRepeat 的Image输入。调整延展几何用Center定位延展线的中心点默认位于画面中心(0,0)用Rotation旋转延展方向默认 45° 即可得到斜向拉伸用Width默认 0.25控制拉伸作用带的宽度值越大延展区域越宽用LineThickness控制延展边界亮线厚度默认 0 时边界不显线。配色分别设置Fill延展区调制色、Background背景调制色、LineColor边界线颜色来匹配整体画面风格。输出合成将TextureOutput连接到后续算子或最终输出。动效化建议可选着色器中包含时间常量time与节拍常量beatTime因此你可以将Rotation或Width绑定到 TiXL 的动画曲线或时间表达式实现延展线旋转、呼吸式张弛的动效将参数绑定到beatTime实现与音乐节拍同步的脉冲式延展适合实时 VJ 与演出场景。注意上述动效依赖 TiXL 的时间/节拍系统驱动输入值着色器本身不做时间累加。分辨率注意事项Resolution参数默认(0,0)表示沿用输入/输出目标分辨率当输出目标尺寸改变时着色器通过TargetWidth/TargetHeight自动做宽高比校正见上文算法第 1 步因此在 16:9、9:16 等不同画布下延展线角度与圆形范围都能保持几何一致。若需强制固定内部计算分辨率可显式指定该参数。源码佐证从声明到渲染的完整链路结合仓库源码EdgeRepeat 的完整实现链路可归纳如下C# 接口声明EdgeRepeat.cs 中EdgeRepeat继承InstanceEdgeRepeat通过[Input]/[Output]特性声明 8 个输入槽与 1 个输出槽每个槽位都有固定的 Guid供图元文件引用。图元装配EdgeRepeat.t3 记录了默认值、子运算符与连接关系——核心子运算符是_ImageFxShaderSetup2其 Source 指向Lib:shaders/img/fx/EdgeRepeat.hlslBlendMode 为 4采样 Wrap 模式为Mirror镜像环绕这也是像素延展时边缘自然过渡的关键设置。界面布局EdgeRepeat.t3ui 定义了各输入在节点上的位置、范围与显示格式如 Rotation 显示为°、Center 使用 Vec2 位置控件、LineThickness/Width 带数值钳制。着色器渲染EdgeRepeat.hlsl 的psMain完成上述全部像素运算输出ImageA.Sample(...) * colorEffect作为最终颜色。从代码结构看EdgeRepeat 属于 TiXL 中典型的轻 C# 壳 重着色器图像特效算子——C# 侧只负责输入输出的类型契约与默认值管理视觉运算完全由 HLSL 承担因此它的性能表现与着色器本身相当适合在实时渲染管线中大量使用。总结EdgeRepeat 通过中心点 旋转角度 宽度定义一条延展线将沿线像素拉伸复制并允许通过 Fill/Background/LineColor 三种颜色调制画面分区。关键参数Center中心、Rotation方向度、Width作用宽度、LineThickness边界亮线厚度全部参数与默认值见上表。官方建议探索预设并与 Dither 串联以获得抖动/二值化风格化结果。源码与文档路径EdgeRepeat.md、EdgeRepeat.cs、EdgeRepeat.t3、EdgeRepeat.t3ui、EdgeRepeat.hlsl。掌握了 EdgeRepeat 的参数语义与底层算法你就能在 TiXL 中快速搭建出边缘延展、条纹拉伸等实时图形效果并将其与 Dither、时间/节拍驱动结合产出风格鲜明的动态视觉。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TiXL 图像特效 EdgeRepeat 详解：沿直线拉伸复制像素的边缘延展技法
TiXL 图像特效 EdgeRepeat 详解沿直线拉伸复制像素的边缘延展技法【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3EdgeRepeat 是 TiXL 实时图形软件中Lib.image.fx.distort图像扭曲类别下的一个图像处理算子其核心作用是沿着一条可旋转的直线将输入图像中的像素进行重复拉伸延展从而制造出边缘被拖拽、复制出带状延伸区域的特效。本篇文章将基于该算子的官方文档、源码定义、图元配置文件.t3/.t3ui以及底层 HLSL 着色器实现从原理到实战参数逐一讲解帮助你掌握如何在实时动态图形项目中利用 EdgeRepeat 快速构建科技感边缘延展、镜面拖影等视觉效果。算子概述与定位EdgeRepeat 属于 TiXL 开源实时图形软件项目描述TiXL is an open source software to create realtime motion graphics内置运算符库Lib.image.fx.distort中的图像扭曲类算子。官方文档对该算子的定义是Repeats (stretches) pixels of the input image along a line.即沿着一条直线重复拉伸输入图像的像素。它把输入图像中特定方向带上的像素取样并复制出去形成像素沿直线被延展、拖拽的视觉结果常用于制作边缘光延伸、条纹化拉伸、镜面反射拖影等效果。该算子在官方库中的注册信息如下运算符命名空间Lib.image.fx.distort运算符标识符Guid72e627e9-f570-4936-92b1-b12ed8d6004e源码位置EdgeRepeat.cs图元定义.t3EdgeRepeat.t3界面定义.t3uiEdgeRepeat.t3ui着色器源码EdgeRepeat.hlsl其中 EdgeRepeat.cs 是该算子在 C# 侧的公开接口壳声明了 8 个输入槽InputSlot和 1 个输出槽SlotTexture2D真正的像素运算逻辑全部由 HLSL 着色器完成这与 TiXL 中大多数图像特效算子的架构模式一致图元内部挂载_ImageFxShaderSetup子运算符 着色器资源。工作原理着色器中的像素拉伸逻辑EdgeRepeat 的完整运算实现在 EdgeRepeat.hlsl 中。理解它的核心机制有助于你精确预测每个参数对画面的影响。参数常量缓冲区ParamConstants着色器从register(b0)的常量缓冲区读取所有参数与 C# 侧输入槽一一对应cbuffer ParamConstants : register(b0) { float4 Fill; // 填充颜色RGBA float4 Background; // 背景颜色RGBA float4 LineColor; // 延展线颜色RGBA float2 Center; // 延展中心点归一化坐标 float Width; // 延展宽度归一化长度 float Rotation; // 延展方向旋转角度 float LineThickness; // 延展线厚度 }此外着色器还使用了时间常量register(b1)包含globalTime/time/runTime/beatTime和输出目标尺寸register(b2)的TargetWidth/TargetHeight。这意味着你既可以把 EdgeRepeat 绑定到节拍beatTime或时间time上做动态动画也可以根据输出画布自适应宽高比。核心算法逐步拆解主函数psMain的运算流程可归纳为五个步骤1. 坐标归一化与宽高比校正float aspectRatio TargetWidth / TargetHeight; float2 p psInput.texCoord; p.x / aspectRatio; p - float2(0.5 / aspectRatio, 0.5);将纹理坐标按画布宽高比做缩放平移使后续几何运算基于画布居中、比例均衡的坐标系从而保证圆形、角度、宽度等几何概念在不同分辨率下表现一致。2. 计算像素到延展线的有向距离float radians Rotation / 180 * 3.141578; float2 angle float2(sin(radians), cos(radians)); float dist dot(p - Center, angle) / Width;延展线由Center定位、Rotation定向。这里用点积把每个像素投影到延展方向angle上得到归一化距离dist除以Width缩放。dist 0表示位于中心点的反向一侧。3. 符号归一化保证单侧延展if (dist 0) { dist -dist; angle * -1; }当dist 0时取其绝对值并把方向向量取反最终所有像素都在dist 0一侧处理确保延展只沿一个方向进行。4. 距离大于 1 时拉伸像素 / 填充背景float4 colorEffect Fill; if (dist 1) { p - (dist - 1) * Width * angle; colorEffect Background; }这是延展动作的核心当像素距离超过 1 时把采样坐标p沿延展方向反向回推(dist - 1) * Width * angle让超出区域的像素重复取样延展线边缘的像素从而形成像素被拉伸复制的视觉效果同时该区域使用Background颜色调制。5. 叠加延展线颜色与最终采样float line2 smoothstep(1, 0, abs(1 - dist) * 1000 * Width - LineThickness 1); colorEffect lerp(colorEffect, LineColor, line2); return ImageA.Sample(texSampler, p) * colorEffect;在延展线边缘dist接近 1处通过smoothstep生成一条由LineThickness控制厚度的亮线用LineColor与其混合最终结果 输入图像采样颜色 × 颜色调制Fill/Background/LineColor三者的合成。由此可见EdgeRepeat 的几何结构是中心点 一条有方向的延展线延展宽度、旋转角与线厚度共同决定了拉伸区域的范围与视觉形态。输入参数详解与推荐取值根据官方文档的输入参数表并结合 EdgeRepeat.t3 中的默认值与 EdgeRepeat.t3ui 中的 UI 约束各参数说明如下参数名相关性与类型说明默认值 / UI 约束ImageTexture2D必需输入源图像纹理。官方文档标记为 Required缺省时效果无意义无默认值nullFillVector4RGBA延展区域的调制颜色与延展出来的像素颜色相乘默认(1, 1, 1, 1)白色即不改变像素BackgroundVector4RGBA超出延展范围区域的背景调制色默认(1, 0.99999, 0.99999, 0.804)近似白色带轻微透明LineColorVector4RGBA延展边界处亮线的颜色默认(1, 1, 1, 1)白色CenterVector2延展线经过的中心点归一化坐标默认(0, 0)UI 使用 Vec2 位置控件范围 -2.0~2.0Scale 0.01WidthSingle延展宽度归一化长度决定拉伸作用范围默认0.25UI 范围 0.0~2.0并启用 ClampMin/ClampMaxRotationSingle延展线方向单位为度默认45°UI 范围 -180°~180°格式{0:0.0}°LineThicknessSingle延展边界亮线厚度默认0.0UI 范围 0.0~1000.0启用 ClampMin/ClampMaxResolutionInt2输出分辨率设置如(0,0)表示跟随输入/输出目标默认(0, 0)UI 开启 AddPadding从 EdgeRepeat.t3 的连接关系可以看出Fill、Background、LineColor三个 Vector4 参数分别经Vector4Components子节点拆解后接入着色器 Setup 的 Color 输入Center经Vector2Components拆分后接入Width、Rotation、LineThickness直接连入Resolution则单独连到 Setup 的 Resolution 输入。这种Vector 拆分 Shader Setup的组织方式是 TiXL 图像特效图元的通用范式也说明三个颜色参数都是标准的 RGBA 四通道向量。输出输出名类型TextureOutputT3.Core.DataTypes.Texture2D输出为单张 2D 纹理可直接连入其他图像处理算子的 Image 输入或直接送入输出合成管线。官方提示探索预设与搭配 Dither官方文档给出了两条重要的使用建议值得在实战中落实探索预设Please explore the presetsTiXL 的预设系统为该算子提供了多种现成组合。进入 TiXL 编辑器后在Lib.image.fx.distort分类下放置 EdgeRepeat 算子通过右键菜单或预设面板浏览其预设即可快速看到不同 Center/Width/Rotation/LineThickness 组合下的视觉形态是理解各参数作用的最快途径。与 Dither 搭配效果良好Works well with DitherDither 算子是Lib.image.fx.stylize分类下的图像风格化算子官方文档描述为Applies Floyd-Steinberg dithering to an image to convert it to black and white colors应用 Floyd-Steinberg 抖动将图像转换为黑白。在 EdgeRepeat 之后串联 Dither可以将延展后的边缘像素转换为抖动网点/二值化风格制造出更具版画、故障与数位感的视觉效果。Dither 算子的完整参数见 Dither.md同类可搭配的风格化算子还包括 MosaicTiling、VoronoiCells、SubdivisionStretch、HoneyCombTiles、AsciiRender 等。实战应用在 TiXL 中构建边缘延展效果以下是一个可直接落地的使用流程TiXL 图元均为可视化节点连接无需编写代码放置算子在 TiXL 编辑器的运算符库中依次展开Lib.image.fx.distort找到EdgeRepeat并拖入图元画布。接入图像源将任意纹理源如视频、图片、渲染缓冲连接到 EdgeRepeat 的Image输入。调整延展几何用Center定位延展线的中心点默认位于画面中心(0,0)用Rotation旋转延展方向默认 45° 即可得到斜向拉伸用Width默认 0.25控制拉伸作用带的宽度值越大延展区域越宽用LineThickness控制延展边界亮线厚度默认 0 时边界不显线。配色分别设置Fill延展区调制色、Background背景调制色、LineColor边界线颜色来匹配整体画面风格。输出合成将TextureOutput连接到后续算子或最终输出。动效化建议可选着色器中包含时间常量time与节拍常量beatTime因此你可以将Rotation或Width绑定到 TiXL 的动画曲线或时间表达式实现延展线旋转、呼吸式张弛的动效将参数绑定到beatTime实现与音乐节拍同步的脉冲式延展适合实时 VJ 与演出场景。注意上述动效依赖 TiXL 的时间/节拍系统驱动输入值着色器本身不做时间累加。分辨率注意事项Resolution参数默认(0,0)表示沿用输入/输出目标分辨率当输出目标尺寸改变时着色器通过TargetWidth/TargetHeight自动做宽高比校正见上文算法第 1 步因此在 16:9、9:16 等不同画布下延展线角度与圆形范围都能保持几何一致。若需强制固定内部计算分辨率可显式指定该参数。源码佐证从声明到渲染的完整链路结合仓库源码EdgeRepeat 的完整实现链路可归纳如下C# 接口声明EdgeRepeat.cs 中EdgeRepeat继承InstanceEdgeRepeat通过[Input]/[Output]特性声明 8 个输入槽与 1 个输出槽每个槽位都有固定的 Guid供图元文件引用。图元装配EdgeRepeat.t3 记录了默认值、子运算符与连接关系——核心子运算符是_ImageFxShaderSetup2其 Source 指向Lib:shaders/img/fx/EdgeRepeat.hlslBlendMode 为 4采样 Wrap 模式为Mirror镜像环绕这也是像素延展时边缘自然过渡的关键设置。界面布局EdgeRepeat.t3ui 定义了各输入在节点上的位置、范围与显示格式如 Rotation 显示为°、Center 使用 Vec2 位置控件、LineThickness/Width 带数值钳制。着色器渲染EdgeRepeat.hlsl 的psMain完成上述全部像素运算输出ImageA.Sample(...) * colorEffect作为最终颜色。从代码结构看EdgeRepeat 属于 TiXL 中典型的轻 C# 壳 重着色器图像特效算子——C# 侧只负责输入输出的类型契约与默认值管理视觉运算完全由 HLSL 承担因此它的性能表现与着色器本身相当适合在实时渲染管线中大量使用。总结EdgeRepeat 通过中心点 旋转角度 宽度定义一条延展线将沿线像素拉伸复制并允许通过 Fill/Background/LineColor 三种颜色调制画面分区。关键参数Center中心、Rotation方向度、Width作用宽度、LineThickness边界亮线厚度全部参数与默认值见上表。官方建议探索预设并与 Dither 串联以获得抖动/二值化风格化结果。源码与文档路径EdgeRepeat.md、EdgeRepeat.cs、EdgeRepeat.t3、EdgeRepeat.t3ui、EdgeRepeat.hlsl。掌握了 EdgeRepeat 的参数语义与底层算法你就能在 TiXL 中快速搭建出边缘延展、条纹拉伸等实时图形效果并将其与 Dither、时间/节拍驱动结合产出风格鲜明的动态视觉。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考