ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

TiXL 图像着色算子 Tint 完全指南:明暗双色映射、灰度转换与阈值效果实战

TiXL 图像着色算子 Tint 完全指南:明暗双色映射、灰度转换与阈值效果实战 TiXL 图像着色算子 Tint 完全指南明暗双色映射、灰度转换与阈值效果实战【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3本文以 TiXL 开源实时动态图形软件仓库根目录t3中Lib.image.color分类下的Tint算子为讲解核心。Tint 通过将图像的暗部与亮部分别映射到两个自定义颜色并依据亮度信息进行混合实现灰度转换、阈值化、双色着色、HDR 范围收敛与 Alpha 遮罩等多种实时调色效果。读完本文你将掌握 Tint 全部 7 个输入参数的语义、底层 HLSL 着色器的精确算法、默认值配置以及它与同类算子 RemapColor 的差异与选型思路。一、Tint 是什么Tint 是 TiXL 图像处理算子库Lib.image.color中的一个纹理着色算子位于文档 Tint.md 与库符号 Tint.t3 中。它的核心思想非常简单把图像中偏暗的像素映射为一种颜色MapBlackTo把偏亮的像素映射为另一种颜色MapWhiteTo中间亮度按比例在两种颜色之间插值。由于只依赖亮度信息参与映射它可以用极简的参数组合派生出一系列效果灰度转换将MapBlackTo设为黑、MapWhiteTo设为白即可得到标准灰度图阈值Threshold把MapBlackTo与MapWhiteTo设成两个差异极大的颜色如纯黑与纯白并配合GainAndBias收紧过渡带即可获得二值化图像双色着色 / 海报化将暗部、亮部映射为任意品牌色或渐变色端点产生风格化配色细微颜色校正以小幅度Amount混合对整体色调做柔和偏移。正如文档描述所言“Tinting the bright and dark colors of an image. This can be an easy method for subtle color corrections to achieve a wide variety of conversion effects, like grayscale or threshold.”二、输入参数详解Tint 共 7 个输入参数其中Texture2d为必填项。完整参数表如下语义与描述来自 Tint.md默认值与 UI 约束来自 Tint.t3 与 Tint.t3ui参数名类型相关性默认值说明Texture2dTexture2D必填null输入纹理AmountSingle可选1.0效果强度。完全应用时图像将丢失原始颜色信息仅用亮度信息在两种颜色之间混合负值会反转效果UI 范围 -1 ~ 1MapBlackToVector4可选(≈0, ≈0, ≈0, 1)暗色将被映射为的颜色RGBA。提示可利用 Alpha 通道实现遮罩效果UI 钳制 0 ~ 1MapWhiteToVector4可选(1, 1, 1, 1)亮色将被映射为的颜色RGBAUI 钳制 0 ~ 1ExposureSingle可选1.0在亮度计算之前应用的系数。可用于把亮度大于 1 的 HDR 颜色收敛进映射区间UI 钳制 0 ~ 5ChannelWeightsVector4可选(1, 1, 1, 0)对输入图像各颜色通道施加不同权重的辅助参数。可用于更自然的灰度转换或只使用 Alpha 通道GainAndBiasVector2可选(0.5, 0.5)亮度映射曲线的增益与偏置控制UI 钳制 0 ~ 1使用专用的 GainAndBias 双值控件2.1 关于默认值的细节从 Tint.t3 的 JSON 定义可以看到几个值得注意的默认值MapBlackTo默认并非严格为(0,0,0,1)而是(1E-06, 9.9999E-07, 9.9999E-07, 1.0)——接近纯黑但不为 0这与下方 shader 中 0.001的稳定性处理相配合避免除零等数值问题MapWhiteTo默认(1,1,1,1)纯白Amount默认 1.0即默认完全应用映射GainAndBias默认(0.5, 0.5)即增益、偏置均为中性值曲线保持线性ChannelWeights默认(1,1,1,0)即 RGB 权重相等、Alpha 权重为 0默认情况下亮度只由 RGB 贡献。2.2 参数实战提示Alpha 遮罩MapBlackTo的文档提示“You can use the alpha channel to create a masking effect”。由于映射结果mapped的 Alpha 参与最终lerp(c, mapped, Amount)当MapBlackTo/MapWhiteTo的 Alpha 值非 1 时输出 Alpha 会被相应拉低从而形成透明遮罩HDR 收敛当输入纹理包含亮度超过 1 的 HDR 值时直接映射会导致高光溢出或映射区间失真。将Exposure设为小于 1 的值例如 0.5可先把高光压回[0,1]区间再参与映射自然灰度默认(1,1,1,0)的等权重亮度并非人眼感知的亮度。若希望更自然的灰度可参照 Rec.709 权重思路调整ChannelWeights例如将绿色通道权重提高、蓝色降低从而控制灰度转换的明暗分布当只希望按 Alpha 通道计算映射时可将ChannelWeights设为(0,0,0,1)。三、输出说明输出名类型OutputT3.Core.DataTypes.Texture2D输出为处理后的 Texture2D可直接连接至渲染管线、其他图像算子或混合节点。从 Tint.cs 可以看到输出槽位Output是SlotTexture2D类型输入Texture2d同样是InputSlotTexture2D。四、源码实现逐行解读着色器算法Tint 的实际计算逻辑完整地封装在着色器 Tint.hlsl 中。该着色器通过 Tint.t3 中的_ImageFxShaderSetup2子符号以资源路径Lib:shaders/img/fx/Tint.hlsl加载7 个输入参数经由ParamConstants常量缓冲区传入 GPU。其像素着色器主函数如下float4 psMain(vsOutput psInput) : SV_TARGET { float2 uv psInput.texCoord; float4 c inputTexture.SampleLevel(texSampler, uv, 0.0); c.rgb * Exposure; float t length(c * normalize(ChannelWeights)) 0.001; t ApplyGainAndBias(saturate(t), GainAndBias); float4 mapped lerp(MapBlackTo, MapWhiteTo, t); float4 cout lerp(c, mapped, Amount); cout.a clamp(cout.a, 0, 1); return cout; }整个算法可拆解为 5 个步骤曝光预处理c.rgb * Exposure。曝光系数直接乘在 RGB 上再进入亮度计算因此它本质上是“采样后、映射前”的输入信号缩放用于把 HDR 数值收敛到映射区间。亮度提取t length(c * normalize(ChannelWeights)) 0.001。这是本算子的关键——它把加权后的 RGBA 向量取欧几里得长度即向量模长作为亮度标量t。ChannelWeights首先被normalize归一化因此改变权重只改变各通道的相对贡献比例而不改变总体尺度 0.001是一个数值稳定项避免t 0时后续除法的奇异性。曲线塑形t ApplyGainAndBias(saturate(t), GainAndBias)。亮度先被saturate钳制到[0,1]再通过 Gain/Bias 曲线调整明暗过渡的陡峭程度详见下节。颜色映射mapped lerp(MapBlackTo, MapWhiteTo, t)。在暗色目标与亮色目标之间按亮度线性插值。强度混合与 Alpha 收敛cout lerp(c, mapped, Amount)按Amount在原图与映射结果之间混合cout.a clamp(cout.a, 0, 1)保证输出 Alpha 合法。4.1 配套曲线工具ApplyGainAndBiasApplyGainAndBias定义在共享头文件 bias-functions.hlsl 中是 Tint 与 RemapColor 等多个算子共用的亮度曲线工具。其实现基于GetBias偏置函数与GetSchlickBiasSchlick 增益函数的组合inline float ApplyGainAndBias(float value, float2 gainBias) { float g saturate(gainBias.x); float b saturate(gainBias.y); if (value 0.9999) return 1; if (value 0.00001) return 0; if (g 0.5) { value GetBias(b, value); value GetSchlickBias(g, value); } else { value GetSchlickBias(g, value); value GetBias(b, value); } return value; }要点g增益Gain控制曲线中段的斜率g 0.5时曲线下凹对比度降低g 0.5时曲线上凸对比度提升g 0.5时为中性线性b偏置Bias整体平移亮度分布控制暗部/亮部的截断位置函数对接近 0 和 1 的极端值做了保护性提前返回确保黑、白两端在极端参数下不被意外改写注释还说明该项目最初尝试过基于 arXiv 论文的另一种 gain/bias 实现ApplyBiasAndGain但因“bias 在 gain0.5 时本应中性却表现异常”而弃用最终采用当前这套 Schlick 组合方案——这解释了为何GainAndBias默认值为(0.5, 0.5)这一中性点。4.2 算子入口的 C# 定义从 Tint.cs 可以看到该算子的完整槽位声明Tint类继承自InstanceTint通过[Input]/[Output]特性与 GUID 声明 7 个输入槽和 1 个输出槽参数类型与文档表格完全一致InputSlotTexture2D、InputSlotfloat、InputSlotVector4、InputSlotVector2。这些 GUID 与 Tint.t3 中记录的各输入Id一一对应保证了算子实例在项目文件中的持久化一致性。五、典型应用场景与参数配方以下是基于上述算法可直接落地的实战配方目标效果AmountMapBlackToMapWhiteToChannelWeightsGainAndBiasExposure标准灰度1.0黑 (0,0,0,1)白 (1,1,1,1)(1,1,1,0)(0.5, 0.5)1.0感知加权灰度1.0黑白按感知权重调整 RGB如 (0.30, 0.59, 0.11, 0)(0.5, 0.5)1.0黑白阈值二值化1.0黑白(1,1,1,0)Gain 远离 0.5如 0.05 或 0.95配合 Bias 调阈值1.0双色品牌着色1.0品牌暗色 (A, B, C, 1)品牌亮色 (D, E, F, 1)(1,1,1,0)(0.5, 0.5)1.0柔和不透明度着色0.2 ~ 0.5目标色白(1,1,1,0)(0.5, 0.5)1.0仅用 Alpha 映射1.0黑白(0,0,0,1)按需1.0HDR 收敛映射1.0目标暗色目标亮色(1,1,1,0)按需 1.0配方要点灰度/阈值类效果的关键是ChannelWeights决定“如何定义亮度”GainAndBias决定“明暗过渡如何分布”实现阈值效果时可将 Gain 调到接近 0 或 1 使曲线变成近似阶跃函数并用 Bias 平移分界点若希望效果随亮度平滑融入而非完全替换适当降低Amount即可在映射色与原图之间取中间值在 UI 中Exposure、MapBlackTo、MapWhiteTo、GainAndBias均有钳制范围分别 0~5、0~1、0~1、0~1Amount的建议交互区间为 -1~1。六、与 RemapColor 的异同与选型Tint 的文档明确指出“Also, see [RemapColor] for a similar operator”而 RemapColor.md 也反向引用了 Tint二者构成一组互补算子共同点都是基于亮度对图像进行颜色重映射都提供Exposure与GainAndBias参数且共用 bias-functions.hlsl 的曲线工具差异点Tint 使用两个固定端点MapBlackTo/MapWhiteTo做双色线性插值参数直观、适合快速的双色映射与灰度/阈值而 RemapColor 使用**渐变Gradient**作为映射表支持任意多色、样条插值、循环Cycle、重复Repeat、渐变步数GradientSteps等高级控制能够模拟图像处理软件中的“调整曲线”、色阶以及颜色循环动画选型建议只需明暗两色、追求简洁时优先选 Tint需要多色渐变、曲线式调色或循环变色时改用 RemapColor。七、在 TiXL 项目中的位置速查算子文档.help/docs/operators/lib/image/color/Tint.md算子所属分类.help/docs/operators/lib/image/color/README.md算子 C# 入口槽位声明Operators/Lib/Symbols/image/color/Tint.cs算子实例定义默认值与内部连线Operators/Lib/Symbols/image/color/Tint.t3算子 UI 配置参数范围、分组与描述Operators/Lib/Symbols/image/color/Tint.t3ui核心着色器实现Operators/Lib/Assets/shaders/img/fx/Tint.hlsl共用 Gain/Bias 曲线工具Operators/Lib/Assets/shaders/shared/bias-functions.hlsl相似算子.help/docs/operators/lib/image/color/RemapColor.md八、小结Tint 是 TiXL 图像颜色处理中最易上手的“双端映射”算子它用MapBlackTo/MapWhiteTo两个颜色端点承载视觉目标用Amount控制作用强度用ChannelWeights决定亮度定义方式用GainAndBias塑形明暗过渡用Exposure收敛 HDR 输入而这一切最终落到 Tint.hlsl 中短短十余行的像素着色器上。理解这条“采样 → 曝光 → 加权亮度 → Gain/Bias 曲线 → 双色插值 → 强度混合”的完整链路你不仅能熟练使用 Tint 完成灰度、阈值、双色着色与遮罩效果也能举一反三地读懂 RemapColor 等同族算子的设计逻辑在实时动态图形创作中自由组合出更丰富的调色方案。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表