10

我目前正在使用 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);

转移到我的带有 Intel Graphics HD 3000 的笔记本电脑上，在代码没有变化的情况下，这个结果甚至更糟。

http://i.imgur.com/wSJI2.png

我认为是 OpenGL 将四边形分成两个三角形，所以我尝试使用三角形进行渲染并自己在正方形中间插入颜色，但它仍然与我希望的结果不太匹配。

在此处输入图像描述

4

3 回答 3

14

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

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

问题是，插值发生在 RGB 空间中，但是对于您想要的结果，必须将其放置在 HSV 或 HSL 空间中，其中 H（色调）将保持不变。

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

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

于 2012-11-03T16:59:25.597 回答
11

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

#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;
}
于 2012-11-03T16:58:21.730 回答
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 位根本不是我想要的。

基本上要让它工作，您需要将所有顶点颜色设置为您想要的颜色，并确保设置您的 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)
于 2015-04-18T13:02:45.583 回答