How I can apply antialiasing to isometric grid lines in a shader?

Question

I have an isometric grid shader that looks like this when zoomed out

Those gaps should not be there and lines should look smooth. How I can apply antialising to this?

This is the code I have to make this isometric grid

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);
}

Here is running in shadertoy https://www.shadertoy.com/view/slBBz3

I found this other shader for an antialiased rectangle grid https://www.shadertoy.com/view/7lBBz3 I tried to apply the same technique but I can't find how

Answer 1

I suggest to simplify your code. Use the Linear equation to calculate a line depending on the x-coordinate of the fragment:

float y = uv.x * 0.5;

Calculate the distance to the y-coordinate of the fragment and get the rest of the division with the tile size:

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

Compute the absolute distance to the center of the line:

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

Use smoothstep for antialiasing:

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

---

Minimal example:

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);
}