以到最近边缘的距离为函数的着色矩形会在对角线上产生奇怪的结果

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 获得的图像，而不是这两者之间的最大值：

您可以通过以下 URL 试用着色器： https: //www.shadertoy.com/view/ldcyWH

Answer 1

你看到的效果是视错觉。您可以通过对颜色进行分级来使其可见。请参阅 stackoverflow 问题Issue gettinggradient 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);
}

预览：