OpenGL GLSL：如何使用片段着色器在Photoshop中实现渐变图的概念？

Question

这可能不是 stackoverflow 的完美问题，但我在 stackexchange 的图形设计网络中问过这个问题，但没有得到任何答案，所以将其发布在这里。我正在尝试使用glsl片段着色器以编程方式实现 Photoshop 的渐变图。考虑下面显示的渐变图，其中所有白色分量都被绿色替换，黑色被蓝色替换。对于其他颜色分量，Photoshop 根据蓝色和绿色之间的线性渐变进行计算。我知道这个计算背后有一个数学原理。有谁知道查找特定输入颜色值的输出颜色的公式吗？

Answer 1

根据图像和描述，看起来这将图像的原始灰度值映射到蓝绿色渐变。

将颜色转换为灰度的方法有多种，具体取决于所使用的颜色系统。许多简单的只是 RGB 分量的加权和。例如，广泛使用的将 RGB 转换为亮度 ( Y) 的公式是：

Y = 0.299 * R + 0.587 * G + 0.114 * B

有关该主题和所有不同选项的更多背景信息，请参阅灰度维基百科页面。

然后可以使用以灰度值作为参数的蓝色和绿色的线性插值。无论如何，这个数学计算很简单，但 GLSL 甚至有一个用于此目的的内置mix()函数。

GLSL 的一些可能的代码片段，基于Tex使用纹理坐标从纹理读取原始颜色TexCoord：

uniform sampler2D Tex;
in vec2 TexCoord;
out vec4 FragColor;
...
    vec4 origColor = texture(Tex, TexCoord);
    float grayscaleValue = dot(origColor.rgb, vec3(0.299, 0.587, 0.114));
    FragColor = mix(vec4(0.0, 0.0, 1.0, 1.0), vec4(0.0, 1.0, 0.0, 1.0), grayscaleValue);

在此代码中，vec3(0.299, 0.587, 0.114)包含上述 RGB 到灰度（亮度）公式的系数。该mix()函数的前两个参数是渐变的开始颜色和结束颜色：

• 蓝色的：vec4(0.0, 0.0, 1.0, 1.0)
• 绿色的：vec4(0.0, 1.0, 0.0, 1.0)

请注意，RGB 空间中两种颜色之间的简单线性插值并不理想，特别是当颜色差异很大时。通过在 HLS 等不同的色彩空间中进行操作，您可以使其更加精细，并可能获得更好的质量。

可能改善视觉外观的另一个选择是使用两种以上的颜色来指定渐变。例如，您可以将蓝色指定为亮度 0.0，将青色指定为亮度 0.5，将绿色指定为亮度 1.0。它比上面的 GLSL 代码需要更多的逻辑，但它只是相同原理的扩展。