TiXL RgbTV 算子深度指南用节点图实现复古电视故障效果【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3RgbTV 是 TiXL 内置图像效果库Lib.image.fx.glitch中的一款后处理算子用于为任意 Texture2D 输入叠加老式显像管电视故障视觉风格。本文以算子文档为骨架结合其 HLSL 着色器实现、节点图结构与界面元数据完整讲解 26 个输入参数的默认值与作用、着色器逐段原理以及如何将其接入实时 PostFX 管线并调出不同强度的故障效果。读完本文你将能独立完成 RgbTV 的接线、调参和动画控制。一、算子定位与使用场景RgbTV 位于图像效果分类Lib.image.fx.glitch之下见 glitch 分类索引官方描述为 Creates a vintage TV-glitch effect即模拟老式电视机在信号受干扰时出现的画面特征RGB 通道分离的色差条纹、扫描线/网格、横向像素错位、随机噪点、辉光与暗角等。它特别适合作为 PostFX后期特效管线中的一环。原文档明确指出与之搭配常用的算子包括MotionBlur运动模糊DepthOfField景深ChromaticAbberation色差Glow辉光Grain胶片颗粒Blur模糊典型用法是把一个已完成主体合成的图像输入 RgbTV 的 Image 端口输出端 TextureOutput 再接回最终合成节点即可让整幅画面带上复古电视气质。仓库示例工程Operators/examples/Symbols/user/still/worksforeverybody/scenes/TVIntroSceneSetup.t3中即有 RgbTV 实例节点 Id4c489763可作为真实接线参考。二、节点输入输出一览RgbTV 的公开接口由 RgbTV.cs 定义共 26 个输入端口与 1 个输出端口方向端口名类型输入ImageTexture2D输入Visibility / PatternAmount / ImageBrightess / BlackLevel / ImageContrast / BlurImage / GlowIntensity / GlowBlur / PatternSize / ShiftColumns / Gaps / GlitchAmount / GlitchFlicker / GlitchTimeOverride / GlitchDistort / ShadeDistortion / NoiseForDistortion / Noise / NoiseSpeed / NoiseExponent / NoiseColorize / Buldge / VignetteSingle (float)输入PatternBlurVector2输入ResolutionInt2输出TextureOutputT3.Core.DataTypes.Texture2D其中Image是唯一必须连接的输入其余参数均带默认值直接放置算子即可预览效果。各输入端口的 GUID 与声明顺序见 RgbTV.cs。三、输入参数全解析含默认值与 UI 范围以下默认值取自算子的序列化定义 RgbTV.t3FormatVersion 3UI 范围与分组来自 RgbTV.t3ui。3.1 基础合成Visibility / PatternAmount参数默认值说明Visibility1.0整体效果强度。着色器中该值会以乘法形式作用于几乎所有子效果鼓包、位移、辉光、图案混合、暗角0 时基本退化为原图PatternAmount0.2电视网格图案与原图的混合比例最终通过lerp(imgCol, pattern, PatternAmount * Visibility)混合3.2 图案成像Pattern Image 组这一组控制网格中每个色块如何呈现图像内容参数默认值说明ImageBrightess0.5图案中图像内容的基础亮度直接乘到各通道采样值上BlackLevel-0.1黑色电平偏移整体压暗或提亮图案ImageContrast1.0图案对比度作为指数作用于通道值着色器中命名为 Contrast对应着色器公式RgbTV.hlslfloat xx center pow(sourceImageChannel * ImageBrightness, Contrast) BlackLevel; float s smoothstep(1 - PatternBlurX, 1 PatternBlurY, xx) * ImageBrightness;3.3 图像预处理模糊与辉光参数默认值UI 范围说明BlurImage0.0—基于 mip 链的柔化强度0 为锐利原图GlowIntensity0.1—辉光强度结果被 clamp 到 [0, 10]GlowBlur0.8[0, 1]强制钳制辉光的模糊程度1 时完全使用最低 mip 层3.4 网格形状Pattern Shape 组参数默认值UI 范围说明PatternSize0.025[0, 0.02]Scale 0.0001网格单元尺寸。实际划分密度由float2(aspectRatio, 1) * 4 / PatternSize决定数值越小单元越密ShiftColumns0.5—相邻列在垂直方向的错位偏移量用于制造行错位的扭曲感在计算单元内 Y 坐标时叠加cellIdX * ShiftColumsGaps0.03[0, 1]单元间隙黑色分隔线宽度配合 PatternBlur 的 Y 分量控制扫描线感PatternBlur(0.25, 0.25)—Vector2X 分量控制图案边缘过渡smoothstep 范围Y 分量控制扫描线在垂直方向的柔化宽度3.5 故障与扭曲Distortion Glitch 组参数默认值说明GlitchAmount1.0故障总量乘到噪声偏移、色彩扰动等所有 glitch 子效果上GlitchFlicker0.0故障闪烁频率。从图结构看它驱动一个 AnimValueShape 8与 GlitchAmount 相加后经 Clamp 送入常量缓冲实现随时间起伏的故障强度GlitchTimeOverride0.0时间覆盖。为 0 时使用运行时钟_Time_old 经 Compare 判断切换非零时冻结/指定故障演化时刻便于定格某一帧的故障形态GlitchDistort1.0横向位移失真强度pow(noiseColor.r, 4) * GlitchDistort * float2(1, 0.1)决定采样点偏移ShadeDistortion2.0阴影失真使故障区域同时出现亮度压暗clamp(1 - pow(noiseColor.r, 1.4) * ShadeDistortion * ...)NoiseForDistortion20.0噪声对位移失真的放大倍率叠加进每通道噪点扰动3.6 噪点Noise Settings 组参数默认值说明Noise0.1图案单元内像素级噪点幅度NoiseSpeed10.0噪点动画速度乘到GlitchTime上NoiseExponent1.0噪点指数控制噪点明暗分布的曲率小于 1 趋向中灰大于 1 趋向两极NoiseColorize0.5噪点彩色化比例0 为纯灰度噪点1 为全彩色 RGB 噪点3.7 外观Appearance 组参数默认值UI 范围说明Buldge0.15—画面中心鼓包畸变p - p * Buldge * Visibility * (0.5 - dot(p, p))模拟老式 CRT 屏幕曲面Vignette1.0[0, 3]暗角强度基于到画面中心的距离衰减3.8 输出规格参数默认值说明Resolution(0, 0)输出分辨率覆盖。为 (0,0) 时继承输入纹理尺寸由内部 GetTextureSize 节点读取 Image 尺寸并写入 Resolution 常量缓冲四、内部图结构与渲染流程RgbTV 不是一个单着色器节点而是一个由约 30 个子节点组合成的复合算子见 RgbTV.t3。从Connections数组可以还原出两条关键链路像素着色链路PixelShader加载Lib:shaders/img/fx/RgbTV.hlsl入口psMain顶点着色器使用Lib:shaders/img/fx/Default2-vs.hlsl入口vsMain输入 Image 经SrvFromTexture2d绑定为 t0噪声贴图经LoadImage路径Lib:images/basic/perlin-noise-rgb.png加载后通过另一个SrvFromTexture2d绑定为 t1ResolutionConstBuffer将目标宽高写入 b1结果渲染到RenderTarget格式R16G16B16A16_FloatGenerateMipstrue带深度缓冲、MSAA1最终经DrawVertexCount6提交由TextureOutput端口输出。参数打包链路所有输入参数汇聚到FloatsToBuffer子节点打包进 b0 常量缓冲ParamConstants。值得注意的图内处理有两点GlitchFlicker先驱动AnimValueShape8再与GlitchAmount相加、经ClampMax10000后进入缓冲——即闪烁效果是动态调制后的总量GlitchTimeOverride与_Time_old通过Compare/BoolToFloat选择时间来源实现自动动画 / 手动定格两种模式。五、着色器实现原理逐段解读完整着色器见 RgbTV.hlsl以下按psMain的执行顺序拆解。5.1 常量缓冲与资源绑定cbuffer ParamConstants : register(b0) // 26 个参数 Texture2Dfloat4 inputTexture : register(t0); // 输入图 Texture2Dfloat4 noiseTexture : register(t1); // 柏林噪点贴图 sampler clampingSampler : register(s0); // 钳制采样读输入图 sampler wrappingSampler : register(s1); // 环绕采样读噪声 cbuffer Resolution : register(b1) { float TargetWidth; float TargetHeight; }一个实现细节C# 端口名与着色器变量名存在少量拼写差异如ImageBrightess→ImageBrightness、ShiftColumns→ShiftColums、ImageContrast→Contrast这是项目既有命名不影响接线因为端口名到常量缓冲的映射由FloatsToBuffer的打包顺序决定。5.2 RGB 条纹分离核心卖点静态数组定义三基色索引GetColor为每个颜色通道施加横向偏移并取模制造色差错位static const float3 RgbColors[] { float3(1,0,0), float3(0,1,0), float3(0,0,1) }; float offset (rgbIndex - 1) / 3.0; x offset; x mod(x, 1.03); // 略大于 1 的取模周期制造轻微错位 float center (0.5 - abs(x - 0.5)) * 2; // 三角波窗口随后对每个通道分别用ImageBrightness / Contrast / BlackLevel整形再用PatternBlur做 smoothstep 过渡最终在单元内合成带色差的扫描像素条。5.3 噪声生成GetNoiseFromRandom噪点采用哈希函数驱动来自 hash-functions.hlsl 的hash12/hash42以单元坐标cellId为种子、GlitchTime * NoiseSpeed为时间轴相邻两帧哈希值 lerp 得到平滑动画再按NoiseColorize在灰度与彩色之间插值最后通过NoiseExponent调整分布形态float pxHash hash12(uv * 431 111); float t GlitchTime * NoiseSpeed pxHash; float4 hash lerp(hash1, hash2, t % 1); float4 grayScale (hash.r hash.g hash.b) / 3; float4 noise (lerp(grayScale, hash, NoiseColorize) - 0.5) * 2; noise noise 0 ? -pow(-noise, NoiseExponent) : pow(noise, NoiseExponent);5.4 鼓包、位移与阴影失真p - p * Buldge * Visibility * (0.5 - dot(p, p)); // 5.4.1 曲面鼓包 float4 noiseColor abs(noiseTexture.SampleLevel(wrappingSampler, noiseUv, 0) - 0.5) * GlitchAmount * Visibility; // 5.4.2 屏幕噪声强度 noiseColor * (0.4 pow(1 - uv2.y, 6) * 3); // 上边缘噪点放大模拟信号劣化 noiseColor 0.03; float2 glichOffset pow(noiseColor.r, 4) * GlitchDistort * float2(1, 0.1); uv2 - glichOffset * Visibility; // 5.4.3 横向错位采样 imgCol.rgb * clamp(1 - pow(noiseColor.r, 1.4) * ShadeDistortion * GlitchDistort * GlitchAmount * Visibility, 0, 10); // 5.4.4 故障区压暗噪声 UV 使用p * float2(0.001, 1)这种强各向异性比例使得故障扰动在横向上更细碎、在纵向上连续——这正是电视横向撕裂观感的来源。5.5 mip 链模糊与辉光利用渲染目标开启的 mip 链mipLevelCount在代码中被固定为 7循环采样各 mip 层并按权重累加for (int i 0; i mipLevelCount 1; i) { float4 mipColor inputTexture.SampleLevel(clampingSampler, uv2, i); float f i / ((float)mipLevelCount); float level saturate((pow(f 1 - saturate(BlurImage), 20) 0.001)); // 模糊权重 ... level saturate((pow(f 1 - saturate(GlowBlur), 20) 0.001)); // 辉光权重 } blurredCol lerp(imgCol1, blurredCol, saturate(BlurImage 1) * Visibility); imgCol blurredCol clamp(glowCol * GlowIntensity, 0, 10) * Visibility;这种mip 累加方式比多趟高斯模糊更省带宽是实时渲染中常见的单趟近似模糊手法。5.6 网格划分与扫描线float2 divisions float2(aspectRatio, 1) * 4 / PatternSize; float2 pScaled pCentered * divisions; float pInCellX mod(pScaled.x, 1); int cellIdX pScaled.x - pInCellX; float pInCellY mod(pScaled.y cellIdX * ShiftColums, 1); // 列错位 ... float xInStripe (pInCellX - 0.5) / (1 - Gaps * 2) 0.5; // 条纹内坐标Gaps 控制间隙 float3 cc float3(GetColor(0, xInStripe, pInCellY, noisyImage.r), GetColor(1, xInStripe, pInCellY, noisyImage.g), GetColor(2, xInStripe, pInCellY, noisyImage.b)); float yBlur smoothstep(padding - PatternBlurY, padding PatternBlurY, abs(pInCellY - 0.5)); float4 pattern float4(cc * yBlur, 1); float4 r lerp(imgCol, pattern, PatternAmount * Visibility);divisions乘以aspectRatio保证网格在任意宽高比下视觉均匀ShiftColums按列号平移单元内 Y 坐标形成逐列交错的扫描行yBlur在每行上沿形成柔化的扫描线暗边。5.7 暗角收尾p.x * 1.5; // 横向拉伸距离使暗角更贴近真实镜头的非对称衰减 r.rgb * lerp(1.5 - Vignette * (1 - (0.5 - dot(p, p)) - 0.5), 1, Visibility 1);六、实战调参方案结合默认值与公式给出几组可直接上手的调参方向1. 轻量信号干扰PatternAmount0.15~0.3、GlitchAmount0.4~0.6、Noise0.05、Buldge0.1仅需微弱网格与偶尔的横向错位适合作为文字/Logo 背景的氛围层。2. 强力坏信号GlitchAmount1.5可动画波动、ShiftColumns0.8、Gaps0.05、ShadeDistortion2.5、NoiseForDistortion30配合GlitchFlicker制造间歇性爆发。3. 定格/触发式故障将GlitchTimeOverride从 0 改为非零值可冻结故障相位适合配合音频或随机触发如 TiXL 的Gitch触发节点做卡帧效果恢复 0 即回到随时间演化。4. 复古 CRT 质感Buldge0.15~0.25、Vignette1.5、GlowIntensity0.1、GlowBlur0.8、PatternSize0.02并在链路后串联 Grain 与 Glow 进一步增强胶片感。5. 后处理管线衔接把本算子放在合成链末端前级可接 MotionBlur/DepthOfField/ChromaticAbberation输出接 Glow/Grain/Blur 做最终整形即可构成文档推荐的完整 PostFX 管线。七、参数速查总表参数类型默认值UI 范围所属分组ImageTexture2D———VisibilitySingle1.0——PatternAmountSingle0.2——ImageBrightessSingle0.5—Pattern ImageBlackLevelSingle-0.1—Pattern ImageImageContrastSingle1.0—Pattern ImageBlurImageSingle0.0——GlowIntensitySingle0.1——GlowBlurSingle0.8[0,1] 强制钳制—PatternSizeSingle0.025[0,0.02] Scale0.0001Pattern ShapeShiftColumnsSingle0.5—Pattern ShapeGapsSingle0.03[0,1]Pattern ShapePatternBlurVector2(0.25, 0.25)—Pattern ShapeGlitchAmountSingle1.0—Distortion GlitchGlitchFlickerSingle0.0—Distortion GlitchGlitchTimeOverrideSingle0.0—Distortion GlitchGlitchDistortSingle1.0—Distortion GlitchShadeDistortionSingle2.0—Distortion GlitchNoiseForDistortionSingle20.0—Distortion GlitchNoiseSingle0.1—Noise SettingsNoiseSpeedSingle10.0—Noise SettingsNoiseExponentSingle1.0—Noise SettingsNoiseColorizeSingle0.5—Noise SettingsBuldgeSingle0.15—AppearanceVignetteSingle1.0[0,3]AppearanceResolutionInt2(0,0)——八、延伸阅读glitch 分类下的其他效果算子GlitchDisplace、SortPixelGlitch、SubdivisionStretch以及分类索引 README着色器源码RgbTV.hlsl其依赖的哈希工具hash-functions.hlsl算子声明端口 GUIDRgbTV.cs默认值与图结构RgbTV.t3界面分组与滑杆范围RgbTV.t3ui真实使用示例TVIntroSceneSetup.t3RgbTV 实例位于节点 Id4c489763。掌握 RgbTV 的参数逻辑与着色器公式后你可以在 TiXL 节点图中快速复现任意强度的复古电视故障风格并将其稳定嵌入实时演出或录制的 PostFX 管线之中。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TiXL RgbTV 算子深度指南：用节点图实现复古电视故障效果
TiXL RgbTV 算子深度指南用节点图实现复古电视故障效果【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3RgbTV 是 TiXL 内置图像效果库Lib.image.fx.glitch中的一款后处理算子用于为任意 Texture2D 输入叠加老式显像管电视故障视觉风格。本文以算子文档为骨架结合其 HLSL 着色器实现、节点图结构与界面元数据完整讲解 26 个输入参数的默认值与作用、着色器逐段原理以及如何将其接入实时 PostFX 管线并调出不同强度的故障效果。读完本文你将能独立完成 RgbTV 的接线、调参和动画控制。一、算子定位与使用场景RgbTV 位于图像效果分类Lib.image.fx.glitch之下见 glitch 分类索引官方描述为 Creates a vintage TV-glitch effect即模拟老式电视机在信号受干扰时出现的画面特征RGB 通道分离的色差条纹、扫描线/网格、横向像素错位、随机噪点、辉光与暗角等。它特别适合作为 PostFX后期特效管线中的一环。原文档明确指出与之搭配常用的算子包括MotionBlur运动模糊DepthOfField景深ChromaticAbberation色差Glow辉光Grain胶片颗粒Blur模糊典型用法是把一个已完成主体合成的图像输入 RgbTV 的 Image 端口输出端 TextureOutput 再接回最终合成节点即可让整幅画面带上复古电视气质。仓库示例工程Operators/examples/Symbols/user/still/worksforeverybody/scenes/TVIntroSceneSetup.t3中即有 RgbTV 实例节点 Id4c489763可作为真实接线参考。二、节点输入输出一览RgbTV 的公开接口由 RgbTV.cs 定义共 26 个输入端口与 1 个输出端口方向端口名类型输入ImageTexture2D输入Visibility / PatternAmount / ImageBrightess / BlackLevel / ImageContrast / BlurImage / GlowIntensity / GlowBlur / PatternSize / ShiftColumns / Gaps / GlitchAmount / GlitchFlicker / GlitchTimeOverride / GlitchDistort / ShadeDistortion / NoiseForDistortion / Noise / NoiseSpeed / NoiseExponent / NoiseColorize / Buldge / VignetteSingle (float)输入PatternBlurVector2输入ResolutionInt2输出TextureOutputT3.Core.DataTypes.Texture2D其中Image是唯一必须连接的输入其余参数均带默认值直接放置算子即可预览效果。各输入端口的 GUID 与声明顺序见 RgbTV.cs。三、输入参数全解析含默认值与 UI 范围以下默认值取自算子的序列化定义 RgbTV.t3FormatVersion 3UI 范围与分组来自 RgbTV.t3ui。3.1 基础合成Visibility / PatternAmount参数默认值说明Visibility1.0整体效果强度。着色器中该值会以乘法形式作用于几乎所有子效果鼓包、位移、辉光、图案混合、暗角0 时基本退化为原图PatternAmount0.2电视网格图案与原图的混合比例最终通过lerp(imgCol, pattern, PatternAmount * Visibility)混合3.2 图案成像Pattern Image 组这一组控制网格中每个色块如何呈现图像内容参数默认值说明ImageBrightess0.5图案中图像内容的基础亮度直接乘到各通道采样值上BlackLevel-0.1黑色电平偏移整体压暗或提亮图案ImageContrast1.0图案对比度作为指数作用于通道值着色器中命名为 Contrast对应着色器公式RgbTV.hlslfloat xx center pow(sourceImageChannel * ImageBrightness, Contrast) BlackLevel; float s smoothstep(1 - PatternBlurX, 1 PatternBlurY, xx) * ImageBrightness;3.3 图像预处理模糊与辉光参数默认值UI 范围说明BlurImage0.0—基于 mip 链的柔化强度0 为锐利原图GlowIntensity0.1—辉光强度结果被 clamp 到 [0, 10]GlowBlur0.8[0, 1]强制钳制辉光的模糊程度1 时完全使用最低 mip 层3.4 网格形状Pattern Shape 组参数默认值UI 范围说明PatternSize0.025[0, 0.02]Scale 0.0001网格单元尺寸。实际划分密度由float2(aspectRatio, 1) * 4 / PatternSize决定数值越小单元越密ShiftColumns0.5—相邻列在垂直方向的错位偏移量用于制造行错位的扭曲感在计算单元内 Y 坐标时叠加cellIdX * ShiftColumsGaps0.03[0, 1]单元间隙黑色分隔线宽度配合 PatternBlur 的 Y 分量控制扫描线感PatternBlur(0.25, 0.25)—Vector2X 分量控制图案边缘过渡smoothstep 范围Y 分量控制扫描线在垂直方向的柔化宽度3.5 故障与扭曲Distortion Glitch 组参数默认值说明GlitchAmount1.0故障总量乘到噪声偏移、色彩扰动等所有 glitch 子效果上GlitchFlicker0.0故障闪烁频率。从图结构看它驱动一个 AnimValueShape 8与 GlitchAmount 相加后经 Clamp 送入常量缓冲实现随时间起伏的故障强度GlitchTimeOverride0.0时间覆盖。为 0 时使用运行时钟_Time_old 经 Compare 判断切换非零时冻结/指定故障演化时刻便于定格某一帧的故障形态GlitchDistort1.0横向位移失真强度pow(noiseColor.r, 4) * GlitchDistort * float2(1, 0.1)决定采样点偏移ShadeDistortion2.0阴影失真使故障区域同时出现亮度压暗clamp(1 - pow(noiseColor.r, 1.4) * ShadeDistortion * ...)NoiseForDistortion20.0噪声对位移失真的放大倍率叠加进每通道噪点扰动3.6 噪点Noise Settings 组参数默认值说明Noise0.1图案单元内像素级噪点幅度NoiseSpeed10.0噪点动画速度乘到GlitchTime上NoiseExponent1.0噪点指数控制噪点明暗分布的曲率小于 1 趋向中灰大于 1 趋向两极NoiseColorize0.5噪点彩色化比例0 为纯灰度噪点1 为全彩色 RGB 噪点3.7 外观Appearance 组参数默认值UI 范围说明Buldge0.15—画面中心鼓包畸变p - p * Buldge * Visibility * (0.5 - dot(p, p))模拟老式 CRT 屏幕曲面Vignette1.0[0, 3]暗角强度基于到画面中心的距离衰减3.8 输出规格参数默认值说明Resolution(0, 0)输出分辨率覆盖。为 (0,0) 时继承输入纹理尺寸由内部 GetTextureSize 节点读取 Image 尺寸并写入 Resolution 常量缓冲四、内部图结构与渲染流程RgbTV 不是一个单着色器节点而是一个由约 30 个子节点组合成的复合算子见 RgbTV.t3。从Connections数组可以还原出两条关键链路像素着色链路PixelShader加载Lib:shaders/img/fx/RgbTV.hlsl入口psMain顶点着色器使用Lib:shaders/img/fx/Default2-vs.hlsl入口vsMain输入 Image 经SrvFromTexture2d绑定为 t0噪声贴图经LoadImage路径Lib:images/basic/perlin-noise-rgb.png加载后通过另一个SrvFromTexture2d绑定为 t1ResolutionConstBuffer将目标宽高写入 b1结果渲染到RenderTarget格式R16G16B16A16_FloatGenerateMipstrue带深度缓冲、MSAA1最终经DrawVertexCount6提交由TextureOutput端口输出。参数打包链路所有输入参数汇聚到FloatsToBuffer子节点打包进 b0 常量缓冲ParamConstants。值得注意的图内处理有两点GlitchFlicker先驱动AnimValueShape8再与GlitchAmount相加、经ClampMax10000后进入缓冲——即闪烁效果是动态调制后的总量GlitchTimeOverride与_Time_old通过Compare/BoolToFloat选择时间来源实现自动动画 / 手动定格两种模式。五、着色器实现原理逐段解读完整着色器见 RgbTV.hlsl以下按psMain的执行顺序拆解。5.1 常量缓冲与资源绑定cbuffer ParamConstants : register(b0) // 26 个参数 Texture2Dfloat4 inputTexture : register(t0); // 输入图 Texture2Dfloat4 noiseTexture : register(t1); // 柏林噪点贴图 sampler clampingSampler : register(s0); // 钳制采样读输入图 sampler wrappingSampler : register(s1); // 环绕采样读噪声 cbuffer Resolution : register(b1) { float TargetWidth; float TargetHeight; }一个实现细节C# 端口名与着色器变量名存在少量拼写差异如ImageBrightess→ImageBrightness、ShiftColumns→ShiftColums、ImageContrast→Contrast这是项目既有命名不影响接线因为端口名到常量缓冲的映射由FloatsToBuffer的打包顺序决定。5.2 RGB 条纹分离核心卖点静态数组定义三基色索引GetColor为每个颜色通道施加横向偏移并取模制造色差错位static const float3 RgbColors[] { float3(1,0,0), float3(0,1,0), float3(0,0,1) }; float offset (rgbIndex - 1) / 3.0; x offset; x mod(x, 1.03); // 略大于 1 的取模周期制造轻微错位 float center (0.5 - abs(x - 0.5)) * 2; // 三角波窗口随后对每个通道分别用ImageBrightness / Contrast / BlackLevel整形再用PatternBlur做 smoothstep 过渡最终在单元内合成带色差的扫描像素条。5.3 噪声生成GetNoiseFromRandom噪点采用哈希函数驱动来自 hash-functions.hlsl 的hash12/hash42以单元坐标cellId为种子、GlitchTime * NoiseSpeed为时间轴相邻两帧哈希值 lerp 得到平滑动画再按NoiseColorize在灰度与彩色之间插值最后通过NoiseExponent调整分布形态float pxHash hash12(uv * 431 111); float t GlitchTime * NoiseSpeed pxHash; float4 hash lerp(hash1, hash2, t % 1); float4 grayScale (hash.r hash.g hash.b) / 3; float4 noise (lerp(grayScale, hash, NoiseColorize) - 0.5) * 2; noise noise 0 ? -pow(-noise, NoiseExponent) : pow(noise, NoiseExponent);5.4 鼓包、位移与阴影失真p - p * Buldge * Visibility * (0.5 - dot(p, p)); // 5.4.1 曲面鼓包 float4 noiseColor abs(noiseTexture.SampleLevel(wrappingSampler, noiseUv, 0) - 0.5) * GlitchAmount * Visibility; // 5.4.2 屏幕噪声强度 noiseColor * (0.4 pow(1 - uv2.y, 6) * 3); // 上边缘噪点放大模拟信号劣化 noiseColor 0.03; float2 glichOffset pow(noiseColor.r, 4) * GlitchDistort * float2(1, 0.1); uv2 - glichOffset * Visibility; // 5.4.3 横向错位采样 imgCol.rgb * clamp(1 - pow(noiseColor.r, 1.4) * ShadeDistortion * GlitchDistort * GlitchAmount * Visibility, 0, 10); // 5.4.4 故障区压暗噪声 UV 使用p * float2(0.001, 1)这种强各向异性比例使得故障扰动在横向上更细碎、在纵向上连续——这正是电视横向撕裂观感的来源。5.5 mip 链模糊与辉光利用渲染目标开启的 mip 链mipLevelCount在代码中被固定为 7循环采样各 mip 层并按权重累加for (int i 0; i mipLevelCount 1; i) { float4 mipColor inputTexture.SampleLevel(clampingSampler, uv2, i); float f i / ((float)mipLevelCount); float level saturate((pow(f 1 - saturate(BlurImage), 20) 0.001)); // 模糊权重 ... level saturate((pow(f 1 - saturate(GlowBlur), 20) 0.001)); // 辉光权重 } blurredCol lerp(imgCol1, blurredCol, saturate(BlurImage 1) * Visibility); imgCol blurredCol clamp(glowCol * GlowIntensity, 0, 10) * Visibility;这种mip 累加方式比多趟高斯模糊更省带宽是实时渲染中常见的单趟近似模糊手法。5.6 网格划分与扫描线float2 divisions float2(aspectRatio, 1) * 4 / PatternSize; float2 pScaled pCentered * divisions; float pInCellX mod(pScaled.x, 1); int cellIdX pScaled.x - pInCellX; float pInCellY mod(pScaled.y cellIdX * ShiftColums, 1); // 列错位 ... float xInStripe (pInCellX - 0.5) / (1 - Gaps * 2) 0.5; // 条纹内坐标Gaps 控制间隙 float3 cc float3(GetColor(0, xInStripe, pInCellY, noisyImage.r), GetColor(1, xInStripe, pInCellY, noisyImage.g), GetColor(2, xInStripe, pInCellY, noisyImage.b)); float yBlur smoothstep(padding - PatternBlurY, padding PatternBlurY, abs(pInCellY - 0.5)); float4 pattern float4(cc * yBlur, 1); float4 r lerp(imgCol, pattern, PatternAmount * Visibility);divisions乘以aspectRatio保证网格在任意宽高比下视觉均匀ShiftColums按列号平移单元内 Y 坐标形成逐列交错的扫描行yBlur在每行上沿形成柔化的扫描线暗边。5.7 暗角收尾p.x * 1.5; // 横向拉伸距离使暗角更贴近真实镜头的非对称衰减 r.rgb * lerp(1.5 - Vignette * (1 - (0.5 - dot(p, p)) - 0.5), 1, Visibility 1);六、实战调参方案结合默认值与公式给出几组可直接上手的调参方向1. 轻量信号干扰PatternAmount0.15~0.3、GlitchAmount0.4~0.6、Noise0.05、Buldge0.1仅需微弱网格与偶尔的横向错位适合作为文字/Logo 背景的氛围层。2. 强力坏信号GlitchAmount1.5可动画波动、ShiftColumns0.8、Gaps0.05、ShadeDistortion2.5、NoiseForDistortion30配合GlitchFlicker制造间歇性爆发。3. 定格/触发式故障将GlitchTimeOverride从 0 改为非零值可冻结故障相位适合配合音频或随机触发如 TiXL 的Gitch触发节点做卡帧效果恢复 0 即回到随时间演化。4. 复古 CRT 质感Buldge0.15~0.25、Vignette1.5、GlowIntensity0.1、GlowBlur0.8、PatternSize0.02并在链路后串联 Grain 与 Glow 进一步增强胶片感。5. 后处理管线衔接把本算子放在合成链末端前级可接 MotionBlur/DepthOfField/ChromaticAbberation输出接 Glow/Grain/Blur 做最终整形即可构成文档推荐的完整 PostFX 管线。七、参数速查总表参数类型默认值UI 范围所属分组ImageTexture2D———VisibilitySingle1.0——PatternAmountSingle0.2——ImageBrightessSingle0.5—Pattern ImageBlackLevelSingle-0.1—Pattern ImageImageContrastSingle1.0—Pattern ImageBlurImageSingle0.0——GlowIntensitySingle0.1——GlowBlurSingle0.8[0,1] 强制钳制—PatternSizeSingle0.025[0,0.02] Scale0.0001Pattern ShapeShiftColumnsSingle0.5—Pattern ShapeGapsSingle0.03[0,1]Pattern ShapePatternBlurVector2(0.25, 0.25)—Pattern ShapeGlitchAmountSingle1.0—Distortion GlitchGlitchFlickerSingle0.0—Distortion GlitchGlitchTimeOverrideSingle0.0—Distortion GlitchGlitchDistortSingle1.0—Distortion GlitchShadeDistortionSingle2.0—Distortion GlitchNoiseForDistortionSingle20.0—Distortion GlitchNoiseSingle0.1—Noise SettingsNoiseSpeedSingle10.0—Noise SettingsNoiseExponentSingle1.0—Noise SettingsNoiseColorizeSingle0.5—Noise SettingsBuldgeSingle0.15—AppearanceVignetteSingle1.0[0,3]AppearanceResolutionInt2(0,0)——八、延伸阅读glitch 分类下的其他效果算子GlitchDisplace、SortPixelGlitch、SubdivisionStretch以及分类索引 README着色器源码RgbTV.hlsl其依赖的哈希工具hash-functions.hlsl算子声明端口 GUIDRgbTV.cs默认值与图结构RgbTV.t3界面分组与滑杆范围RgbTV.t3ui真实使用示例TVIntroSceneSetup.t3RgbTV 实例位于节点 Id4c489763。掌握 RgbTV 的参数逻辑与着色器公式后你可以在 TiXL 节点图中快速复现任意强度的复古电视故障风格并将其稳定嵌入实时演出或录制的 PostFX 管线之中。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考