Checkerboard Pattern
13 / 15
📝 Exercise Goal
Combine the mod() function with floor() to generate a black and white checkerboard texture.
💡 💡 Tutorial Content
Combine the mod() function with floor() to generate a black and white checkerboard texture.
Overview
- Implement a horizontal gradient using UV as the factor.
Learning Objectives
- Understand how the
floor()function rounds down and themod()function calculates the modulus. - Learn how to control the size of the checkerboard by scaling UV coordinates.
- Master the logic of distinguishing different squares by using
mod(sum, 2.0)on the result offloor(uv.x) + floor(uv.y). - Be able to generate checkerboard patterns with custom colors and sizes.
Prerequisites
- uv-coordinates
- step-function-mask
Key Concepts
- A horizontal gradient uses a 0-1 factor (usually UV) to blend colors.
float t = vUv.x;
vec3 color = vec3(t);
- Keep the factor inside
[0,1].
t = clamp(t, 0.0, 1.0);
How To Implement (Step-by-step)
- Set factor:
t = vUv.x. - Map
tto a color (grayscale ormix). - Output
gl_FragColorwith alpha=1.
Self-check
- Does it compile without errors?
- Does the output match the goal?
- Are key values kept in
[0,1]?
Common Mistakes
- Clamp
tinto[0,1]when needed.