根据到最近边缘的距离为矩形着色会在对角线上产生奇怪的结果答案

【问题标题】：Coloring rectangle in function of distance to nearest edge produces weird result in diagonals根据到最近边缘的距离为矩形着色会在对角线上产生奇怪的结果
【发布时间】：2018-02-14 16:44:47
【问题描述】：

我正在尝试根据每个像素到最近矩形边缘的距离为 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

【问题讨论】：

请说明测量距离的方法。垂直于边？ dx,dy 的最小值？
垂直于边缘，标准化。查看右下角的图像，您可以看到例如 uvn.x 的值：在图像的右、左边缘时为 1，在图像中间为 0，同样发生在 uvn.y 的顶部和底部为 1 .奇怪的是，当混合这两个变量做 max(uvn.x,uvn.y) 时，那些奇怪的黑色边距出现在最终图像上，而我应该期待平滑过渡
它应该是这样的。如果您不相信，请尝试使用颜色选择器。
结果正确：见Issue getting gradient square in glsl

标签： opengl-es glsl shader webgl

【解决方案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);
}

预览：

【讨论】：

一直在尝试纠正代码中的错误，结果发现错误就在我们的眼中。看来我们需要补丁 :) 谢谢！