TiXL 图像分析算子 WaveForm 完全指南：波形示波器与矢量示波器叠加可视化

音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载WaveForm 是 TiXLLib.image.analyze 库中用于可视化图像颜色与亮度分布的分析算子它在一张画面上同时叠加 Waveform亮度波形与 Vectorscope矢量色域示波器两种专业监视工具被广泛用于色彩校正、调色检查与实时影像监看。读完本文你将掌握 WaveForm 的全部输入参数与默认值、它背后的 HLSL 计算着色器实现原理以及如何把它接入 TiXL 节点图做实时视频分析。算子定位与适用场景WaveForm 属于 TiXL 的算子库 Lib.image.analyze该库汇总了图像分析类算子其中与 WaveForm 直接相关的同类工具有ImageLevels同样用于可视化图像亮度分布直方图式CompareImages通过可移动分界线对比处理前后的两张图像GetImageBrightness把二维输入的亮度直接输出为 float 值。WaveForm 的独特之处在于它不是把亮度信息导出成数值而是把亮度波形与矢量色域示波器以叠加层的形式直接渲染到图像上让你在实时画面中同时观察亮度分布是否合理与色相/饱和度是否偏移。正如原文档所说这类叠加层在色彩校正中有极高的实用价值国内外大量调色教程都依赖这类示波器判断画面问题。在实际项目中WaveForm 常与颜色处理算子如 ColorGrade配合使用先用 ColorGrade 调整色彩再用 WaveForm 监看调整结果是否过曝、欠曝或偏色。在示例工程 HowToUseColors.t3如何用色的教学示例中WaveForm 被直接实例化并开启了矢量示波器ShowVectorscope: true说明它在 TiXL 官方示例中就是作为颜色教学与监看工具出现的。输入参数详解含源码默认值原文档给出了算子的全部输入参数本节结合 WaveForm.t3 中实际保存的DefaultValue补充每个参数的默认值与取值范围说明方便直接照着调参参数名相关性 类型说明默认值来自 WaveForm.t3EffectTextureTexture2D待分析的输入图像纹理可直接连接任意图像/视频输出空需手动连接HeightSingle波形显示区域的高度比例决定亮度波形在画面中的纵向占位0.5OpacitySingle波形与矢量示波器叠加层的整体不透明度0~1越低越接近半透明监看0.14DimBackgroundSingle背景压暗强度数值越高原画面越暗示波器叠加层越突出0.5ColorIntensitySingle波形中红/绿/蓝三通道分量的着色强度值越大颜色越浓0.15ShowVectorscopeBoolean是否显示矢量示波器色域圆环叠加层falseEnlargeVectorScopeCenterSingle放大矢量示波器中心区域的显示强度便于观察低饱和度/暗部区域的色相分布0.5OverrideSizeInt2覆盖内部渲染缓冲的尺寸默认(-1, 0)表示自动使用输入纹理尺寸X: -1, Y: 0VectorScopePositionVector2矢量示波器叠加层在画面中的位置归一化坐标X: 1.17, Y: 0.113对应的 C# 实现位于 WaveForm.cs每个输入都通过InputSlotT声明并带有固定的 Guid类型与上表一一对应如Height为InputSlotfloat、ShowVectorscope为InputSlotbool、OverrideSize为InputSlotInt2、VectorScopePosition为InputSlotSystem.Numerics.Vector2。从源码可以看出这些参数会被内部节点图收集后统一写入计算着色器的常量缓冲区cbufferParamConstants下一节将详细说明它们如何影响渲染。输出参数名称类型ImgOutputT3.Core.DataTypes.Texture2DImgOutput是在 WaveForm.cs 中声明的SlotTexture2D输出携带叠加层后的最终纹理。从 WaveForm.t3 的连接关系看ImgOutput直接连接自内部RenderTarget8e078c2f节点的输出即背景压暗 → 波形 / 示波器叠加 → 输出的最终合成结果。内部实现原理从节点图到 HLSLWaveForm 不是一个魔法黑盒而是一个用 TiXL 节点图组装出来的复合算子。从 WaveForm.t3 的Children列表可以清晰还原它的内部工作流亮度波形Waveform的生成链路纹理读取与格式准备SrvFromTexture2d026eb5b0把输入纹理包装成 SRVSamplerState042a96e3使用 Wrap 寻址模式内部Texture2dc2a6f2da声明了一块R16G16B16A16_Float、256×256、绑定ShaderResource | RenderTarget | UnorderedAccess的中间缓冲计算着色器统计ComputeShaderb105eba2加载着色器源Lib:shaders/img/analyze/waveform-cs.hlsl由ComputeShaderStage7cb6fbd3以128×128×1的 Dispatch 规模执行UavFromTexture2d5d07eac9把中间缓冲作为 UAV 传入画线绘制ListToBuffer→DrawLines064843a8等把统计结果以线条形式绘制出来线条颜色为白色W: 0.016或深色W: 0.36形成波形网格。矢量示波器Vectorscope的生成链路色域参考图LoadImagee8208f66加载Lib:shaders/img/analyze/vectorscope.png仓库中确实存在该 512×512 参考图见 Operators/Lib/Assets/shaders/img/analyze色点采样ComputeShaderf5a958a0加载Lib:shaders/img/analyze/sample-vectorscope-points-cs.hlsl配合RadialPoints生成圆环点列与RadialGradient80e08043内建 5 档黑白渐变生成色点分布叠加合成Layer2dc3762894Scale 0.6与DrawBillboardsc576188dScale 0.88把示波器圆环与色点合成到画面Transforme3d3fcf4以VectorScopePosition默认 X: 1.17, Y: 0.113控制其位置。所有内部图层最终汇入Layer2d/DrawScreenQuad等合成节点输出到RenderTarget再由Camera8721aec0AspectRatio 默认 -1投影后经ImgOutput输出。值得注意的是节点图中还保留了_GridPoints_Oldd9e03f8a这样的旧版网格生成节点从命名可以推断波形绘制经历了从网格点列到径向点/画线的演进。核心着色器源码逐段剖析波形统计的核心逻辑集中在 waveform-cs.hlsl完整源码如下cbuffer ParamConstants : register(b0) { float Height; float Opacity; float ClearBackground; float Intensity; } sampler texSampler : register(s0); Texture2Dfloat4 InputTexture : register(t0); RWTexture2Dfloat4 WriteOutput : register(u0); groupshared float4 SharedColors[512]; static const float ToRad 3.141592/180; [numthreads(1,512,1)] void main(uint3 i : SV_DispatchThreadID) { int texWidth; int texHeight; WriteOutput.GetDimensions(texWidth, texHeight); SharedColors[i.y] i.y 256 ? float4(0,0,0, ClearBackground) : 0; GroupMemoryBarrierWithGroupSync(); const int steps 256; if(i.y 0) { float dashColor i.x % 8 4 ? 1 : 0; SharedColors[511] float4(dashColor.xxx, 1); SharedColors[256] float4(dashColor.xxx, 1); [fastopt] for(int rowIndex 0; rowIndex 256; rowIndex) { float2 uv float2(float2( i.x / (float)texWidth, (float) rowIndex / 256.0 )); float4 col InputTexture.SampleLevel(texSampler, uv,0); int3 level 512 - clamp( col.rgb * 256, 0, 511); SharedColors[level.r] float4(Intensity,0,0,Opacity) * col.a; SharedColors[level.g] float4(0,Intensity,0,Opacity) * col.a; SharedColors[level.b] float4(0,0,Intensity,Opacity) * col.a; } } GroupMemoryBarrierWithGroupSync(); WriteOutput[i.xy] clamp(SharedColors[i.y], 0, 1); }逐段解读其原理常量缓冲区Height、Opacity、ClearBackground、Intensity四个 uniform 与算子的Height、Opacity、DimBackground、ColorIntensity四个输入一一对应节点图负责把这些参数打包进 cbuffer线程组织[numthreads(1,512,1)]表示每个线程组有 512 个线程对应SharedColors[512]这个共享内存数组——它把亮度级0~255 共 256 级亮度 bin另加波形刻度区映射到共享内存槽位实现 GPU 内高效直方图累加采样与直方图累加线程组第一行i.y 0的线程逐行遍历输入图像rowIndex0~255配合i.x / texWidth归一化 UV对每个像素做col.rgb * 256得到亮度等级再以512 - clamp(...)反向映射到共享内存下标把(Intensity, 0, 0, Opacity)、(0, Intensity, 0, Opacity)、(0, 0, Intensity, Opacity)分别累加到 R/G/B 三个亮度槽——这正是波形上红、绿、蓝三条彩色曲线的来源累加强度受ColorIntensity即Intensity控制波形刻度线i.x % 8 4生成 4:4 交替的虚线样式写入SharedColors[511]顶部与SharedColors[256]中位线形成示波器上的参考刻度同步与输出两次GroupMemoryBarrierWithGroupSync()确保共享内存读写同步最终WriteOutput[i.xy] clamp(SharedColors[i.y], 0, 1)把直方图写回纹理。从SharedColors[i.y] i.y 256 ? float4(0,0,0, ClearBackground) : 0;可以看出输出纹理上半部分256 槽以上会被ClearBackground即DimBackground输入填充为半透明黑色用于压暗背景、突出波形——这与参数的命名语义完全吻合。典型使用步骤在 TiXL 中接入 WaveForm 的完整流程如下从算子库Lib.image.analyze拖入WaveForm节点到你的图像处理链末端把任意图像/视频/渲染结果如EffectTexture输入连接到EffectTexture端口按需调整参数调Height默认 0.5控制波形纵向占位调Opacity默认 0.14控制叠加层的半透明程度监看时建议保持低值以免遮挡画面调DimBackground默认 0.5压暗背景让示波器更醒目调ColorIntensity默认 0.15控制 RGB 三通道波形的着色浓度打开ShowVectorscope默认 false显示色域圆环配合EnlargeVectorScopeCenter默认 0.5放大中心区域观察暗部色相用VectorScopePosition默认 X: 1.17, Y: 0.113把示波器摆到画面合适位置将ImgOutput连接到最终合成或输出节点即可在实时画面中监看亮度波形与色域分布。参考示例HowToUseColors.t3 中同时实例化了两个 WaveForm一个开启ShowVectorscope: true与 ImageLevels展示了在调色教学场景下的典型摆放方式。实用调参建议基于源码中的默认值与着色器逻辑可以给出以下实测导向的建议监看亮度是否过曝/欠曝观察波形顶部的白色刻度线SharedColors[511]。若波形大量贴顶被削平说明高光溢出若整体集中在底部说明画面偏暗。中位刻度SharedColors[256]对应 50% 灰可用于判断中间调位置判断偏色波形中红、绿、蓝三条曲线重叠度越高画面越接近中性。某条曲线明显高于其他两条说明该色通道过量ColorIntensity提高后三条曲线的颜色区分会更明显检查饱和度与色相打开ShowVectorscope后参考圆环来自vectorscope.png与RadialPoints生成的圆环用于对照色相角度色点聚集在圆心附近表示低饱和度向外扩散表示高饱和中心区域被EnlargeVectorScopeCenter放大后低饱和度区域的细微色相偏移更容易被观察到实时性能波形统计使用共享内存直方图每线程组仅 512 线程即可完成 256 级亮度统计OverrideSize默认-1, 0自动跟随输入尺寸通常无需手动指定缓冲大小。相关资源索引算子文档WaveForm.md、Lib.image.analyze 目录C# 实现WaveForm.cs节点图定义含全部默认值与连接关系WaveForm.t3核心着色器waveform-cs.hlsl、sample-vectorscope-points-cs.hlsl色域参考图vectorscope.png使用示例HowToUseColors.t3延伸阅读与 WaveForm 同属图像分析家族、常搭配使用的算子还有 ImageLevels亮度分布直方图、CompareImages前后对比、GetImageBrightness亮度数值化输出以及 ColorGrade色彩分级——把它们组合起来即可构建一套完整的调色 → 监看 → 校验工作流。赞分享音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载相关推荐TiXL 实时调色完全指南ColorGrade 的 Lift/Gamma/Gain 工作流与 WaveForm 示波器校验TiXL 实时调色完全指南ColorGrade 的 Lift/Gamma/Gain 工作流与 WaveForm 示波器校验 本篇技术指南围绕 TiXLToo音视频图形学桌面应用终极指南如何使用 Corrscope 将音频波形可视化为专业示波器视图 终极指南如何使用 Corrscope 将音频波形可视化为专业示波器视图 想要将音频文件转换为惊艳的示波器可视化效果吗Corrscope 是一个功能强大创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考