GLSL矩形（长方体）渐变着色器

我正在研究GLSL中的渐变着色器。 我到处搜索，但没有找到一个矩形斜率的解决方案，这样在中间没有“交叉”。

如何克服这种副作用？在uv坐标空间（0.0,0.0）到（1.0,1.0）中，重要的公式是：

• x>y
• -x+1>y

这些比较将uv空间按对角线分成四个象限

glsl混合功能：

// return a value `fac` between 0.0 and 1.0
// at uv center (0.5, 0.5) -> 1.0
// at uv edges  (0.0, 0.0) -> 0.0
//              (1.0, 1.0) -> 0.0
float boxmix(vec2 uv) {
    bool ab = (uv.x > uv.y);
    bool cd = (uv.y > -uv.x + 1.);
    
    vec2 duv = uv * 2.;
    float fac = 0.;
    if (ab) {
        if (cd) {
            fac = 2. - duv.x;
        } else {
            fac = duv.y;
        }
    }
    else {
        if (cd) {
            fac = 2. - duv.y;
        } else {
            fac = duv.x;
        }
    }
    return fac;
}

frag颜色着色器示例：

vec3 black = vec3(0.);
vec3 white = vec3(1.);
fragColor = vec4(mix(black, white, boxmix(uv)), 1.);

frag颜色着色器视觉示例：

---

在uv坐标空间（0.0，0.0）到（1.0，1.0）中，重要的公式是：

• x>y
• -x+1>y

这些比较将uv空间按对角线分成四个象限

glsl混合功能：

// return a value `fac` between 0.0 and 1.0
// at uv center (0.5, 0.5) -> 1.0
// at uv edges  (0.0, 0.0) -> 0.0
//              (1.0, 1.0) -> 0.0
float boxmix(vec2 uv) {
    bool ab = (uv.x > uv.y);
    bool cd = (uv.y > -uv.x + 1.);
    
    vec2 duv = uv * 2.;
    float fac = 0.;
    if (ab) {
        if (cd) {
            fac = 2. - duv.x;
        } else {
            fac = duv.y;
        }
    }
    else {
        if (cd) {
            fac = 2. - duv.y;
        } else {
            fac = duv.x;
        }
    }
    return fac;
}

frag颜色着色器示例：

vec3 black = vec3(0.);
vec3 white = vec3(1.);
fragColor = vec4(mix(black, white, boxmix(uv)), 1.);

frag颜色着色器视觉示例：

---