如何使用 GLSL 更改纹理的色调？答案

【问题标题】：How to change hue of a texture with GLSL?如何使用 GLSL 更改纹理的色调？
【发布时间】：2023-04-09 12:36:01
【问题描述】：

有没有办法使用 GLSL（片段着色器）有效地改变 2D OpenGL 纹理的色调？

有人有代码吗？

更新：这是来自 user1118321 建议的代码：

uniform sampler2DRect texture;
const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046);
uniform float hue;

void main() {

vec3 yColor = rgb2yiq * texture2DRect(texture, gl_TexCoord[0].st).rgb; 

float originalHue = atan(yColor.b, yColor.g);
float finalHue = originalHue + hue;

float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g);

vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue));
gl_FragColor    = vec4(yiq2rgb*yFinalColor, 1.0);
}

这是与参考比较的结果：

我尝试在 atan 中用 Q 切换 I，但结果即使在 0° 左右也是错误的

你有什么提示吗？

如果需要比较，这是未修改的原始图像：

【问题讨论】：

这是 RGB 三元组围绕 (1,1,1) 向量的旋转 - 您可以将其表示为着色器中的矩阵乘法
如果您的色相变化是恒定的，那么您可以跳过 atan、sqrt、sin 和 cos。您正在做的是将它们转换为极坐标，添加角度，然后转换回来。您可以使用 2x2 旋转矩阵进行此数学运算。如果您不需要在 yiq 空间中进行任何其他数学运算，您可以预先计算整个变换。将您的 rgb2yiq 与 2d 旋转（填充为 3x3）相乘，然后与 yiq2rgb 相乘以获得一个完成整个过程的大 3x3 矩阵。就像@Flexo 所说，这只是围绕 (1,1,1) 向量的旋转。

标签： opengl filter glsl hsv hue

【解决方案1】：

虽然@awoodland 说的是正确的，但我相信这种方法可能会导致亮度变化问题。

HSV 和 HLS 颜色系统存在问题的原因有很多。我最近与一位色彩科学家讨论过这个问题，他的建议是转换为 YIQ 或 YCbCr 空间并相应地调整色度通道（I&Q 或 Cb&Cr）。（你可以学习如何做到这一点here 和 here。）

一旦进入这些空间之一，您可以通过执行hue = atan(cr/cb)（注意 cb == 0）从色度通道形成的角度获取色调。这为您提供了一个弧度值。只需通过添加色调旋转量来旋转它。完成后，您可以使用chroma = sqrt(cr*cr+cb*cb) 计算色度的大小。要返回 RGB，请使用 Cr = chroma * sin (hue)、Cb = chroma * cos (hue) 计算新的 Cb 和 Cr（或 I & Q）。然后按照上述网页中的说明转换回 RGB。

编辑：这是我测试过的解决方案，似乎给我的结果与您的参考相同。您可能可以将一些点积折叠成矩阵乘法：

uniform sampler2DRect inputTexture;
uniform float   hueAdjust;
void main ()
{
    const vec4  kRGBToYPrime = vec4 (0.299, 0.587, 0.114, 0.0);
    const vec4  kRGBToI     = vec4 (0.596, -0.275, -0.321, 0.0);
    const vec4  kRGBToQ     = vec4 (0.212, -0.523, 0.311, 0.0);

    const vec4  kYIQToR   = vec4 (1.0, 0.956, 0.621, 0.0);
    const vec4  kYIQToG   = vec4 (1.0, -0.272, -0.647, 0.0);
    const vec4  kYIQToB   = vec4 (1.0, -1.107, 1.704, 0.0);

    // Sample the input pixel
    vec4    color   = texture2DRect (inputTexture, gl_TexCoord [ 0 ].xy);

    // Convert to YIQ
    float   YPrime  = dot (color, kRGBToYPrime);
    float   I      = dot (color, kRGBToI);
    float   Q      = dot (color, kRGBToQ);

    // Calculate the hue and chroma
    float   hue     = atan (Q, I);
    float   chroma  = sqrt (I * I + Q * Q);

    // Make the user's adjustments
    hue += hueAdjust;

    // Convert back to YIQ
    Q = chroma * sin (hue);
    I = chroma * cos (hue);

    // Convert back to RGB
    vec4    yIQ   = vec4 (YPrime, I, Q, 0.0);
    color.r = dot (yIQ, kYIQToR);
    color.g = dot (yIQ, kYIQToG);
    color.b = dot (yIQ, kYIQToB);

    // Save the result
    gl_FragColor    = color;
}

