TiXL GlitchDisplace 算子完全指南:用 HLSL 网格点实现视频信号故障与位移特效

TiXL GlitchDisplace 算子完全指南:用 HLSL 网格点实现视频信号故障与位移特效 音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载GlitchDisplace 是 TiXL 的Lib.image.fx.glitch图像效果库中的一员它接收一张输入纹理通过把图像切成网格状的故障条带并随机位移、散射、着色逼真地模拟有损信号、损坏的视频文件、编解码器花屏等画面故障。读完本文你将掌握 GlitchDisplace 全部 17 个输入参数的含义与默认值、5 种 Mode 的选择逻辑以及其顶点着色器/像素着色器的底层实现原理并能在自己的 PostFX 后期管线中正确地配置与调优这个算子。效果定位它能做什么GlitchDisplace 属于 TiXL 库算子位于Lib.image.fx.glitch分组下分组总览见 .help/docs/operators/lib/image/fx/glitch/README.md。其官方描述为Takes the incoming image and applies an image effect that glitches and displaces parts of the image to mimic lossy signals, broken video files, codec glitches etc.即对输入图像应用一种故障 位移的图像效果用来模仿有损信号、损坏视频、编解码器花屏等画面。它适合在需要数字故障风数据错乱信号中断视觉的实时影像、VJ、片头或演出画面中使用且完全在 GPU 上运行可逐帧实时求值。与其隐约相似的算子是SortPixelGlitch像素排序故障效果同样位于 SortPixelGlitch.md同组还有复古电视故障RgbTV与分块拉伸SubdivisionStretch可供故障风后期选用。输入参数详解GlitchDisplace 的全部输入由 C# 侧的 GlitchDisplace.cs 声明算子符号定义与默认值记录在 GlitchDisplace.t3UI 元信息分组、取值范围、钳制在 GlitchDisplace.t3ui。下面按文档原表顺序逐项说明并补充仓库中可查证的默认值、范围与底层行为。名称类型说明默认值来自 .t3ImageTexture2DRequired输入图像纹理必填无需连接RowsInt32垂直方向生成的故障条数量300ColumnsInt32水平方向生成的故障条数量25SizeSingle缩放故障元素的大小高值会显著增加资源消耗文档原话1.0UI 范围 05 并强制钳制AmountSingle效果整体强度1.0ThresholdSingle依据当前 Mode 决定效果作用于图像的哪些区域0.0StretchVector2缩放故障条X 宽度Y 高度(3.0, 0.5)OffsetVector2随机偏移故障条X 水平Y 垂直(0.5, 0.0)ScatterVector2随机散射故障元素的位置(0.1, 0.1)ScatterStretchVector2定义散射的最大距离(0.0, 0.0)ScatterOffsetVector2—shader 中与 Offset 叠加参与位移见下文(0.0, 0.0)ColorizeVector4叠加到故障元素上的颜色(1.0, 0.0, 0.8917, 1.0)偏品红ColorRatioSingle颜色的强度/出现比例0.1UI 范围 01 并强制钳制SeedInt32故障效果的随机种子0OverridePointsBufferWithViews覆盖内部生成的网格点数据高级用途nullModeInt32故障/位移的触发方式见下节3EdgesRight条带生成Rows 与 ColumnsRows 与 Columns 直接决定故障条的网格密度。从 GlitchDisplace.t3 的连接关系可以看到Rows接到子算子_GridPoints_Old的CountYColumns接到CountX即Rows 越多垂直方向切出的条越密Columns 越多水平方向越密。默认 Rows300 / Columns25接近细密竖条 少量横切的经典 glitch 观感。该网格子算子还会产出每个点的FX1在 point.hlsl 中 Point 结构体里FX1对应粒子半径/尺寸以及W1.1、Scale2.0等属性作为故障块尺寸与位置的基础数据。Size 与 Amount规模与强度Size乘以每个点自身的FX1来缩放故障块尺寸UI 上被钳制在 05。文档特别警告高值会让效果消耗大量资源——因为块变大后每个故障块的屏幕覆盖面积增大光栅化与采样开销随之上升。Amount在着色器中直接乘以displaceFactor位移因子是调节效果整体强度的主旋钮displaceFactor * Amount。Stretch / Offset / Scatter 系列几何扰动这一组参数全部为 Vector2在 shader 的Params常量缓冲register b2中对应字段为输入参数cbuffer 字段作用StretchStretch缩放故障块宽高X宽、Y高OffsetDisplace与 ScatterOffset 一起驱动采样 UV 位移ScatterScatterPosition对每个点的位置做随机偏移散开故障块ScatterStretchScatterStretch随机缩放故障块大小定义散射的最大距离ScatterOffsetScatterDisplace与 Offset 叠加参与位移可以看到 shader 里位移量统一为(Displace/100 ScatterDisplace/100) * displaceFactor——因此 Offset 与 ScatterOffset 均以除以 100的尺度作用默认 Offset(0.5, 0.0) 意味着水平方向基准位移约 0.5%。Colorize 与 ColorRatio故障着色Colorize是叠加到故障元素上的 RGBA 颜色。默认值为(1.0, 0.0, 0.8917, 1.0)即高饱和的品红色——这也是 glitch 风格里常见的信号错色色相。算子的 UI 将该参数归入 Color 分组。ColorRatio决定颜色出现的比例文档称 color intensityUI 范围 01 并钳制。在着色器中随机数rand.x小于ColorRatio的元素会被染上 Colorize 色其余保持原样从而控制染色故障块的密度。Seed 与 OverridePoints可复现性与高级控制Seed是故障随机种子默认 0。它在顶点着色器中参与哈希计算hash21((particleId Seed * 1771) % 33533)因此固定 Seed 即可复现完全相同的故障图案便于逐帧比较或与音乐节拍对齐后使用不同的种子值轮换。OverridePoints允许传入自定义的BufferWithViews点缓冲来覆盖内部生成的网格点UI 上标记为 Advanced 组。连接关系显示它经过FirstValidBuffer后替换默认的_GridPoints_Old输出适合想做更精细程序化控制的进阶用法。Mode五种故障触发方式Mode是一个枚举型 Int32 输入C# 侧定义为private enum Modes { Static, // 0 Highlights, // 1 Shadows, // 2 EdgesLeft, // 3 EdgesRight, // 4 }它在 GlitchDisplace.hlsl 中通过Mode与各阈值常量ModeStatic0.5, ModeHighlights1.5, ModeShadows2.5, ModeEdgeLeft3.5, ModeEdgeRight4.5的区间比较决定哪些像素会被位移枚举值触发条件shader 公式直觉理解StaticdisplaceFactor 0不按内容筛选位移量恒为 0仅靠 Scatter 等几何扰动Highlightssaturate(brightness1 - Threshold)只对亮度高于Threshold 的高光区域施加位移Shadowssaturate(1 - brightness1 - Threshold)只对亮度低于Threshold 的暗部区域施加位移EdgesLeftsaturate(brightness2 - brightness1 - Threshold) * 3只对向右采样更亮的左向边缘位移强度×3EdgesRightsaturate(brightness1 - brightness2 - Threshold) * 3只对向右采样更暗的右向边缘位移强度×3其中brightness1 / brightness2分别是当前点与右移 0.01 UV 处采样的平均亮度RGB 均值乘 alpha。默认 Mode 3即 EdgesRight配合默认 Threshold0.0意味着效果默认优先作用在图像中的边缘轮廓上——这正是信号被拉扯、边缘撕裂视觉效果的来源。调节 Threshold 即可选择多亮的边缘才会被拉扯。着色器核心逻辑节选自 GlitchDisplace.hlslfloat displaceFactor 0; if (Mode ModeStatic) { } else if (Mode ModeHighlights) { displaceFactor saturate(brightness1 - Threshold); } else if (Mode ModeShadows) { displaceFactor saturate(1 - brightness1 - Threshold); } else if (Mode ModeEdgeLeft) { displaceFactor saturate(brightness2 - brightness1 - Threshold) * 3; } else if (Mode ModeEdgeRight) { displaceFactor saturate(brightness1 - brightness2 - Threshold) * 3; } displaceFactor * Amount;底层实现原理网格点 双着色器GlitchDisplace 并不是简单的全屏 UV 扰动而是用点精灵网格重建图像的混合渲染方案。从 GlitchDisplace.t3 的内部子算子连接可以还原出完整的数据流_GridPoints_Old按 Rows×Columns 生成点网格默认 300×25 个点每个点携带位置与尺寸FX1。MultiplyIntB6把顶点数 ×6——因为每个点被展开成 2 个三角形6 个顶点的四边形Draw用该总数绘制。FloatsToBuffer把 Stretch、Offset、Scatter、ScatterStretch、ScatterOffset、Size、ColorRatio、Threshold、Amount、Seed、Mode 打包进Params常量缓冲register b2Vector4Components分解 Colorize 后一并写入。VertexShader/PixelShader的Source均为Lib:shaders/points/draw/GlitchDisplace.hlsl入口点分别是vsMain与psMain。最终RenderTarget输出接到算子输出Output2类型为T3.Core.DataTypes.Texture2D。vsMain位移发生在顶点阶段顶点着色器对每个网格点做如下事情用哈希函数hash21来自 hash-functions.hlsl基于 Inigo Quilez 的整数/浮点哈希风格根据particleId与Seed生成两个随机数rand、rand2Centered用ScatterPosition即 Scatter把点随机散开centerInObject pointDef.Position randCentered * ScatterPosition由pointDef.FX1 * Size * Stretch * (1 pow(rand,2) * ScatterStretch) * 0.05计算故障块的四边形尺寸按 Mode 计算displaceFactor后若其绝对值小于 0.0001 则把顶点位置置 0等价于剔除该块避免无意义绘制用(Displace/100 ScatterDisplace/100) * displaceFactor偏移最终采样 UV实现被选中区域的内容沿位移方向拉扯的效果按ColorRatio rand.x决定该块是否染上 Colorize 色并把displaceFactor写入 alpha。psMain采样与混色像素着色器按位移后的 UV 从输入纹理采样并与故障色做lerpfloat4 textureCol texture2.Sample(texSampler, input.texCoord); return lerp(textureCol, float4(input.color.rgb, 1), input.color.a);位移量越大的故障块其 Colorize 色越不透明位移为 0 的块保持原始画面。此外算子符号中的SamplerState设置了AddressV Clamp即采样在垂直方向做钳制避免 UV 越界后出现意外的环绕采样。输出说明名称类型Output2T3.Core.DataTypes.Texture2DOutput2 是经过故障位移处理后的 Texture2D可直接连入后续效果或最终输出。注意该算子输出的是处理后的图像本身不是故障掩码。PostFX 管线中的定位与相关算子文档明确建议了一批适合与 GlitchDisplace 搭配、组成 PostFX 后期链路的算子MotionBlur运动模糊、DepthOfField景深、ChromaticAbberation色差、Glow辉光、Grain颗粒、Blur模糊。典型用法是把 GlitchDisplace 放在画面内容之后、模糊/颗粒等润色效果之前先用它制造信号撕裂的主体故障再用 Grain 叠加噪点质感用 ChromaticAbberation 增强 RGB 错位感从而获得更完整的故障风后期。同组的其余效果算子见 Lib.image.fx.glitch README包括RgbTV— 复古电视故障效果SortPixelGlitch— 与 GlitchDisplace 隐约相似的像素排序故障效果文档交叉引用对比两者SortPixelGlitch 通过扫描行排序重排像素GlitchDisplace 则通过网格点位移两者组合可获得更丰富的故障层次SubdivisionStretch— 把图像切分成越来越小的碎片并拉伸的生成型效果。实战调参建议基于默认值与底层公式可以总结出几条可操作的调参路径均为仓库可验证的事实非外部资料快速出现故障撕裂保持默认 Mode3EdgesRight调大Amount1→3 左右边缘区域的位移会明显增强同时调大Offset的水平分量可拉长撕裂的位移距离注意其实际作用为除以 100。控制故障条密度先调Rows垂直条数与Columns水平条数。默认 300×25 偏细密要更大块的故障块可降低 Rows/Columns并适当放大Size。只让高光/暗部故障切到 Mode1Highlights或 2Shadows再用Threshold收紧作用范围Threshold 越大被触发所需的亮度差越高。染色风格把Colorize改成青色/绿色系并调高ColorRatio0.1→0.4可得到更信号错色的 RGB 分离感ColorRatio被 UI 钳制在 01。保证可复现固定Seed后故障图案可复现对演出场景可每拍递增 Seed 以获得不同的随机撕裂。性能控制Size越大、Rows/Columns越多光栅化与采样压力越大文档明确提示高 Size 会消耗大量资源实时场景下应从默认值出发逐步上调直到帧耗时可接受。相关源码路径速查算子文档.help/docs/operators/lib/image/fx/glitch/GlitchDisplace.md分组文档.help/docs/operators/lib/image/fx/glitch/README.mdC# 算子定义输入输出槽与 Mode 枚举GlitchDisplace.cs算子符号与默认值GlitchDisplace.t3UI 元信息分组、钳制范围GlitchDisplace.t3uiHLSL 顶点/像素着色器GlitchDisplace.hlsl依赖的哈希函数库hash-functions.hlslPoint 数据结构FX1 即块尺寸point.hlsl赞分享音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载相关推荐TiXL RgbTV 算子深度指南用节点图实现复古电视故障效果TiXL RgbTV 算子深度指南用节点图实现复古电视故障效果 RgbTV 是 TiXL 内置图像效果库Lib.image.fx.glitch中的一款后处音视频图形学桌面应用TiXL DisplaceMesh 算子实战指南用纹理驱动网格顶点位移Lib.mesh.modifyTiXL DisplaceMesh 算子实战指南用纹理驱动网格顶点位移Lib.mesh.modify DisplaceMesh 是 TiXL实时动态图形音视频图形学桌面应用TiXL SubDivPattern3d 算子完全指南用 HLSL 程序化生成细分网格 3D 图案TiXL SubDivPattern3d 算子完全指南用 HLSL 程序化生成细分网格 3D 图案 导读 SubDivPattern3d 是 TiXL 开源实音视频图形学桌面应用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考