对距离最近边缘起作用的着色矩形在对角线上产生奇怪的结果

Question

我试图在ShaderToy / GLSL中为每个像素到最近的矩形边缘的距离的颜色着色。但是，在其对角线上可以看到奇怪的（较暗的）结果：

我正在使用矩形UV坐标，使用以下代码：

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

    vec2 uvn=abs(uv-0.5)*2.0;
    float maxc=max(uvn.y,uvn.x);

    vec3 mate=vec3(maxc);

    fragColor = vec4(mate.xyz,1);
}

正如您所看到的，错误似乎来自max(uvn.y,uvn.x);代码行，因为它没有像人们期望的那样平滑地插入颜色值。为了比较，那些是通过采样uvn.y和uvn.x获得的图像，而不是这两者之间的最大值：

您可以在此网址处使用着色器： https://www.shadertoy.com/view/ldcyWH

Answer 1

你可以看到的效果是视错觉。您可以通过对颜色进行分级来使其可见。请参阅stackoverflow问题Issue getting gradient square in glsl es 2.0, Gamemaker Studio 2.0的答案。

为了获得更好的效果，您可以使用一个着色器，它可以平滑地改变渐变，从视图中间的圆形（或椭圆）渐变到视图边框的方形渐变：

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

    vec2 uvn=abs(uv-0.5)*2.0;

    vec2 distV     = uvn;
    float maxDist  = max(abs(distV.x), abs(distV.y));
    float circular = length(distV);
    float square   = maxDist;

    vec3 color1 = vec3(0.0);
    vec3 color2 = vec3(1.0);
    vec3 mate=mix(color1, color2, mix(circular,square,maxDist));

    fragColor = vec4(mate.xyz,1);
}

预览：