【讨论】：

谢谢，我刚刚实现了它，但它似乎无法正常工作。它实际上提供了色调变化，但它与 Photoshop 色调调整完全不同（例如）。我决定将其转换为 YIQ，因为使用 YCbCr 我得到的结果甚至更差。因此我计算了hue = atan2(Q,I)，chroma = sqrt(I*I + Q*Q)，然后是I = chroma * sin(hue)，Q = chorma * cos(hue)。这是正确的吗？我错过了什么吗？
这对我来说似乎是正确的。你得到什么结果？（只是色调错误，还是亮度和饱和度也搞砸了？）如果您在atan2() 调用中反转 I 和 Q，结果看起来是否更像您所期望的？也许如果您发布了一些代码，我们可以为您仔细检查。
感谢您的关注，我已经用代码和结果快照更新了问题。
在我看来，您可能需要先反转您传入的色调角度。这至少会让你更接近。出于某种原因，您的饱和度似乎正在增加。此外，您可能无法获得与 Photoshop 完全相同的结果，因为它们可能在与您不同的色彩空间中工作。
@user1118321 我尝试将纯 R (1,0,0)、G (0,1,0)、B (0,0,1) 转换为 YCrCb，然后计算饱和度。然而，在任何一种情况下，饱和度都不是 1，事实上，每种原色的饱和度完全不同。我错过了什么？

【解决方案2】：

Andrea3000，在比较网上的 YIQ 示例时，我看到了您的帖子，但我认为您的代码的“更新”版本存在问题......我确定您的“mat3”定义是翻转的/flopped on the column/row ordering...（也许这就是您仍然遇到问题的原因）...

仅供参考：OpenGL 矩阵排序：“对于更多值，矩阵按列优先顺序填充。也就是说，第一个 X 值是第一列，第二个 X 值是下一列，依此类推。”见：http://www.opengl.org/wiki/GLSL_Types

mat2(
float, float,   //first column
float, float);  //second column

【讨论】：

【解决方案3】：

用于更改纹理色调的 MSL（金属着色器语言）版本。我会推荐MetalPetal 吊舱。这个吊舱将使生活变得更轻松。

#include <metal_stdlib>
using namespace metal;

typedef struct {
    float4 position [[ position ]];
    float2 textureCoordinate;
} VertexOut;


fragment float4 hue_adjust_filter(
                            VertexOut vertexIn [[stage_in]],
                            texture2d<float, access::sample> inTexture [[texture(0)]],
                            sampler inSampler [[sampler(0)]],
                            constant float &hueAdjust [[ buffer(0) ]])
{
    const float4  kRGBToYPrime = float4 (0.299, 0.587, 0.114, 0.0);
    const float4  kRGBToI     =  float4 (0.596, -0.275, -0.321, 0.0);
    const float4  kRGBToQ     =  float4 (0.212, -0.523, 0.311, 0.0);
    
    const float4  kYIQToR   =    float4 (1.0, 0.956, 0.621, 0.0);
    const float4  kYIQToG   =    float4 (1.0, -0.272, -0.647, 0.0);
    const float4  kYIQToB   =    float4 (1.0, -1.107, 1.704, 0.0);
    
    // Sample the input pixel
    float2 uv = vertexIn.textureCoordinate;
    float4 color = inTexture.sample(inSampler, uv);
    
    // Convert to YIQ
    float   YPrime  = dot (color, kRGBToYPrime);
    float   I      = dot (color, kRGBToI);
    float   Q      = dot (color, kRGBToQ);
    
    // Calculate the hue and chroma
    float   hue     = atan2 (Q, I);
    float   chroma  = sqrt (I * I + Q * Q);
    
    // Make the user's adjustments
    hue += hueAdjust;
    
    // Convert back to YIQ
    Q = chroma * sin (hue);
    I = chroma * cos (hue);
    
    // Convert back to RGB
    float4    yIQ   = float4 (YPrime, I, Q, 0.0);
    color.r = dot (yIQ, kYIQToR);
    color.g = dot (yIQ, kYIQToG);
    color.b = dot (yIQ, kYIQToB);
    
    return color;
}

【讨论】：