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

Visuals: generated teaching cards from captured state

state written by this keyframe

frag_coord_pattern.html · full logical source

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

1
Read the current pixel coordinate
kf: 1event 0kind: lifecycle
Read the current pixel coordinate.
```
⋯3vec2 pixel = gl_FragCoord.xy→ pixel xy;⋯
```
gl_FragCoord is generated by rasterization for each fragment.
State after this keyframenone → pixel xyfragment input
2
Group pixels into square cells
kf: 2event 1kind: lifecycle
Group pixels into square cells.
```
⋯4vec2 cell = floor→ 24 pixels(pixel / 24.0);⋯
```
floor converts continuous pixel coordinates into stable cell indices.
State after this keyframe1 pixel → 24 pixelscell size
3
Alternate cells with modulo arithmetic
kf: 3event 2kind: lifecycle
Alternate cells with modulo arithmetic.
```
⋯5float checker = mod→ 0 or 1(cell.x + cell.y, 2.0);⋯
```
A fragment shader can synthesize patterns without textures.
State after this keyframeuncomputed → 0 or 1pattern value
4
Color the full-screen pattern
kf: 4event 3kind: lifecycle
Color the full-screen pattern.
```
⋯6gl_FragColor = vec4(mix→ checker pattern(vec3(0.05,0.12,0.25), vec3(0.0,0.75,0.65), checker), 1.0);⋯
```
The fragment shader colors every pixel from its computed checker value.
State after this keyframeclear color → checker patternpixels

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.