opengl-es - 使用片段着色器在二维多边形上绘制边框

Question

我有一些简单的多边形(少于 20 个顶点)，使用 GL_TRIANGLES 和平面颜色(2d 模拟)在简单的 xy 平面上进行平坦渲染。

我想为这些多边形添加可变厚度和不同颜色的边框。我有一些使用相同的顶点和 glLineWidth/GL_LINE_LOOP 实现的东西，它可以工作，但是是另一个渲染 channel 并重复所有顶点变换。

我认为我应该能够使用 gl_FragCoord 和顶点数据和/或纹理坐标在片段着色器中执行此操作，但我不确定，而且我的天真的尝试显然是不正确的。

我想象如下。

uniform vec2 scale;  // viewport h/w
uniform float line_width;
uniform vec4 fill_color;
uniform vec4 border_color;

varying vec4 vertex; // in world coords

void main()
{
    if (distance_from_edge(gl_FragCoord, vertex, scale) < line_width)
    {
        // we're close to the edge the polygon, so we're the border.
        gl_FragColor = border_color;
    }
    else
    {
        gl_FragColor = fill_color;
    }
}

我想要弄清楚的部分是 distance_from_edge 函数 - 如何计算它？使用 gl_FragCoord 是错误的方法吗 - 我应该使用某种纹理映射吗？

作为一个实验，我尝试使用比例将顶点转换为像素空间，然后计算其与 gl_FragCoord 之间的距离(以像素为单位)，但这给出了我不太理解的奇怪结果。另外，我需要到 边缘的距离，而不是顶点，但我不知道如何获得它。

有什么想法吗？

编辑:根据尼科尔的回应，我的问题变成:

假设我有一个三角形，其中 3 个角顶点标记为边缘顶点，中间的一个顶点标记为非边缘(因此总共渲染了 3 个三角形)，那么如何在片段着色器中进行插值以绘制边框给定厚度？我假设我将边缘标志以及所需的线条粗细传递给片段着色器，它会进行一些插值计算以计算出边缘与非边缘顶点之间的距离，并根据需要将颜色阈值设置为边框/填充？

Answer 1

您所需要的只是重心坐标，因为您正在处理三角形。为三角形的每个顶点分配一个标识，然后使用硬件在顶点和片段阶段之间的内置插值来计算片段着色器中与每个顶点的相对距离。

您可以将每个顶点的重心坐标视为距相对边缘的距离。下图中，顶点P0的对边为e1，其距离用h1表示；它的重心坐标是<0.0, h1, 0.0> 。当在光栅化过程中生成片段时，GPU 可以在内部使用此坐标空间来插入三角形的顶点属性，它可以根据三角形内的位置快速对每个顶点属性进行加权。

下面有两个教程解释了如何执行此操作，通常用于渲染线框叠加层，因此您可能会更好地找到它。出于您的目的，由于这实际上是线框渲染的特化(此外，您希望丢弃不属于外部多边形边缘的线)，因此您将需要识别边缘顶点并执行其他处理。

例如，如果一个顶点不是外部边缘的一部分，那么您将需要为其分配一个类似 <1,100,0> 的重心坐标，并且连接的顶点 <0,100,1> 和内部边缘将是忽略(假设它是与指定 <0,1,0> 的顶点相对的边，如下图所示)。这个想法是，您永远不希望沿该边缘的点在 0.0 附近的任何位置进行插值(或用于将片段着色为边界一部分的任何阈值)，从而使其在相反的顶点将解决这个问题。

没有几何着色器(OpenGL ES 友好):

如果您能够修改顶点数据以保存重心坐标，这里有一个链接解释如何执行此操作。它具有更高的存储和预处理要求(特别是，可能不再可能在相邻边之间共享顶点，因为您需要每个三角形由三个顶点组成，每个顶点都有不同的输入重心坐标 - 这就是为什么几何着色器是理想的解决方案)。然而，与需要几何着色器的通用解决方案相比，它可以在更多的 OpenGL ES 类硬件上运行。

https://web.archive.org/web/20190220052115/http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/

使用几何着色器(不OpenGL ES 友好):

或者，您可以使用几何着色器在渲染时计算每个三角形的重心坐标，如本教程中所示。在 OpenGL ES 中，您可能无法访问几何着色器，因此可以忽略这一点。

http://strattonbrazil.blogspot.com/2011/09/single-pass-wireframe-rendering_10.html http://strattonbrazil.blogspot.com/2011/09/single-pass-wireframe-rendering_11.html

可以在此处找到此解决方案的理论基础(由互联网文件馆 Wayback Machine 提供):

http://web.archive.org/web/ */http://cgg-journal.com/2008-2/06/index.html