如何确保屏幕空间导数出现在三角形边缘上？

Question

我使用以下顶点着色器绘制一个抗锯齿圆角正方形作为地平面，以便模型位于顶部：

#version 330
out vec2 tex;
uniform mat4 mvp;

const vec2 pos[4] = vec2[](
    vec2(-1.0, 1.0),
    vec2(1.0, 1.0),
    vec2(1.0, -1.0),
    vec2(-1.0, -1.0));

void main()
{
    tex = pos[gl_VertexID];
    /* setup camera */
    gl_Position = mvp * vec4(pos[gl_VertexID], 0.0, 1.0);
}

以及以下片段着色器：

#version 330
in vec2 tex;
out vec4 Out_Color;

float roundedBoxSDF(vec2 uv, float Size, float Radius)
{
    return length(max(abs(uv) - Size + Radius, 0.0)) - Radius;
}

void main()
{
    /* 95% to make sure there is a screen space derivative present to
    calculate against. */
    float dist = roundedBoxSDF(tex, 0.95, 0.5);
    float smoothedAlpha = dist / length(vec2(dFdx(dist), dFdy(dist)));

    Out_Color = vec4(vec3(1, 1, 1), 1.0 - smoothedAlpha);
}

如果我用纹理坐标绘制所述正方形直到四边形的边缘，则沿着四边形侧面的非圆形边缘总是出现锯齿，因为带符号的距离场没有屏幕空间导数来计算距离为 1 的边缘从原点开始。

似乎是一个简单的修复：正如上面的片段着色器中一样，我只是将纹理坐标缩小到 95%

roundedBoxSDF(tex, 0.95, 0.5);

，因此有一个没有边缘的四边形来收集屏幕空间导数。很好的抗锯齿...

...直到我拉远或以斜角观看。那么 5% 的边距就不够了，我再次出现锯齿，因为屏幕空间方面不存在像素来获得所述导数。

我该如何解释这样的事情？继续缩小纹理坐标并根据距相机的距离增加顶点？还有比这更聪明的事情吗？

Answer 1

问题不在于衍生品——与你所认为的相反，它们的边缘是明确定义的。 也不是缺乏各向异性过滤——因为它也发生在非倾斜角度。

正如您自己所说，问题是在某些角度缩小 0.95 还不够。这是因为形状的分析边缘与四边形边缘的距离小于一个像素。在这种情况下，根本没有任何像素被光栅化，而非透明像素需要被光栅化：

如果你走收缩路线，你收缩的量本身取决于导数——你需要在屏幕空间中收缩一个像素。一个等效但更简单的方法是计算非收缩盒子内部的 SDF ，然后设置

out_Color.a = -smoothedAlpha

:

无论哪种情况，缩小都是解决问题的一种相当老套的方法，因为它改变了形状的有效尺寸。

更正确的方法是将光栅化三角形扩大一个像素。有一个 NVidia 扩展可以做到这一点：NV_conservative_raster_dilate。在未扩展的 OpenGL 中，您可以使用几何着色器获得类似的结果。在任何一种情况下，扩张的三角形都会重叠，如果您的形状要部分透明，则需要额外的措施。