如何在我的 GLSL 噪声着色器中识别导致这些线条的原因答案

【问题标题】：How do I identify what is cauing these lines in my GLSL noise shader如何在我的 GLSL 噪声着色器中识别导致这些线条的原因
【发布时间】：2022-09-05 17:22:48
【问题描述】：

我正在学习如何在 glsl 中使用着色器产生噪音，并将以下片段着色器拼凑在一起，这种工作方式：

float rand(vec2 cord)
{
    return fract(sin(dot(cord, vec2(12.9898, 78.233)))*43758.5453);
}

void main()
{
    vec2 uv = gl_FragCoord.xy;

    vec2 i = floor(uv);
    vec2 f = fract(uv);

    vec2 c0 = i + vec2(0.0,0.0);
    vec2 c1 = i + vec2(1.0,0.0);
    vec2 c2 = i + vec2(0.0,1.0);
    vec2 c3 = i + vec2(1.0,1.0);

    float r0 = rand(c0);
    float r1 = rand(c1);
    float r2 = rand(c2);
    float r3 = rand(c3);

    float b = mix(r0,r1,f.x);
    float t = mix(r2,r3,f.x);

    gl_FragColor = vec4(mix(b,t,f.y),0.0,0.0,1.0);
}

（顶点着色器是默认的）

这个想法是在整数点处随机生成一些值，然后在它们之间进行插值。这个过程大部分都有效，但在整数值边界处留下了一些尖锐的线条。

This is the output

如果我不得不猜测，我认为这与舍入误差有关。 rand 函数的想法是生成一个介于 1 和 0 之间的值，该值随 2D 位置变化很大，它做得很好，以至于舍入的微小差异会导致整数点的变化更大。

所以我的问题是，如果这是对问题的正确识别，我该如何解决？如果这不正确，我如何更好地识别问题。

谢谢。

【问题讨论】：

标签： glsl fragment-shader

【解决方案1】：

这是一个有趣的问题：您的代码在我这边完美运行。你可以从Shadertoy 尝试这个随机函数，也许它对你来说也会更好：

float hash12(vec2 p)
{
    vec3 p3  = fract(vec3(p.xyx) * .1031);
    p3 += dot(p3, p3.yzx + 33.33);
    return fract((p3.x + p3.y) * p3.z);
}

另外，尝试在vec2 f = fract(uv); 之后添加这一行：f = f*f*(3.-2.*f);。通过将 f 的线性级数转换为更平滑的级数，它将使插值更平滑。

【讨论】：