TiXL Dither 图像抖动效果操作符完全指南参数详解、HLSL 实现原理与风格化组合实战【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3Dither 是 TiXL实时视觉合成软件GitHub 开源项目 t3Lib.image.fx.stylize 分类下的图像风格化FX/Stylize操作符其核心作用是将输入图像转换为由暗部与亮部两种颜色构成的黑白二值画面并借助抖动算法保留灰度层次与细节。本文将以官方文档为骨架结合仓库中的 C# 节点定义、.t3节点图配置与 HLSL 着色器源码完整讲解 Dither 的全部输入参数、默认值与取值范围、底层抖动算法实现、内部接线结构并给出与同分类其他操作符组合的实战思路帮助读者在 TiXL 中快速搭建出具有印刷网点、复古报纸、像素艺术气质的画面效果。一、操作符定位与核心功能Dither 是Lib.image.fx.stylize图像风格化分类下的一个 Texture2D 单输出操作符官方文档给出的功能描述为Applies Floyd-Steinberg dithering to an image to convert it to black and white colors.对图像应用 Floyd-Steinberg 抖动将其转换为黑白颜色。即它读取一张输入纹理将其亮度量化到两个层级暗/亮再分别用用户指定的两种颜色ShadowColor / HighlightColor着色输出从而把连续色调的照片或渲染画面降级为双色印刷风格的图像。其配套文档还提示了可组合参考的同类效果MosaicTiling、VoronoiCells、HoneyCombTiles、AsciiRender 等适合叠加使用产生更丰富的风格化效果。从节点实现看操作符本体是 Dither.cs[Guid(299e9912-2a6a-40ea-aa31-4c357bbec125)] internal sealed class Dither : InstanceDither { [Output(Guid dac50008-a681-4e9a-8a71-e5f4f49a8eb5)] public readonly SlotTexture2D TextureOutput new(); [Input(Guid 4167d4a6-7f8c-4bc9-9424-a54388d2560b)] public readonly InputSlotTexture2D Image new InputSlotTexture2D(); // ... 其余输入 private enum Methods { FloydSteinberg, Diffusion, } }其中Method输入在 C# 侧映射了Methods枚举FloydSteinberg/DiffusionBlendMethod输入则映射到SharedEnums.RgbBlendModes见下文第五节。二、输入参数完整详解下表完整覆盖文档中的 9 个输入参数并补充了 Dither.t3 中的默认值与 Dither.t3ui 中的 UI 取值范围如存在名称类型相关性默认值UI 范围说明ImageTexture2DRequirednull—输入图像抖动效果的源纹理ShadowColorVector4—(0, 0, 0, 1)0–1Clamp所有暗部像素的着色HighlightColorVector4—(1, 1, 1, 1)0–1Clamp所有亮部像素的着色MethodInt32—0—文档标注当前被忽略详见第四节说明GrayScaleWeightsVector4—(0.2126, 0.7152, 0.0722, 0)0–1ClampAdvanced Settings 分组定义哪些颜色通道参与明暗判定GainAndBiasVector2—(0.5, 0.5)0–1Clamp亮度增益/偏置调节二值化阈值分布ScaleSingle—4.01–15ClampSize 分组均匀缩放抖动图案的粒度OffsetVector2—(0, 0)-2–2抖动网格的偏移BlendMethodInt32—0—与原始图像的混合方式几个值得注意的默认值设计GrayScaleWeights 默认值为(0.2126, 0.7152, 0.0722, 0)这正是 Rec.709 标准的相对亮度系数红 0.2126、绿 0.7152、蓝 0.0722意味着默认情况下绿色通道对明暗判定的贡献最大、蓝色最小与人眼感知亮度一致。Scale 默认 4.0表示抖动网格按输入分辨率除以 4 的粒度展开减小该值会让网点更细密接近照片原感增大则产生大块面、粗颗粒的版画效果。ShadowColor / HighlightColor 均带 Clamp 到 0–1 的 UI 约束但仍可接受任意 Vector4 值含 Alpha因此也可以用来输出带透明度的半透明双色图像。三、输出说明名称类型TextureOutputT3.Core.DataTypes.Texture2D输出为一张 Texture2D在 Dither.t3ui 中可见输出槽位于节点右侧X≈672, Y≈-44可直接连接到后续的调色、合成或最终渲染链。四、底层实现Dither.hlsl 源码剖析Dither 的实际像素计算由 HLSL 着色器 Dither.hlsl 完成该路径在 Dither.t3 中被配置到内部宿主节点_ImageFxShaderSetupStatic的Source输入值为Lib:shaders/img/fx/Dither.hlsl。4.1 参数常量与分辨率缓冲着色器通过两个 cbuffer 接收参数与 C# 输入一一对应cbuffer ParamConstants : register(b0) { float4 Black; // ShadowColor float4 White; // HighlightColor float4 GrayScaleWeights; // GrayScaleWeights float2 GainAndBias; // GainAndBias float Scale; // Scale float Method; // Method float2 Offset; // Offset float BlendMode; // BlendMethod float IsTextureValid; } cbuffer Resolution : register(b1) { float TargetWidth; float TargetHeight; }4.2 抖动图案的生成Bayer 矩阵与随机哈希着色器内置了一套递归定义的 Bayer拜耳有序抖动矩阵宏#define Bayer4(a) (Bayer2(.5 * (a)) * .25 Bayer2(a)) #define Bayer8(a) (Bayer4(.5 * (a)) * .25 Bayer2(a)) #define Bayer16(a) (Bayer8(.5 * (a)) * .25 Bayer2(a)) #define Bayer32(a) (Bayer16(.5 * (a)) * .25 Bayer2(a)) #define Bayer64(a) (Bayer32(.5 * (a)) * .25 Bayer2(a)) inline float Bayer2(float2 a) { a floor(a); return frac(a.x / 2. a.y * a.y * .75); }在psMain中根据Method参数选择图案来源float n Method 0.5 ? Bayer64(fragCoord / epsilonScale) // 有序 Bayer 抖动 : hash11u((int)(fragCoord.x) * 21 (int)(fragCoord.y) * 12112); // 随机哈希抖动当Method 0.5默认值 0时使用 64 级 Bayer 有序抖动产生规则、稳定的网点阵列否则使用hash11u来自shared/hash-functions.hlsl生成基于像素坐标的伪随机数产生更噪点化的随机抖动。文档与实现的一个差异需要说明官方文档称本操作符应用 Floyd-Steinberg dithering但从当前仓库的着色器源码看实际实现的是有序 Bayer 抖动 随机哈希抖动而非经典 Floyd-Steinberg 的误差扩散算法文档中Method 设置当前被忽略的描述与 shader 内Method分支实际生效的情况也并不完全一致。使用时应以源码行为为准Method0 输出 Bayer 网点Method1 输出随机散点。4.3 明暗判定与双色输出核心计算链如下float4 color Image.Sample(texSampler, cellTiles); float grayScale ApplyGainAndBias(saturate(color), GainAndBias); ... float dithering (n * 2.0 - 1.0) * 0.5; float blackOrWhite dithering grayScale 0.5 ? 0 : 1; float4 c lerp(Black, White, blackOrWhite); return (IsTextureValid 0.5) ? c : BlendColors(color, c, (int)BlendMode);流程可以拆解为四步亮度提取ApplyGainAndBias(saturate(color), GainAndBias)来自shared/bias-functions.hlsl对采样颜色先饱和钳制再应用增益/偏置输出灰度值grayScale抖动叠加把抖动值从[-0.5, 0.5]的范围内加到灰度上dithering grayScale这是有序抖动的关键——用空间上的阈值扰动来模拟中间调二值化 0.5判定为暗部0否则为亮部1双色插值lerp(Black, White, blackOrWhite)在ShadowColor与HighlightColor之间插值得到最终颜色混合回原始图像当输入纹理有效IsTextureValid 0.5时通过BlendColors(color, c, (int)BlendMode)来自shared/blend-functions.hlsl将双色结果按所选混合模式与原始图像合成若输入纹理无效则直接输出双色结果。此外shader 还用Scale - 0.0001f作为 epsilon 计算divisions注释说明这是为了防止图案中出现重复性伪影Offset被换算为Offset * float2(-1, 1) / divisions施加到网格坐标上实现抖动图案的平移。五、BlendMethod 混合模式可选值BlendMethod在 C# 侧映射到 SharedEnums.cs 中的RgbBlendModes枚举public enum RgbBlendModes { Normal 0, Screen 1, Multiply 2, Overlay 3, Difference 4, UseImageA_RGB 5, UseImageB_RGB 6, ColorDodge 7, LinearDodge 8, MultiplyA 9, }默认值0即 Normal 模式双色结果直接覆盖原始图像。若希望抖动图案与原始画面产生叠加、叠底、差值等混合关系可将此参数切换为对应枚举值。六、节点内部结构从 .t3 看参数如何接入着色器Dither 并非直接内联 shader而是通过内部子节点图组装。从 Dither.t3 的Children与Connections可以看到其内部拓扑宿主为_ImageFxShaderSetupStaticGUIDbd0b9c5b-...源码见 _ImageFxShaderSetupStatic.cs它暴露Texture、Source、ParamsMultiInputSlotfloat、Resolution、Wrap、OutputFormat、BufferColor、GenerateMips、Filter、IntParams等输入节点图中配置了 2 个IntToFloat、3 个Vector4Components、2 个Vector2Components拆包节点把 C# 侧的Vector4/Vector2/int输入逐个分量拆解后汇入_ImageFxShaderSetupStatic的Params多输入槽像素着色器路径固定为Lib:shaders/img/fx/Dither.hlsl采样环绕模式Wrap MirrorOnce输出格式OutputFormat R16G16B16A16_Float16 位浮点 RGBA避免二值化边界产生精度损失。参数到 shader 常量的对应关系可归纳为Dither 输入shader cbuffer 字段内部接线方式ImageImage(t0)直连宿主的TextureShadowColorBlackVector4Components → ParamsHighlightColorWhiteVector4Components → ParamsGrayScaleWeightsGrayScaleWeightsVector4Components → ParamsGainAndBiasGainAndBiasVector2Components → ParamsScaleScale直连 ParamsOffsetOffsetVector2Components → ParamsMethodMethodIntToFloat → ParamsBlendMethodBlendModeIntToFloat → Params这一参数拆包 共享 shader 宿主的结构在Lib.image.fx.stylize乃至整个Lib.image.fx分类中普遍复用是 TiXL 图像特效操作符的典型组织方式。七、实战应用与组合建议7.1 基本接入方式将任意纹理输出如渲染结果、视频、图片加载连接到 Dither 的Image输入将TextureOutput接入合成链或直接作为最终画面保持默认参数即可得到经典的 Rec.709 灰度加权 Bayer 网点的黑白抖动效果若要彩色双色效果将 ShadowColor / HighlightColor 改为任意两色如(0.9, 0.2, 0.1, 1)配(0.1, 0.1, 0.3, 1)可获得撞色版画风格。7.2 参数调优速查减小 Scale网点更细密画面更接近原图信息量适合照片写实向双色化增大 Scale上限 15出现大块马赛克式网点适合粗颗粒印刷海报调整 GainAndBiasGain 压缩/拉伸灰度对比Bias 平移整体明暗阈值可快速获得偏亮或偏暗的版画层次设置 Method 1从规则 Bayer 网点切换为随机散点消除规律纹理呈现更颗粒感的噪点风格切换 BlendMethod与原始图像做 Screen/Multiply/Overlay 等混合实现彩色底图 双色网点的半风格化效果。7.3 与同分类效果组合官方文档明确提示 Dither 可与以下风格化操作符组合以获得更丰富的效果AsciiRender字符画 抖动双色的复古终端风格MosaicTiling马赛克分块 抖动网点像素艺术感更强VoronoiCells、HoneyCombTiles在几何细胞图案上叠加双色抖动Lib.image.fx.glitch分类下的 SubdivisionStretch 等故障类效果亦可与 Dither 串联用于动感撕裂画面。利用 TiXL 的时间驱动特性还可以对 Scale、Offset 或 GainAndBias 做关键帧动画让网点粒度、图案位置与明暗阈值随时间变化生成呼吸感的动态风格化背景。八、使用注意事项命名与实现差异文档描述为 Floyd-Steinberg 误差扩散但当前 Dither.hlsl 实际实现的是 Bayer 有序抖动与随机哈希抖动若追求经典的 Floyd-Steinberg 误差扩散纹理需要留意此实现差异Method 参数官方文档标注当前被忽略但从 shader 源码看Method分支实际参与运算 0.5选择 Bayer64否则选择 hash11u以实际运行效果为准输入相关性Image 是 Required必需输入未连接时 shader 走IsTextureValid 0.5分支直接输出双色结果此时混合与原始图像无关输出精度节点内部以R16G16B16A16_Float格式渲染二值边缘与抖动边界不易出现 8 位纹理常见的带状伪影可在后续链路上继续做模糊、描边等处理。相关文件索引官方文档Dither.md、分类索引 README.md节点定义Dither.cs节点图与 UI 配置Dither.t3、Dither.t3ui着色器实现Dither.hlsl内部 shader 宿主_ImageFxShaderSetupStatic.cs混合模式枚举SharedEnums.cs【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考