我如何在着色器上将抗锯齿应用于2D网格？

Question

我有以下片段着色器来绘制网格。

#version 450 core

layout(location = 0) in vec2 position;

layout(location = 0) out vec4 fragColor;

layout(binding = 0) uniform ubo
{
  mat4 uCameraView;
  vec4 uGridColor;
  float uTileSize;
  float uGridBorderSize;
};

void main()
{
  vec2 uv = mod(position, uTileSize);
  vec2 border = mod(uv + (uGridBorderSize / 2.0), uTileSize);
  border -= mod(uv - (uGridBorderSize / 2.0), uTileSize);

  if (length(border) > uTileSize - uGridBorderSize)
  {
    fragColor = uGridColor;
  }
  else
  {
    fragColor = vec4(0.0);
  }
}

这个在缩放比例不变时工作得很好，但当相机远离物体且uGridBorderSize小于屏幕上的一个像素时，就会出现问题，此时在缩放变化时会出现线条的出现和消失，看起来很难看。

我想知道，是否可能对这些线条应用抗锯齿技术，以使它们的外观更加一致？

- ellipticaldoor

---

谢谢@Rabbid76，但我仍然得到相同的效果。 - ellipticaldoor

Answer 1

最终我找到了这个片段着色器，可以绘制抗锯齿的网格线。

void main()
{
  // https://madebyevan.com/shaders/grid/
  vec2 uv = fragCoord / uTileSize;
  vec2 grid = abs(fract(uv - 0.5) - 0.5) / fwidth(uv);
  float line = (min(grid.x, grid.y) * uGridBorderSize) / uScaleFactor;
  float color = 1.0 - min(line, 1.0);
  fragColor = uGridColor * color;
}

- ellipticaldoor