WebGL - 在三角形模式下获取形状内的片段坐标？ GL_FragCoord 不起作用

Question

我正在尝试创建一个 WebGL 着色器，它可以在同一个绘制调用中输出实心矩形和空心矩形（具有固定的边框宽度），到目前为止，我想到的最好的方法是如下：

在顶点着色器中，发送一个统一值uniform float borderWidth

然后在片段着色器中，我需要一个坐标空间，它是x = [ 0, 1]和y = [0, 1]，其中x=0是最左边的，y=0是形状边界的最顶端，或者类似的东西.在我有了之后，画线就很简单了，我可以从那里弄清楚，我可以使用类似的东西：

1a - 从片段的x=0坐标到垂直线的x=borderWidth和垂直线的x=1-borderWidth到x=1的平滑步骤

1b - 水平线和 y 坐标类似

---

问题

我面临的问题是我无法创建该坐标空间。我尝试使用gl_FragCoord，但我认为它在TRIANGLES模式下的形状渲染是未定义的。所以我有点迷路了。有人有什么建议吗？

Answer 1

gl_FragCoord 永远不会是未定义的，它是片段在输出缓冲区（比如你的屏幕）中的位置，如果你渲染到全高清屏幕的中心 gl_FragCoord 将是 vec3(940,540,depth)，但是这个数据是对你想做的事没有用。

您所描述的听起来像您需要barycentric coordinates，您必须将其定义为顶点位置旁边的附加属性，然后作为变量传递给片段着色器，以便它们在顶点之间进行线性插值。如果您渲染非索引几何体并使用 webgl 2，您可以使用 gl_VertexID % 3 来导出重心。