Brick and mortar example from Texture and Modeling: A Procedural Approach third edition, pg 39 - 41

brick-mortar-ex.glsl

uniform float U_BRICK_WIDTH;
uniform float U_BRICK_HEIGHT;
uniform float U_MORTAR_THICKNESS;

uniform float Ka;//0:1:1.00
uniform float Kd;//0:1:1.00
uniform vec4 BRICK_COLOR;//#ff0000
uniform vec4 MORTAR_COLOR;//#e8d0ad

#define BRICK_MORTAR_WIDTH (U_BRICK_WIDTH + U_MORTAR_THICKNESS);
#define BRICK_MORTAR_HEIGHT (U_BRICK_HEIGHT + U_MORTAR_THICKNESS);

#define MORTAR_WIDTH (U_MORTAR_THICKNESS * 0.5 / BRICK_MORTAR_WIDTH);
#define MORTAR_HEIGHT (U_MORTAR_THICKNESS * 0.5 / BRICK_MORTAR_HEIGHT):

void main() {
	vec2 vUV = gl_FragCoord.xy/resolution.xy;
  	
  	vec4 total_color;
  	vec3 face_normal;
  	float ss, tt, scoord, tcoord, sbrick, tbrick, w, h;
  
  	scoord = vUV.x;
  	tcoord = vUV.y;
  
  	// for 3d
  	// face_normal = normalize(faceforward(N, I, ref));
  	// But since only dealing with a flat plane we can define directly
  	face_normal = vec3(0.0, 0.0, 1.0);
  
  	//Brick coordinates
  	ss = scoord / BRICK_MORTAR_WIDTH;
  	tt = tcoord / BRICK_MORTAR_HEIGHT;
  
  	if (mod(tt * 0.5, 1.0) > 0.5){
    	ss += 0.5; // shift alternate rows
    }
  
  
  
  
  
    gl_FragColor = vec4(vUV.x, vUV.y, 0., 1.);
}