Frag Coord Pattern

A fragment shader reads gl_FragCoord to compute a deterministic checker pattern directly per pixel.

Program

Fragment shaders run once per covered pixel. gl_FragCoord gives each invocation access to its window-space coordinate.

frag_coord_pattern.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  vec2 pixel = gl_FragCoord.xy;
  vec2 cell = floor(pixel / 24.0);
  float checker = mod(cell.x + cell.y, 2.0);
  gl_FragColor = vec4(mix(vec3(0.05,0.12,0.25), vec3(0.0,0.75,0.65), checker), 1.0);
</script>

gl_FragCoord gl_FragCoord contains the window-space coordinate for the current fragment.

procedural pattern A procedural pattern computes color from math instead of texture data.