WebGL片段着色器颜色叠加逻辑疑问及图像着色需求

我来帮你理清这个问题的原因，以及给出符合需求的实现方案：

为什么你的加法逻辑不符合预期？ #

你遇到的问题核心在于简单的颜色加法并不是实现“黑转目标色、亮区浅色调”的正确方式，而且可能存在以下具体原因导致黑色区域未变红：

• 纹理颜色的实际值偏差：如果你的纹理黑色区域并非纯黑（比如因压缩、格式转换或前置处理导致RGB值接近0但不为0），叠加红色后可能因后续的颜色截断/归一化操作被抵消；或者如果你的代码在加法后又执行了灰度转换，红色会被转成低亮度的灰色，看起来像黑色。
• 加法混合的逻辑缺陷：加法混合是直接叠加颜色值，对于白色区域（RGB=(1,1,1)），加红色后会变成(2,1,1)，WebGL会自动截断超过1的部分为1，最终还是白色（或偏红的白色），这和你想要的“浅色调”效果不符；而灰色区域会变成偏红的高亮度颜色，也不是你期望的浅色调目标色。

实现目标效果的正确方法 #

要实现“黑色区域变为目标颜色，其余亮度区域过渡为该颜色浅色调”的效果，我们需要基于纹理的亮度值进行线性混合，核心逻辑是用亮度作为混合因子，在目标色和浅色调基准之间平滑过渡：

步骤拆解 #

1. 转灰度获取亮度：先将纹理转为灰度，得到gray值（范围0-1，0代表纯黑，1代表纯白）；
2. 定义颜色基准：确定目标颜色（比如你想要的红色）和浅色调终点（可以是白色，也可以是目标色的淡色）；
3. 线性混合颜色：使用mix函数，以亮度值为混合因子，实现黑→目标色、白→浅色调的平滑过渡。

代码示例 #

假设你想要的目标颜色是红色vec3(1.0, 0.0, 0.0)，可以在灰度转换后添加以下代码：

// 1. 先将纹理转为灰度（你的代码中已有这一步）
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));

// 2. 定义目标颜色和浅色调基准
vec3 targetColor = vec3(1.0, 0.0, 0.0); // 纯红，替换为你想要的颜色
vec3 lightTone = vec3(1.0); // 白色作为浅色调终点，也可以改为targetColor * 0.3（淡红）

// 3. 基于亮度混合：黑→targetColor，白→lightTone，中间平滑过渡
vec3 finalColor = mix(targetColor, lightTone, gray);

// 4. 输出最终颜色（保留原alpha通道）
gl_FragColor = vec4(finalColor, color.a);

自定义浅色调的变体 #

如果你不想过渡到白色，而是过渡到目标色的淡色（比如半透明红），可以修改lightTone：

vec3 lightTone = targetColor * 0.3; // 淡红色，数值越小颜色越浅

这样纯白区域会变成淡红色，黑色区域是纯红，中间灰度区域过渡为深浅不同的红色，完全符合你“其余区域为该颜色浅色调”的需求。

针对你现有代码的整合建议 #

在你提供的完整代码中，找到灰度转换的部分：

// greyscale
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
color = vec4(vec3(gray), 1.0);

替换为以下代码（用你原代码中的filter颜色作为目标色）：

// greyscale
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
// 新增着色逻辑
vec3 targetColor = vec3(0., 0.1215686275, 0.2039215686); // 你原代码中的filter颜色
vec3 lightTone = vec3(1.0); // 可自定义为淡色调
vec3 finalColor = mix(targetColor, lightTone, gray);
color = vec4(finalColor, 1.0);

这样就能实现黑色区域变为目标色，亮区过渡为浅色调的效果。

内容的提问来源于stack exchange，提问作者The Sloth