如何将抗脉化应用于着色器中的等距网格线？

Question

我有一个等距网格着色器，当缩放

这些间隙不应存在，线条应该看起来平滑。我如何对此进行抗抗衡？

代码

const float tileSize = 0.04;
const float borderSize = 0.98;

vec2 aGrid(vec2 uv) {
  return vec2(mod(uv.x, 1.0), mod(uv.y * 2.0, 1.0));
}

vec2 bGrid(vec2 uv) {
  return vec2(mod(uv.x - 0.5, 1.0), mod((uv.y * 2.0) - 0.5, 1.0));
}

float los(vec2 pos, float border) {
  vec2 abspos = abs(pos - vec2(0.5));
  return sign(abspos.x * border + abspos.y * border - border * border);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  float border = 0.5 * borderSize;
  vec2 size = (uv / tileSize) / 2.0;
  float alos = los(aGrid(size), border);
  float blos = los(bGrid(size), border);
  float color = min(alos, blos);
  fragColor = vec4(color);
}

这是我必须在此处使此等距网格在ShaderToy https：///www.shadertoy中运行的 。 com/view/slbbz3

我找到了另一个用于抗矩形网格的着色器。

Answer 1

我建议简化您的代码。使用 lineare equation 根据片段的x坐标计算一条

float y = uv.x * 0.5;

线距离片段的y坐标的距离，并获得瓷砖大小的其余部分：

return mod(uv.y - y, tileSize);

计算到线中心的绝对距离：

float d_abs = abs(d - tileSize*0.5);

使用 smoothStep 用于抗sialiasing：

return smoothstep(0.0, borderSize, borderSize*2.0-d_abs);

---

最小示例：

const float tileSize = 0.1;
const float borderSize = 0.001;

float aGrid(vec2 uv) {
    float y = uv.x * -0.5;
    return mod(uv.y - y, tileSize);
}

float bGrid(vec2 uv) {
    float y = uv.x * 0.5;
    return mod(uv.y - y, tileSize);
}

float los(float d) {
    float d_abs = abs(d - tileSize*0.5);
    return smoothstep(0.0, borderSize, borderSize*2.0-d_abs);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    float alos = los(aGrid(uv));
    float blos = los(bGrid(uv));
    float color = max(alos, blos);
    fragColor = vec4(color);
}