TiXL 图像特效算子详解HoneyCombTiles 六边形瓷砖化Hexagonal Tiling完全指南【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3本篇技术指南围绕 TiXL实时动态图形创作软件Lib.image.fx.stylize分类下的HoneyCombTiles算子展开讲解它如何基于输入图像的亮度生成可实时驱动的六边形瓷砖图案并深入其 HLSL 着色器实现、节点图内部结构与实战组合用法。读完本文你将掌握 HoneyCombTiles 全部输入参数的语义与默认值、每个参数在着色器中的实际作用链路以及如何通过 AdjustColors 预处理、曲线调制和参数动画做出可实时演出的蜂巢风格视觉。一、算子定位HoneyCombTiles 能做什么HoneyCombTiles 位于 TiXL 图像特效库的 stylize风格化分类下官方文档对其的定位是一句话Creates a hexagonal pattern based on an incoming image.基于输入图像创建六边形图案。与同类瓷砖类特效相比它的核心特征在于**以输入图像为驱动力**六边形单元格的填充程度、瓷砖间隙的线条厚度都不是静态参数而是由输入图像对应位置的像素亮度RGB 长度实时决定的——画面越亮的位置六边形填充得越满越暗的位置则更多显露背景色。这也正是文档给出的使用建议的来源Tip: Use AdjustColors on the incoming image to manipulate the pattern.提示对输入图像使用 AdjustColors 来操控图案。也就是说HoneyCombTiles 适合放在色彩调整链路之后使用先调节输入图像的亮度/对比度/色阶再交给本算子生成图案所见即所得。二、输入参数完全对照表根据官方文档HoneyCombTiles 共暴露 9 个输入参数其名称、类型、官方说明如下表参数名类型官方说明ImageTexture2D必需输入图像FillVector4六边形填充颜色BackgroundVector4背景瓷砖间隙颜色CenterVector2平移瓷砖位置不影响输入图像RotationSingle旋转图案不旋转输入图像DivisionsSingle定义瓷砖的尺寸LineThicknessSingle定义瓷砖之间线条的粗细MixOriginalSingle定义输入图像是否以及以多大程度与生成的图案相乘混合ResolutionInt2覆盖输出分辨率默认值与取值范围结合源码仅看文档无法知道每个参数的起点值。结合算子定义文件 HoneyCombTiles.t3 中保存的默认输入值可以得到完整的初始状态参数默认值说明Imagenull必须由用户连接否则无图案可生成Fill(1.0, 1.0, 1.0, 1.0)纯白RGBA 四通道Background(1.0, 0.99999, 0.99999, 0.804)接近白色且Alpha 为 0.804即默认背景带轻微透明度Center(0.0, 0.0)无偏移Rotation0.0不旋转Divisions20.0屏幕纵向划分约 20 个六边形单元LineThickness0.00 表示线条极细增大后间隙变宽MixOriginal0.00 表示完全输出生成图案Resolution(0, 0)全 0 表示沿用目标/帧分辨率在示例工程中见下文实战一节常用的一组典型参数为Divisions ≈ 21、Rotation ≈ 0.53、LineThickness ≈ 4.8、Fill为青绿色(0.629, 0.780, 0.783, 1)、Background为接近纯黑。三、输出输出名类型TextureOutputT3.Core.DataTypes.Texture2D输出是一张与目标分辨率一致的 Texture2D 纹理可直接接入后续的图像混合、位移、模糊等任意图像算子。四、核心原理逐行拆解 HexGridDisplace.hlslHoneyCombTiles 自身不包含任何图像处理代码它是一张着色器胶水图在节点图内部把参数打包后交给封装好的_multiImageFxSetup加载着色器 HexGridDisplace.hlsl 执行。这一点可以从 HoneyCombTiles.t3 的Children中看到其_multiImageFxSetup与_multiImageFxSetupStatic两个子节点的ShaderPath均指向Lib:shaders/img/fx/HexGridDisplace.hlsl。该着色器并非从零编写其头部注释明确标注了出处Based on ShaderToy Tutorial - Hexagonal Tiling by Martijn Steinrucken aka BigWings/CountFrolic - 2019基于 ShaderToy 教程《六边形平铺》作者 Martijn Steinrucken2019采用 CC BY-NC-SA 3.0 许可。4.1 六边形网格数学HexCoords / HexDist六边形平铺的核心是两段函数HexDist(p)计算点 p 到六边形中心的近似距离做法是把坐标取绝对值后与normalize(float2(1, 1.73))做点积再与p.x取最大值。1.73 ≈ √3正是正六边形的几何比例。HexCoords(uv)将 UV 坐标映射到六边形网格返回float4(x, y, id.x, id.y)——x是格内角度、y是格内到中心的填充度0.5 - HexDist(gv)、zw是所在格子的整数 ID。两个偏移相位a、b交替取较小者正是六边形交错平铺蜂窝交错排布的经典实现。4.2 Divisions如何换算成屏幕上的单元数着色器中第一处关键换算float aspectRatio TargetWidth / TargetHeight; float2 divisions float2(Divisions * aspectRatio, Divisions);即Divisions 表示纵向垂直方向的六边形单元个数横向单元数自动乘以宽高比。因此相同的 Divisions 值在横竖屏上会保持六边形视觉上接近正六边形的均匀分布而非被拉伸成椭圆。数值越大单元越小、图案越密。4.3 Rotation 与 Center只动图案、不动图像文档强调 Center 与 Rotation 不影响输入图像。着色器中的实现顺序印证了这一点p - 0.5; p cellOffset;其中cellOffset Offset / DivisionsOffset即来自 Center 输入以单元数为单位对网格整体平移旋转通过float imageRotationRad (-Rotation - 90) / 180 * 3.141578;换算为弧度后对坐标做标准二维旋转矩阵运算。由于旋转和平移都作用在采样网格的坐标上输入图像本身在采样时并未做全局变换图像仍按原位被每个单元格采样因此视觉上表现为图案在动、底图不动。4.4 每个六边形显示什么逐格采样输入图像这是本算子最具特色的地方——每个六边形内部并不是纯色填充而是会显示输入图像在它所在位置附近的内容float2 pCel (hc.zw Offset) / divisions; // ...反向旋转与纵横比修正... float4 imgColorForCel ImageA.Sample(texSampler, pCel);hc.zw是六边形格子的整数 ID除以divisions后还原到图像 UV 空间从而拿到该格对应位置的图像颜色。也就是说蜂窝图案的每个单元都保留了底图在其位置的局部内容形成了瓷砖化 图像保持的双重效果。4.5 亮度如何驱动填充与线条曲线调制随后着色器计算图像亮度的标量float value length(imgColorForCel.rgb); float edgeEffect Effects.Sample(texSampler, float2(value, 0.75)); value Effects.Sample(texSampler, float2(value, 0));这里采样的Effects纹理register(t1)并非普通贴图而是节点图内部由SampleCurve → CurvesToTexture两个子节点实时生成的 1D 曲线纹理。从 HoneyCombTiles.t3 的Children可以看到两组内嵌曲线一组用于edgeEffect由SampleCurve提供两条关键帧曲线一组用于value重映射。这意味着输入图像亮度先被两条曲线重映射重映射后的value参与填充计算edgeEffect参与线条宽度的扰动可以让亮暗区域产生不均匀的线条粗细变化。最终填充系数float c smoothstep(.001, LineThickness / 100 edgeEffect, hc.y * value) * value; c clamp(c, 0, 1); col lerp(Background, Fill, c);hc.y是六边形中心到边缘的填充度中心为 0.5越靠边缘越小hc.y * value把图像亮度与格内位置相乘靠近格心且图像亮的地方c趋近 1显示 Fill 颜色靠近格边或图像暗的地方c趋近 0露出 Background 颜色。LineThickness / 100是平滑步进的下阈值——阈值越大边缘区域越早被判定为背景线条越粗这也解释了为什么文档建议用 AdjustColors 调整输入图像来操控图案亮度分布直接决定填充面积与间隙形态。4.6 MixOriginal图案与原始图像的最终混合float4 orgColorWithDisplacement ImageA.Sample(texSampler, uv); col lerp(col, orgColorWithDisplacement, MixOriginal);MixOriginal 0时输出纯图案 1时完全还原原始图像中间值则是在二者之间线性插值。文档将其描述为输入图像与生成图案相乘混合从源码看实际是线性混合lerp可用于制作图案逐渐浮现的转场。五、算子内部结构与源码对应关系HoneyCombTiles 的 C# 声明位于 HoneyCombTiles.cs整个类非常薄仅声明了输出槽与 9 个输入槽每个槽带独立 GUID没有任何运算逻辑namespace Lib.image.fx.stylize; [Guid(ee398291-674c-409b-aab8-9ca843ce6cef)] internal sealed class HoneyCombTiles : InstanceHoneyCombTiles { [Output(Guid 2c2d62c4-3735-40a4-bc97-eaecf7e4cb7f)] public readonly SlotTexture2D TextureOutput new(); [Input(Guid 452fb0e1-34c1-4042-9a7c-30bf8dd4cb3c)] public readonly InputSlotTexture2D Image new InputSlotTexture2D(); // ... Fill / Background / Center / Rotation / Divisions / LineThickness / MixOriginal / Resolution }真正的工作发生在 .t3 节点图HoneyCombTiles.t3内部其子节点结构从源码结构看可归纳为两个着色器宿主_multiImageFxSetup定义见源码暴露ShaderPath、ImageA、FloatParams、Resolution等输入与_multiImageFxSetupStatic二者都指向HexGridDisplace.hlsl推测分别承担参数注入与静态纹理准备职责坐标拆解Vector2ComponentsCenter → Offset、Vector4ComponentsFill / Background 拆分 RGBA 通道负责把向量参数逐通道接入着色器参数曲线生成两组SampleCurve CurvesToTexture生成上文提到的 1D 亮度调制曲线纹理作为Effects纹理输入参数接线Divisions、LineThickness、MixOriginal、Rotation、Image、Resolution直接连入宿主节点的对应槽位。这种C# 薄壳声明接口 .t3 节点图拼装 HLSL 实现渲染的三层结构是 TiXL 图像特效算子库的通用组织方式HoneyCombTiles 是理解这一模式的最佳样例之一。六、实战示例工程与典型组合仓库为每个核心算子都提供了可运行的示例HoneyCombTiles 的示例位于 Operators/examples/Symbols/lib/image/fx/stylize/对应节点图 HoneyCombTilesExample.t3。从该示例的节点图FormatVersion 3可以读出三条极具参考价值的用法用渐变当输入示例把LinearGradient旋转 -53.16°、PingPong Repeat 开启接到 HoneyCombTiles 的 Image 输入上验证了输入图像可以是任意纹理并不局限于照片/视频——生成器输出的渐变同样能驱动蜂窝图案。Divisions 实时动画示例通过_Time_old → Sin → Multiply(90) → Remap(-1..1 → 20..40)的链路把Divisions变成随时间摆动的动画参数实现了蜂窝单元大小的脉动效果。这印证了 Divisions 是实时可变的关键表现参数。输出接入后续特效示例把 HoneyCombTiles 的输出接到_BlobOld斑点位移类特效上继续加工说明该算子适合作为风格化链路的中间环节而不是终点。官方文档还推荐了同类效果与组合方向MosaicTiling递归马赛克平铺、VoronoiCells沃罗诺伊细胞图案、SubdivisionStretch细分拉伸位于image/fx/glitch分类、TriangleGridTransition三角网格转场已归入image/fx/_obsolete、DitherFloyd-Steinberg 抖动、AsciiRenderASCII 字符化。这些算子与 HoneyCombTiles 同属图案化/风格化家族可以互相串联也可以在节点图中用 Blend 等混合算子做交叉融合。完整算子列表与说明见 stylize 分类文档。七、性能与使用注意事项单 Pass 着色器实现从 HexGridDisplace.hlsl 可见全部效果在单个像素着色器psMain中完成没有多 Pass 模糊或降采样循环适合在实时演出场景使用。Resolution 覆盖默认(0,0)表示沿用输出目标分辨率需要固定输出尺寸如配合下游算子做缓存时可通过 Resolution 覆盖示例中即使用了(0,-1)这类非常规值进行局部覆盖。Divisions 与宽高比Divisions 以纵向单元数为准横向自动按宽高比缩放因此在更改输出分辨率后图案密度会随之变化若要保持同一视觉密度需同步调整 Divisions。线条粗细的直观控制LineThickness 通过LineThickness / 100进入平滑步进阈值参数视觉上呈非线性响应建议从 0 开始逐步试探配合输入图像的曲线调制可得到不均匀的有机线条效果。文档标注与实现的一致性官方文档 HoneyCombTiles.md 中标注的输入输出与 HoneyCombTiles.cs 的槽位声明完全一致文档属于从算子库自动生成见 stylize README 底部说明因此阅读本文时可直接以源码为最终依据。总结HoneyCombTiles 是 TiXL stylize 特效库中图像驱动图案思路的代表作通过HexGridDisplace.hlsl的六边形平铺数学、逐格图像采样与亮度曲线调制把输入图像的亮度分布转化为实时可动的蜂窝填充图案。掌握 Divisions/Rotation/Center/LineThickness/MixOriginal 五个核心参数在着色器中的真实作用位置配合 AdjustColors 预处理、曲线节点调制与示例工程中的动画链路即可在 TiXL 中快速搭建从蜂巢纹理、科技感网格到动态转场的一整套视觉方案。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考