为什么我的Perlin Noise看起来“块状”？

我尝试仅凭理论自己实现Perlin Noise （遵循flafla2.github.io/2014/08/09/perlinnoise.html）。不幸的是，我无法获得“原始” Perlin Noise的外观。

下面的代码呈现Perlin Noise的块状版本的原因是什么？

我应该改进/更改代码中的哪些内容，以使其呈现出没有伪影的Perlin Noise？

我怀疑插值方式或grads向量中可能存在问题。该grads载体包含（晶格点随机向量）和（大小矢量）的点产品-适用于所有4个附近的格点。（随机向量和大小向量在第一个链接中进行了描述。）

GLSL沙箱：http：//glslsandbox.com/e#32663.0

float fade(float t) { return t * t * t * (t * (t * 6. - 15.) + 10.); }
vec2 smooth(vec2 x) { return vec2(fade(x.x), fade(x.y)); }

vec2 hash(vec2 co) {
    return fract (vec2(.5654654, -.65465) * dot (vec2(.654, 57.4), co));
}

float perlinNoise(vec2 uv) {
    vec2 PT  = floor(uv);
    vec2 pt  = fract(uv);
    vec2 mmpt= smooth(pt);

    vec4 grads = vec4(
        dot(hash(PT + vec2(.0, 1.)), pt-vec2(.0, 1.)),   dot(hash(PT + vec2(1., 1.)), pt-vec2(1., 1.)),
        dot(hash(PT + vec2(.0, .0)), pt-vec2(.0, .0)),   dot(hash(PT + vec2(1., .0)), pt-vec2(1., 0.))
    );

    return 5.*mix (mix (grads.z, grads.w, mmpt.x), mix (grads.x, grads.y, mmpt.x), mmpt.y);
}

float fbm(vec2 uv) {
    float finalNoise = 0.;
    finalNoise += .50000*perlinNoise(2.*uv);
    finalNoise += .25000*perlinNoise(4.*uv);
    finalNoise += .12500*perlinNoise(8.*uv);
    finalNoise += .06250*perlinNoise(16.*uv);
    finalNoise += .03125*perlinNoise(32.*uv);

    return finalNoise;
}

void main() {
    vec2 position = gl_FragCoord.xy / resolution.y;
    gl_FragColor = vec4( vec3( fbm(3.*position) ), 1.0 );
}

插值看起来很好。这里的主要问题是您使用的哈希函数不是很好。如果我只看一个八度音程，并通过输出可视化哈希结果hash(PT).x，我将得到如下结果：

这应该是每个网格正方形完全随机的，但是您可以看到其中有很多对角线图案（看起来像棋盘格），因此它不是一个非常随机的哈希，并且这些图案会显示在它产生的噪音。

另一个问题是您的哈希仅返回[0，1]中的梯度矢量，而它们应位于[-1，1]中以获取所有方向的梯度。该部分很容易通过重新映射来修复。

为了解决这些问题，我切换了代码以使用此哈希函数（这是我从Mikkel Gjoel那里学到的，可能是由于 WJJ Rey的论文）：

vec2 hash(vec2 co) {
    float m = dot(co, vec2(12.9898, 78.233));
    return fract(vec2(sin(m),cos(m))* 43758.5453) * 2. - 1.;
}

请注意，由于使用了trig函数，它将比您的版本贵一些。但是，它大大改善了产生的噪声的外观：