GLSL矩形（框）渐变着色器

Question

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

有任何建议如何克服这种副作用？

Answer 1

在uv坐标空间（0.0，0.0）至（1.0，1.0）中，重要公式为：

• x> y
• -x + 1> y

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

desmos calculator of these two formula

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

示例片段颜色着色器：

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

示例视觉色着色器：

---

desmos calculator visual