Issue with infinite grid using GLSL

Gaming and Visualization Technologies APIs OpenGL
1

I am trying to learn more about GLSL by watching OGLDev on YouTube and more specifically this video Infinite grid with GLSL but I have trouble to understand why the space aliasing occur at 13 min 54 sec.

I understand that mod is not continuous at N*gridCellSize and the pixel space derivative are not really efficient when the camera is not facing lines x or z, but I need more information about this aliasing issue. Why the aliasing seems to form triangle under the lines? What happens to contiguous pixel for this aliasing to happen?

The fragment shader code computer whether the pixel should be black or transparent (white color in the image):

in vec3 worldPos;
out vec4 fragColor
int main() {
   vec4 backColor = vec4(0.0f, 0.0f, 0.0f, 1.0f);
   vec2 ly = length(vec2(dFdx(worldPos.x),dFdy(worldPos.x));
   vec2 lz = length(vec2(dFdx(worldPos.z),dFdy(worldPos.z));
   vec2 dydz =vec2(lx, lz);

   float lod0a = max(vec2(1.0)-mod(worldPos.xz,gridCellSize)/dydz);

   fragColor = backColor ;
   fragColor.a *= lod0a ;
}

Close up illustration of the spatial issue:

JpRA8Hp2
JpRA8Hp2560×345 18.2 KB

My questions are:

  1. Does the pixels under the line that are black and should not be black are black because the center of the pixel are near the line so load is almost equal to 1?

  2. Why triangle pattern appear under the line?

  3. Can someone explain me numerically what happen in this context when z world axis is oblique in pixel space, and we use dFdx and dFdy to compute pixel size in world space unit?