Smooth Band

9 / 30
Create a soft horizontal band using smoothstep().

Use abs to measure distance from the canvas centerline, then smoothstep to turn that distance into a softly fading bright band.


Building the band mask

First measure how far each pixel is from the vertical center:

  • Center (vUv.y = 0.5): d = 0.0 (brightest)
  • Edges (vUv.y = 0.0 or 1.0): d = 0.5 (darkest)

Then convert distance into a mask:

When d < 0.05 the mask is 1 (band center). When d > 0.07 it's 0 (background). Between them, a smooth falloff.


Exercise

The exercise starts with band = 0.0 (all background). Use 1.0 - smoothstep(0.05, 0.07, d) to compute the mask and produce a horizontal bright band across the center.

Answer Breakdown

abs(vUv.y - 0.5) folds the y axis into a 0–0.5 distance from center. Smaller values are closer to center.

smoothstep(0.05, 0.07, d) ramps from 0 to 1 as d goes from 0.05 to 0.07. With 1.0 -, the band center is 1 and the outside is 0.

Adjust the two numbers to control band width and edge softness. Closer values make a harder edge.

GLSL Code Editor

Correct Code Preview

Current Code Preview