GLSL内插彩色镶嵌着色器

Question

我的镶嵌着色器为两个顶点生成贝塞尔曲线。顶点由两个坐标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); 
} 

Answer 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; 
} 

你的镶嵌控制着色器需要的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. 
} 

而且就是这样。你的片段着色器将输入为vec4 color。

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