0

我的镶嵌着色器为两个顶点生成贝塞尔曲线。顶点由两个坐标 x 和 y (vec2) 组成。现在每个顶点都有颜色。我的问题：如何在生成的曲线上插入每个顶点的颜色？现在片段着色器设置一个默认颜色值（红色）。但我希望他得到插值的颜色。

例如：

vertex 1 [vec2(0.0, 0.0), vec4(1.0, 0.0, 0.0, 1.0)] // red
vertex 2 [vec2(1.0, 1.0), vec4(0.0, 1.0, 0.0, 1.0)] // blue

所以应该有一个从红色到蓝色的渐变。我怎么能用镶嵌着色器做到这一点？

顶点着色器：

#version 400

layout (location = 0 ) in vec2 in_position;
layout (location = 1 ) in vec4 in_color;

void main()
{
    gl_Position = vec4(in_position, 0.0, 1.0);
}

镶嵌控制着色器：

#version 400

layout( vertices = 2 ) out;

uniform int NumSegments;
uniform int NumStrips;

void main()
{
    gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;

    gl_TessLevelOuter[0] = float(NumSegments);
    gl_TessLevelOuter[1] = float(NumStrips);
}

镶嵌评估着色器：

#version 400

layout( isolines ) in;

uniform mat4 Projection;
uniform mat4 Modelview;

void main()
{
    float u = gl_TessCoord.x;

    vec3 p0 = gl_in[0].gl_Position.xyz;
    vec3 p1 = vec3(0.5, gl_in[0].gl_Position.y, 0.0);
    vec3 p2 = vec3(0.5, gl_in[1].gl_Position.y, 0.0);
    vec3 p3 = gl_in[1].gl_Position.xyz;

    float u1 = (1.0 - u);
    float u2 = u * u;

    // Bernstein polynomials
    float b3 = u2 * u;
    float b2 = 3.0 * u2 * u1;
    float b1 = 3.0 * u * u1 * u1;
    float b0 = u1 * u1 * u1;

    // Cubic Bezier interpolation
    vec3 p = p0 * b0 + p1 * b1 + p2 * b2 + p3 * b3;

    gl_Position = Projection * Modelview * vec4(p, 1.0);
}

片段着色器：

#version 400

layout ( location = 0 ) out vec4 FragColor;

void main()
{
  FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
4

1 回答 1

1

这一切都很简单。只需遵循您已经存在的输入和输出的模式。

您的顶点着色器输出一个gl_Position值。因此，它还应该输出一个颜色值：

layout (location = 0 ) in vec2 in_position;
layout (location = 1 ) in vec4 in_color;

out vec4 color;

void main()
{
    gl_Position = vec4(in_position, 0.0, 1.0);
    color = in_color;
}

您的曲面细分控制着色器采用 s 数组gl_Position。所以你需要一系列颜色。它还需要写入一个颜色数组：

layout( vertices = 2 ) out;

uniform int NumSegments;
uniform int NumStrips;

in vec4 color[];

out Tess
{
  vec4 color;
} Out[];

void main()
{
    gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;
    Out[gl_InvocationID].color = color[gl_InvocationID];

    gl_TessLevelOuter[0] = float(NumSegments);
    gl_TessLevelOuter[1] = float(NumStrips);
}

在您的评估着色器中，您再次需要获取一组输入和输出布局限定符。我们使用了一个名为 的输出接口块Tess，因此我们需要将它与同名的输入接口块匹配：

layout( isolines ) in;

uniform mat4 Projection;
uniform mat4 Modelview;

in Tess
{
  vec4 color;
} In[];

out vec4 color;

void main()
{
    float u = gl_TessCoord.x;

    /** Do whatever interpolation stuff you do **/

    // Cubic Bezier interpolation
    vec3 p = p0 * b0 + p1 * b1 + p2 * b2 + p3 * b3;

    gl_Position = Projection * Modelview * vec4(p, 1.0);
    color = Interpolate(In[0].color, In[1].color, ...); //More interpolation stuff.
}

就是这样。您的片段着色器将 a 作为输入vec4 color。

另外，请注意：这不是贝塞尔样条曲线。贝塞尔样条曲线需要 4 个位置的补丁，而不是 2 个。合成其他两个值的方式并不能使它们正确。

于 2012-03-06T02:12:51.200 回答