WebGL / GLSL - 基本噪声显示块/正方形

如何解决WebGL / GLSL - 基本噪声显示块/正方形

我试图渲染一个基本的噪音，所以我选择了一个我在互联网上找到的噪音函数。它运行良好，但是当我想通过添加我的 uTime 值沿 y 轴移动噪声时，会出现一些正方形/块状形状，但我找不到原因。

所以它是这样开始的：

当我沿着 y 轴移动它时，它是这样的：

这里是片段着色器代码：

precision mediump float;

uniform float uTime;
 
varying vec2 vUv;


// Helpers

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

float noise(vec2 coord){
    vec2 i = floor(coord);
    vec2 f = fract(coord);

    // 4 corners of a rectangle surrounding our point
    float a = rand(i);
    float b = rand(i + vec2(1.0,0.0));
    float c = rand(i + vec2(0.0,1.0));
    float d = rand(i + vec2(1.0,1.0));

    vec2 cubic = f * f * (3.0 - 2.0 * f);

    return mix(a,b,cubic.x) + (c - a) * cubic.y * (1.0 - cubic.x) + (d - b) * cubic.x * cubic.y;
}


void main() {

    vec4 color = vec4(1.);
    vec2 uv = vUv;
    float speed = uTime * 1e-3;
    vec2 coord = uv * 8.;

    float noise1 = noise(coord * 5e-1 + vec2(speed * .25,speed * 4.));

    color = vec4(
        vec3(noise1),1.
    );


    gl_FragColor = color;
}