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

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 getting gradient square in glsl es 2.0, Gamemaker Studio 2.0 .

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

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

预览: