GLSL Checkerboard Pattern

Question

i want to shade the quad with checkers:

f(P)=[floor(Px)+floor(Py)]mod2.

My quad is:

glBegin(GL_QUADS);    
  glVerte         


        

Answer 1

Another nice way to do it is by just tiling a known pattern (zooming out). Assuming that you have a square canvas:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv -= 0.5; // moving the coordinate system to middle of screen
    // Output to screen
    fragColor = vec4(vec3(step(uv.x * uv.y, 0.)), 1.);
}

Code above gives you this kind of pattern.

Code below by just zooming 4.5 times and taking the fractional part repeats the pattern 4.5 times resulting in 9 squares per row.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fract(fragCoord/iResolution.xy * 4.5);
    uv -= 0.5; // moving the coordinate system to middle of screen
    // Output to screen
    fragColor = vec4(vec3(step(uv.x * uv.y, 0.)), 1.);
}