OpenGL颜色插值

Question

我目前正在开发一个C ++和OpenGL的小项目，我正在尝试实现类似于photoshop中的颜色选择工具，如下所示。

但是我在插入大方块时遇到了麻烦。 使用8800 GTS在我的台式计算机上工作时结果相似，但混合并不顺畅。

这是我正在使用的代码：

GLfloat swatch[] = { 0,0,0, 1,1,1, mR,mG,mB, 0,0,0 };
GLint swatchVert[] = { 400,700, 400,500, 600,500, 600,700 };

glVertexPointer(2, GL_INT, 0, swatchVert);
glColorPointer(3, GL_FLOAT, 0, swatch);
glDrawArrays(GL_QUADS, 0, 4);

使用英特尔图形HD 3000移动到我的笔记本电脑上，这个结果甚至更糟，代码没有变化。

我认为OpenGL将四边形分成两个三角形，所以我尝试使用三角形渲染并在广场中间插入颜色，但它仍然与我希望的结果完全匹配。

Answer 1

我已经快速制作了一个成功插入颜色的顶点/片段着色器：

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 resolution;

void main(void)
{
    vec2 p = gl_FragCoord.xy / resolution.xy;
    float gray = 1.0 - p.x;
    float red = p.y;
    gl_FragColor = vec4(red, gray*red, gray*red, 1.0);
}

结果如下：

现在将它应用于四边形会产生正确的结果，因为使用x和y坐标可以在整个曲面上进行插值。请参阅@ datenwolf关于其原理的详细解释。

编辑1 为了在功能颜色选择器中获得全部颜色，可以交互式修改色调（参见https://stackoverflow.com/a/9234854/570738）。

在线演示：http://goo.gl/Ivirl

#ifdef GL_ES
precision highp float;
#endif

uniform float time;
uniform vec2 resolution;

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

const float PI = 3.14159265358979323846264;

void adjustHue(inout vec4 color, float hueAdjust) {
    // 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);
}

void main(void)
{
    vec2 p = gl_FragCoord.xy / resolution.xy;
    float gray = 1.0 - p.x;
    float red = p.y;
    vec4 color = vec4(red, gray*red, gray*red, 1.0);
    adjustHue(color, mod(time, 2.0*PI));
    gl_FragColor = color;
}

编辑2 ：如果需要，与纹理坐标一起使用的着色器（应用于纹理坐标从0到1的四边形）应该看起来像这样。的未测试

片段着色器：

void main(void)
{
    vec2 p = gl_TexCoord[0].st;
    float gray = 1.0 - p.x;
    float red = p.y;
    gl_FragColor = vec4(red, gray*red, gray*red, 1.0);
}

直通顶点着色器：

void main()
{
    gl_TexCoord[0]=gl_MultiTexCoord0; 
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

Answer 2

OpenGL对从顶点着色器发出的值到片段着色器的每个片段输入值使用重心插值。您所看到的就是将四边形分成三角形的效果，就像您已经猜到的那样。

现在看一下：有一个右上角的三角形，里面有红色，因此内插红色很好。然后是左下角的三角形，里面只有灰色。当然，右上三角形的红色不会影响左下角的灰色。

问题是，插值发生在RGB空间中，但是为了你想要的结果必须放在HSV或HSL空间中，其中H（Hue）将保持不变。

然而，这不仅仅是插值的问题。阻碍你的是，颜色不会线性插值;大多数显示器都应用了非线性函数，也称为“伽玛”（实际上伽玛是应用于输入值的功率的指数）。

您的OpenGL上下文可能位于颜色校正的颜色空间中。你需要测试一下。然后知道帧缓冲器驻留在哪个颜色空间中，必须使用片段着色器将重心坐标的每个片段变换（使用顶点着色器评估）应用到每个片段值。

Answer 3

我不喜欢最高投票的答案，因为它是如此字面化，并且在简单答案中只关注红色，所以我想提供一个基于顶点颜色的简单替代方案：

#version 330 core

smooth in vec4 color;
smooth in vec2 uv;

out vec4 colorResult;

void main(){
    float uvX = 1.0 - uv.st.x;
    float uvY = uv.st.y;

    vec4 white = vec4(1, 1, 1, 1);
    vec4 black = vec4(0, 0, 0, 1);

    colorResult = mix(mix(color, white, uvX), black, uvY);
}

这很容易解释和推理。 mix是线性插值，或者是glsl中的lerp。因此，我沿着逆x轴在顶点颜色和白色之间混合，这使得左上角为白色，右上角为纯色。结果我沿着y轴混合成黑色，底部是黑色。

希望这会有所帮助，我发现这个答案并发现它除了硬烤红色，绿色或蓝色调色板之外没有其他任何帮助，而adjustHue位根本就不是我想要的。< / p>

基本上要使其工作，您需要将所有顶点颜色设置为所需颜色，并确保设置UV坐标：

TL: UV(0, 0), COLOR(YOUR DESIRED COLOR)
BL: UV(0, 1), COLOR(YOUR DESIRED COLOR)
BR: UV(1, 1), COLOR(YOUR DESIRED COLOR)
TR: UV(1, 0), COLOR(YOUR DESIRED COLOR)