Alex Rivera | Logout

OpenGL Colour Interpolation

Asked 2012-11-03T16:14:55.160
11

I'm currently working on an little project in C++ and OpenGL and am trying to implement a colour selection tool similar to that in photoshop, as below.

enter image description here

However I am having trouble with interpolation of the large square. Working on my desktop computer with a 8800 GTS the result was similar but the blending wasn't as smooth.

This is the code I am using:

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

Moving onto my laptop with Intel Graphics HD 3000, this result was even worse with no change in code.

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

I thought it was OpenGL splitting the quad into two triangles, so I tried rendering using triangles and interpolating the colour in the middle of the square myself but it still doesnt quite match the result I was hoping for.

enter image description here

Edit
Report

1 Answer

12

I've quickly made a vertex/fragment shader that successfully interpolates the colors:

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

Here's the result: enter image description here

Applying it on a quad now yields the correct result because the interpolation is truly done over the entire surface using x and y coordinates. See @datenwolf's detailed explanation as to why this works.

EDIT 1 In order to obtain the full range of colors in a functional color picker, it is possible to modify the hue interactively (see https://stackoverflow.com/a/9234854/570738).

answered 2012-11-03T16:58:21.730

Your Answer