在OpenGL中如何将原语渲染为线框?


当前回答

假设在OpenGL 3或更高版本中有一个向前兼容的上下文,你可以像前面提到的那样使用glPolygonMode,但注意,粗细超过1px的行现在已弃用。所以当你可以画三角形作为线框时,它们需要非常细。在OpenGL ES中,你可以在同样的限制下使用GL_LINES。

在OpenGL中,可以使用几何着色器来获取传入的三角形,将它们分解并将它们发送为模拟粗线的四边形(实际上是对三角形)进行栅格化。非常简单,真的,除了几何着色器是臭名昭著的性能缩放。

你可以做的是,在OpenGL ES中也可以使用片段着色器。考虑在三角形上应用线框三角形的纹理。除了不需要纹理之外,它可以通过程序生成。说够了,我们开始编码吧。片段着色器:

in vec3 v_barycentric; // barycentric coordinate inside the triangle
uniform float f_thickness; // thickness of the rendered lines

void main()
{
    float f_closest_edge = min(v_barycentric.x,
        min(v_barycentric.y, v_barycentric.z)); // see to which edge this pixel is the closest
    float f_width = fwidth(f_closest_edge); // calculate derivative (divide f_thickness by this to have the line width constant in screen-space)
    float f_alpha = smoothstep(f_thickness, f_thickness + f_width, f_closest_edge); // calculate alpha
    gl_FragColor = vec4(vec3(.0), f_alpha);
}

顶点着色器:

in vec4 v_pos; // position of the vertices
in vec3 v_bc; // barycentric coordinate inside the triangle

out vec3 v_barycentric; // barycentric coordinate inside the triangle

uniform mat4 t_mvp; // modeview-projection matrix

void main()
{
    gl_Position = t_mvp * v_pos;
    v_barycentric = v_bc; // just pass it on
}

在这里,三个三角形顶点的重心坐标简单地是(1,0,0)、(0,1,0)和(0,0,1)(顺序并不重要,这使得打包成三角形条可能更容易)。

这种方法的明显缺点是它会占用一些纹理坐标,你需要修改你的顶点数组。可以用一个非常简单的几何着色器来解决,但我仍然怀疑它会比仅仅给GPU提供更多数据要慢。

其他回答

在非抗锯齿渲染目标上绘制抗锯齿线的一个好而简单的方法是绘制宽度为4像素的矩形,纹理为1x4, alpha通道值为{0,1,1,0。},并使用mip-mapping关闭的线性过滤。这将使线条2像素厚,但你可以改变不同厚度的纹理。 这比重力计算更快更简单。

假设在OpenGL 3或更高版本中有一个向前兼容的上下文,你可以像前面提到的那样使用glPolygonMode,但注意,粗细超过1px的行现在已弃用。所以当你可以画三角形作为线框时,它们需要非常细。在OpenGL ES中,你可以在同样的限制下使用GL_LINES。

在OpenGL中,可以使用几何着色器来获取传入的三角形,将它们分解并将它们发送为模拟粗线的四边形(实际上是对三角形)进行栅格化。非常简单,真的,除了几何着色器是臭名昭著的性能缩放。

你可以做的是,在OpenGL ES中也可以使用片段着色器。考虑在三角形上应用线框三角形的纹理。除了不需要纹理之外,它可以通过程序生成。说够了,我们开始编码吧。片段着色器:

in vec3 v_barycentric; // barycentric coordinate inside the triangle
uniform float f_thickness; // thickness of the rendered lines

void main()
{
    float f_closest_edge = min(v_barycentric.x,
        min(v_barycentric.y, v_barycentric.z)); // see to which edge this pixel is the closest
    float f_width = fwidth(f_closest_edge); // calculate derivative (divide f_thickness by this to have the line width constant in screen-space)
    float f_alpha = smoothstep(f_thickness, f_thickness + f_width, f_closest_edge); // calculate alpha
    gl_FragColor = vec4(vec3(.0), f_alpha);
}

顶点着色器:

in vec4 v_pos; // position of the vertices
in vec3 v_bc; // barycentric coordinate inside the triangle

out vec3 v_barycentric; // barycentric coordinate inside the triangle

uniform mat4 t_mvp; // modeview-projection matrix

void main()
{
    gl_Position = t_mvp * v_pos;
    v_barycentric = v_bc; // just pass it on
}

在这里,三个三角形顶点的重心坐标简单地是(1,0,0)、(0,1,0)和(0,0,1)(顺序并不重要,这使得打包成三角形条可能更容易)。

这种方法的明显缺点是它会占用一些纹理坐标,你需要修改你的顶点数组。可以用一个非常简单的几何着色器来解决,但我仍然怀疑它会比仅仅给GPU提供更多数据要慢。

最简单的方法是将原语绘制为GL_LINE_STRIP。

glBegin(GL_LINE_STRIP);
/* Draw vertices here */
glEnd();
glPolygonMode( GL_FRONT_AND_BACK, GL_LINE );

要打开电源,

glPolygonMode( GL_FRONT_AND_BACK, GL_FILL );

回归正常。

注意,如果启用了纹理映射和照明,它们仍然会应用到线框线上,这看起来可能很奇怪。

在现代OpenGL(OpenGL 3.2及更高版本)中,你可以使用几何着色器:

#version 330

layout (triangles) in;
layout (line_strip /*for lines, use "points" for points*/, max_vertices=3) out;

in vec2 texcoords_pass[]; //Texcoords from Vertex Shader
in vec3 normals_pass[]; //Normals from Vertex Shader

out vec3 normals; //Normals for Fragment Shader
out vec2 texcoords; //Texcoords for Fragment Shader

void main(void)
{
    int i;
    for (i = 0; i < gl_in.length(); i++)
    {
        texcoords=texcoords_pass[i]; //Pass through
        normals=normals_pass[i]; //Pass through
        gl_Position = gl_in[i].gl_Position; //Pass through
        EmitVertex();
    }
    EndPrimitive();
}

通知:

对于点,改变布局(line_strip, max_vertices=3);到布局(points, max_vertices=3); 阅读更多关于几何着色器