Question

I want to render color gradient that start from one side to another. In the figure as you can see, the color gradients start from minimum bounding box to maximum bounding box. The code is below.

Point c = (VERTICES[i] - min) / (max - min);
p_COLOR[i].setRGB(c.red, c.green, c.blue);

Here the issue is, the color gradient is not following any direction (for example down to up: down side has two colors red and bluish purple). But I need to apply gradient that start from -x to x OR -y to y OR -z to z, means if red color start from -y then only red color covers -y side area then by moving gradient from -y to y, increment the color with red after blue then green then yellow etc. There should not be red and bluish purple at down side, there must be only red then moving upward to blue then green and so on.

how can I do that ? what would be the equation ?

Answer 1

Your solution is very simple, yet very limited. You should only use one component of your VERTICES struct (I assume VERTICES[i] holds position of the current vertex) if you want the gradient to apply across only one axis. Split your code into two parts:

The gradient function

vec3 Gradient (float param) 
{
    param = clamp(param, 0, 1);

    // we are treating these colors as HSL now:
    vec3 ColorA (0, 0.5, 0.5);
    vec3 ColorB (1, 0.5, 0.5);

    // so now we need to convert them to plain old RGB
    // note how the blending equation remains the same
    return HSL2RGB(param * ColorA + (1-param) * ColorB); // simple blending equation
}

The coloring function

float c = ((VERTICES[i] - min) / (max - min)).x; // or y,z
p_COLOR[i].setRGB(Gradient(c));

The shaders are in normal GLSL, so please excuse my ignorance in ES.