Grid Lines

6 / 30
Use fract() and step() to draw grid lines.

Stripes repeat in one direction. Grid lines repeat in both directions and draw a line near each tile boundary.


Build tiled coordinates

fract(vUv * 10.0) divides the canvas into a 10×10 grid. Inside each cell, g runs 0–1 again.


Draw lines at boundaries

Within each cell, g.x near 1.0 means near the right edge. Use step to detect it:

  • step(0.95, g.x) = 1 when g.x > 0.95 (near right edge)
  • Adding the y test covers horizontal lines too
  • min(line, 1.0) prevents the value exceeding 1 at intersections

Exercise

The exercise starts with line = 0.0 (all background). Compute the line mask with step(1.0 - lw, g.x) + step(1.0 - lw, g.y), then clamp with min.

Answer Breakdown

Each direction contributes one set of lines. Adding them together means corner intersections get a value of 2 — min(line, 1.0) brings that back to 1.

Try lw = 0.02 for thinner lines, or change density to control how many grid cells appear.

GLSL Code Editor

Correct Code Preview

Current Code Preview