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.您合成其他兩個值的方式並不能使它們正確。