根据到最近边缘的距离对矩形进行着色会在对角线中产生奇怪的结果

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

您看到的效果是视错觉。您可以通过对颜色进行分级来使其可见。查看 Whosebug 问题的答案。

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

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

预览：

根据到最近边缘的距离对矩形进行着色会在对角线中产生奇怪的结果

Coloring rectangle in function of distance to nearest edge produces weird result in diagonals

shader

opengl-es

glsl

webgl