1.x分量
uv的x坐标，小于0时，返回0，位于[0,0.1]，插值，即从0到1的平滑插值。
大于0.1，返回1.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;

    vec2 center = vec2(0.0,0.0);
    vec2 offset = vec2(0.1,0.1);
    vec2 c = smoothstep(center,center + offset,uv);

    fragColor = vec4( c.x * vec3(1.0,1.0,0.0),1.0);
}

效果:

2.y分量

fragColor = vec4( c.y * vec3(1.0,1.0,0.0),1.0);

效果:

3.x,y分量求交，即做乘法

fragColor = vec4( c.y * c.x * vec3(1.0,1.0,0.0),1.0);

效果:

4.左下矩形

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;

    vec2 center = vec2(0.0,0.0);
    vec2 offset = vec2(0.1,0.1);
    vec2 c = smoothstep(center,center + offset,uv);

    vec2 c2 = vec2(0.2,0.2);
    vec2 co2 = smoothstep(c2,c2 - offset ,uv);

    fragColor = vec4( co2.y * co2.x * vec3(1.0,1.0,0.0),1.0);
}

效果:

4.过屏幕顶点的矩形进行求交

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;

    vec2 center = vec2(-0.2,-0.2);
    vec2 offset = vec2(0.1,0.1);
    vec2 c = smoothstep(center,center + offset,uv);

    vec2 c2 = vec2(0.2,0.2);
    vec2 co2 = smoothstep(c2,c2 - offset ,uv);

    fragColor = vec4(c.x * c.y * co2.y * co2.x * vec3(1.0,1.0,0.0),1.0);
}

效果:

5.封装一下矩形方法

float Box(vec2 uv,vec2 bottomLeft,vec2 topRight,vec2 blur)
{
    vec2 c = smoothstep(bottomLeft,bottomLeft + blur,uv);
    vec2 co2 = smoothstep(topRight,topRight - blur ,uv);
    c *= co2;
    return c.x * c.y;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;

    float c1 = Box(uv,vec2(-0.2,-0.2),vec2(0.2,0.2),vec2(0.1,0.1));

    fragColor = vec4(c1 * vec3(1.0,1.0,0.0),1.0);
}

效果同上图。