1.十字架

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;
}

float crossShape(vec2 uv)
{
    float b1 = Box(uv,vec2(-0.3,-0.03),vec2(0.3,0.03),vec2(0.01,0.01));
    float b2 = Box(uv,vec2(-0.03,-0.3),vec2(0.03,0.3),vec2(0.01,0.01));
    return b1 + b2;
}

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 = crossShape(uv);

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

效果:

2.旋转矩阵

#define PI 3.1415926

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;
}

float crossShape(vec2 uv)
{
    float b1 = Box(uv,vec2(-0.3,-0.03),vec2(0.3,0.03),vec2(0.01,0.01));
    float b2 = Box(uv,vec2(-0.03,-0.3),vec2(0.03,0.3),vec2(0.01,0.01));
    return b1 + b2;
}

mat2 rotate2d(float angle)
{
    mat2 m = mat2(cos(angle),-sin(angle),sin(angle),cos(angle));
    return m;
}

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;

    //旋转坐标系
    uv = rotate2d(sin(iTime) * PI) * uv;
    float c1 = crossShape(uv);

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

效果如下:

3.线性变换的角度

uv = rotate2d(iTime * 3.0) * uv;

效果:

4.不在原点的情况

uv -= vec2(0.1,0.1);
uv = rotate2d(iTime * 3.0) * uv;
float c1 = crossShape(uv);

效果: