为什么webgl-noise不提供随机值？

Question

我正在使用以下代码，以及来自webgl- noise3D的噪声生成器。

void main() {
float noise = snoise(vec3(gl_FragCoord.x, gl_FragCoord.y, 0.0));
    vec4(1.0, 1.0, 1.0, noise);
}

我期待一个完全随机的输出，但我得到的是：

​

我做错了什么？

编辑:您看到的是单个纹理，我在SFML中对其应用着色器，如下所示：

window.draw(myTexture, myShader);

Answer 1

为了更好地表达@Alchemist的意思：

snoise(vec3(gl_FragCoord.x, gl_FragCoord.y, 0.0));

使用的x和y值变化太快(太高的“频率”)。Perlin噪声在这种尺度下看起来不是很好。它被设计成具有大致单位大小的特征。您使用像素(或多或少)作为单位，因此随机特征是像素大小的，这使得它们不平滑，周期也太小。

相反，您可以使用

float r = 10.0 / iResolution.y; // pseudocode
snoise(vec3(gl_FragCoord.x * r, gl_FragCoord.y * r, 0.0));

其中iResolution.y是窗口的y分辨率。现在，噪波图案将足够大，以达到预期的平滑效果，并且周期将足够大，使其在图像中不会明显重复。

Answer 2

如果包含noise3D库的功能，则可以进行“分屏”与“随机性”的比较。

// My own random number generator
// See Stack Overflow: http://stackoverflow.com/questions/5149544/can-i-generate-a-random-number-inside-a-pixel-shader/10625698#10625698
float random( vec2 p )
{
    vec2 r = vec2(23.14069263277926,2.665144142690225 );
    return fract( cos( mod( 12345678., 256. * dot(p,r) ) ) );
}

void main()
{
    vec2  p  = (-iResolution.xy + 2.0*gl_FragCoord.xy) / iResolution.y;
    float th = (-iResolution.x + 2.0*iMouse.x) / iResolution.y;

    if( iMouse.z<0.01) th = 0.5/ iResolution.y;
    float noise = snoise(vec3(gl_FragCoord.x, gl_FragCoord.y, 0.0));

    // Thanks to I.Q. for this interactive split screen!
    // https://www.shadertoy.com/view/MdjGR1
    if( p.x > th )
        noise = random( p );

    vec3 color = vec3(noise, noise, noise );
    color *= smoothstep( 0.006, 0.008, abs(p.x-th) );
    gl_FragColor = vec4( color, 1.0 );
}

“分屏”比较的ShaderToy版本：https://www.shadertoy.com/view/XtX3D4

Answer 3

首先，这不是perlin噪声应该使用的方式。

此无平铺perlin函数为每1x1个单位生成渐变。

    snoise(vec3(gl_FragCoord.x, gl_FragCoord.y, 0.0))

这句话太愚蠢了。因为它调用snoise(1，1，0)，snoise(1，2，0)..它在这里等于一个随机函数。

你应该得到snoise(1.001，1，0)，snoise(1.002，1，0)的值。然后，您将看到美丽的自然perlin噪声。

简化版本的perlin噪波着色器使用一种快速但糟糕的方法来生成随机渐变。作者假设你会放大噪音，重复的模式将不会被注意到。

我建议使用基于纹理的着色器来获得良好的随机化效果。纹理应包含复杂的排列信息，这有助于着色器生成随机效果。