为什么 webgl-noise 不给出随机值？

Question

我正在使用以下代码，以及来自 webgl-noise 的 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 值变化太快（“频率”太高）。像 snoise 这样的 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

据我了解，噪音并不是随机的，而是看起来更自然的“随机性”。 http://en.wikipedia.org/wiki/Perlin_noise 很好地概述了 Perlin 噪声，我认为这就是您正在使用的。

你的图片有点太非随机，我怀疑你的编码有错误。我们可以看看整个应用吗？

好的，@Andon 已经破解了。

Answer 3

如果你包含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 4

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

这个不平铺的 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 噪声着色器的简化版本使用一种快速但较差的方式来生成随机渐变。作者假设你会放大噪音，重复的图案将不明显。

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