具有固定数量级别的渐变

Question

我绘制了一组四边形。对于每个四边形，我在其顶点有一个定义的颜色。

E.g。现在我的四边形看起来像是：

我以相当原始的方式实现这样的结果，只是作为四边形的每个顶点的属性颜色进入顶点着色器。

我的着色器很简单：

顶点着色器

#version 150 core

in vec3 in_Position;
in vec3 in_Color;
out vec3 pass_Color;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

void main(void) {
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(in_Position, 1.0);

    pass_Color = in_Color;
}

片段着色器

#version 150 core
in vec3 pass_Color;
out vec4 out_Color;

void main(void) {
    out_Color = vec4(pass_Color, 1.0);
}

现在我的目标是从顶点到顶点获得颜色不连续的颜色分布。它也可以称为＆＃34;级别分布＆＃34;。

我的四边形应如下所示：

我怎样才能达到这样的效果？

修改

vesan和Nico Schertler版看起来像这样。 （不可接受的变体）

Answer 1

只需扩展Nico Schertler的评论：您可以将片段着色器修改为：

void main(void) {
    out_Color = vec4(pass_Color, 1.0);
    out_Color = floor(color * steps)/steps;
}

其中steps所需的色阶数。 floor函数确实可以在向量上运行，但是，将针对每种颜色单独计算步骤，因此结果可能不是您想要的（步骤可能不如示例中那样好）。

或者，您可以使用某种形式的＆＃34;香椿阴影＆＃34; （参见例如here）。这意味着您只将一个数字（想想灰度颜色）传递给着色器，然后使用着色器从颜色表中选择颜色。该表可以在着色器中进行硬编码，也可以从一维纹理中选择。

Answer 2

我的猜测是你将使用的色调颜色和顶点插值（例如跳过某些波段）会出现问题。相反，可以传入单个通道值并计算片段着色器中的色调和离散级别（如@vesan所做）。我自己使用这些功能......

vec3 hueToRGB(float h)
{
    h = fract(h) * 6.0;
    vec3 rgb;
    rgb.r = clamp(abs(3.0 - h)-1.0, 0.0, 1.0);
    rgb.g = clamp(2.0 - abs(2.0 - h), 0.0, 1.0);
    rgb.b = clamp(2.0 - abs(4.0 - h), 0.0, 1.0);
    return rgb;
}

vec3 heat(float x)
{
    return hueToRGB(2.0/3.0-(2.0/3.0)*clamp(x,0.0,1.0));
}

然后

float discrete = floor(pass_Value * steps + 0.5) / steps; //0.5 to round
out_Color = vec4(heat(discrete), 1.0);

其中in float in_Value为0到1。