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

这可能不是stackoverflow的完美问题，但我在stackexchange的graphicdesign网络中问过这个问题，但没有得到任何答案，所以将其发布在这里。 我正在尝试使用

glsl

fragment着色器以编程方式实现Photoshop的渐变贴图。考虑下面显示的梯度图，所有的白色成分被绿色和黑色替换为蓝色。对于其他颜色分量，Photoshop根据蓝色和绿色之间的线性渐变进行计算。我知道这个计算背后有一个数学基础。有人知道为特定的输入颜色值查找输出颜色的公式吗

---

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

根据使用的颜色系统，有多种将颜色转换为灰度的方法。许多简单的方法只是RGB分量的加权和。例如，广泛使用的将RGB转换为亮度（

Y

）的公式是：

有关此主题和所有不同选项的更多背景信息，请参见

然后可以使用蓝色和绿色的线性插值，并将灰度值作为参数。不管怎么说，这方面的计算很简单，但GLSL甚至有一个内置的

mix（）

函数用于此目的

基于使用纹理坐标从纹理

Tex

读取原始颜色，GLSL的一些可能代码片段：

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代码多一点逻辑，但它只是相同原理的扩展。

我在Photoshop中尝试了不同的渐变贴图，我的设置与OP中的设置不同。在我的例子中，将梯度贴图过滤器应用于黑白梯度图像表明，黑色仍然是黑色，白色仍然是白色。中间的每一种灰色都被绿色和蓝色之间的某种颜色所取代。如果将灰色的阴影直接映射到线性渐变，黑色和白色将消失。Photoshop渐变贴图接缝保留原始颜色的发光

下面是我得到的公式，以匹配我的设置的Photoshop渐变贴图

给定

（Rg1，Gg1，Bg1）

和

（Rg2，Gg2，Bg2）

梯度值，

（Ro，Go，Bo）

原始颜色值和

（Rr，Gr，Br）

结果颜色

获取要在HSL空间中转换的颜色：

（Ho，So，Lo）=rgb2hsl（Ro，Go，Bo）

计算Lo值的梯度线性插值（以RGB为单位）：

（Rt、Gt、Bt）=（Rg1+[Rg2-Rg1]*Lo、Gg1+[Gg2-Gg1]*Lo）、Bg1+[Bg2-Bg1]*Lo）

在HSL空间中获取此值：

（Ht、St、Lt）=rgb2hsl（Rt、Gt、Bt）

保留原始颜色的L值

（Rr、Gr、Br）=hsl2rgb（Ht、St、Lo）

---

rgb2hsl和hsl2rgb代码示例可在此处找到：

工作非常完美，但说明不多。这是为蓝绿色梯度，但如果我想要不同的颜色梯度。你是如何得到vec3（0.299，0.587，0.114）这个值的？我补充了一些解释。这些数字已经在回答中进一步解释了，在将RGB转换为灰度的公式中。谢谢，先生。我现在明白了。。现在我对RGB很好，因为我对HLS一无所知。。开始阅读有关图像处理的内容。你写过关于这类事情的博客吗？或者你能给我推荐一些这样的博客或书籍吗？我做了一些测试，用Photoshop渐变贴图和这里给出的公式处理简单的图像，但它们不匹配。例如，如果将白色到黑色的线性渐变作为起始图像，并在Photoshop中应用蓝色到绿色的渐变贴图，则黑色仍为黑色，白色仍为白色，中间的每个灰色阴影将转换为蓝色和绿色之间的渐变。这背后的数学原理是什么？请注意，启用“平滑度”后，梯度实际上不是线性的。为了使photoshop渐变与着色器效果相匹配，因此需要使用平滑度为0%的渐变，或者找出平滑算法。非常感谢。我将在java中试用它，并告诉您它是如何运行的。

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);