Warum sieht mein Perlin-Rauschen „blockig“ aus?

Ich habe versucht, Perlin Noise selbst zu implementieren, indem ich nur die Theorie verwendet habe (folgt flafla2.github.io/2014/08/09/perlinnoise.html). Leider konnte ich den Look des "originalen" Perlin Noise nicht erreichen.

Was ist der Grund, warum der folgende Code eine blockartige Version von Perlin Noise darstellt?

Was muss ich im Code verbessern / ändern, damit Perlin Noise ohne die Artefakte wiedergegeben wird?

Ich vermute, dass es ein Problem in der Art und Weise gibt, wie ich interpoliere, oder im gradsVektor. Der gradsVektor enthält Punktprodukte von (Zufallsvektor für Gitterpunkte) und (Größenvektor) - für alle 4 nahegelegenen Gitterpunkte. (Die Zufalls- und Größenvektoren sind im allerersten Link beschrieben.)

GLSL Sandbox: 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 );
}

Die Interpolation sieht gut aus. Das Hauptproblem hierbei ist, dass die von Ihnen verwendete Hash-Funktion nicht sehr gut ist. Wenn ich nur eine Oktave betrachte und das Hash-Ergebnis durch Ausgabe visualisiere hash(PT).x, erhalte ich ungefähr Folgendes:

Dies sollte pro Gitterquadrat völlig zufällig sein, aber Sie können sehen, dass es viele diagonale Linienmuster enthält (es sieht fast aus wie ein Schachbrettmuster), so dass es sich nicht um einen sehr zufälligen Hash handelt, und diese Muster werden in angezeigt das Geräusch von ihm erzeugt.

Das andere Problem ist, dass Ihr Hash nur Gradientenvektoren in [0, 1] zurückgibt, während sie in [−1, 1] sein sollten, um Gradienten in alle Richtungen zu erhalten. Dieser Teil kann einfach durch Neuzuordnung behoben werden.

Um diese Probleme zu beheben, habe ich den Code auf die Verwendung dieser Hash-Funktion umgestellt (die ich von Mikkel Gjoel gelernt habe und die wahrscheinlich auf einem Artikel von WJJ Rey beruht ):

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

Beachten Sie, dass es aufgrund der Triggerfunktionen etwas teurer sein wird als Ihre Version. Es verbessert jedoch das Erscheinungsbild des resultierenden Geräusches erheblich: