perlin噪声

手贱去点了图形学里面的噪声课程，然后一个周末就交代在这上面了，还是有些云里雾里。

噪声就是给定一个输入变量，生成一个值在0~1范围内的伪随机变量的函数。在图形学中一般是输入一个坐标得到一个范围在0~1之间的变量，在利用各种颜色计算得到一些比较酷炫的效果，像火焰、云彩、地形等。下面就是perlin噪声生成个灰度图。

没啥意思是吧，那么看下面这个：

现在说说最有名的噪声算法：perlin噪声又称柏林噪声，噪声鼻祖。柏林噪声是基于网格的，假想了一堆格网，每个格子由四个顶点组成（三维场景就是立方体，每个立方体由8个顶点组成）；

图1：小蓝点代表输入值在单元正方形里的空间坐标，其他4个点则是单元正方形的各顶点

每个顶点有一个伪随机向量（就是一个向量，由一个伪随机函数生成的，伪随机函数可以随便找一个，perlin老爷子也是随便找了一个）。

图2：各顶点上的梯度向量随机选取结果

同时这四个顶点距离落在格网中的点，可以得到四个距离向量。

图3:各个距离向量

将图2得到的梯度向量与图3的距离向量做点乘，由于都是单位向量点乘积在0-1之间。同时这个点最终的值由四个点乘积根据权重关系做差值得到。

这个差值函数使用缓和曲线（ease curves）来计算它们的权重和。在原始的Perlin噪声实现中，缓和曲线是s(t)=3t2−2t3s(t)=3t2−2t3，在2002年的论文6中，Perlin改进为s(t)=6t5−15t4+10t3s(t)=6t5−15t4+10t3。（原文来自这篇文章）

好了现在来看看第一个效果是怎么做出来的（至于第二个么，咳咳，等我完全看明白会写出来的）

这个效果是来自ShaderToy中的。

// 生成一个伪随机向量，这个函数是找的一个伪随机函数，可以用其他的伪随机函数代替
vec2 hash( vec2 x )  // replace this by something better
{
    const vec2 k = vec2( 0.3183099, 0.3678794 );
    x = x*k + k.yx;
    // fract的作用是取小数，那么小数在0~1之间；乘以2再加-1，最终返回坐标范围在-1~1之间
    return -1.0 + 2.0*fract( 16.0 * k*fract( x.x*x.y*(x.x+x.y)) );
}

float noise( in vec2 p )
{
    vec2 i = floor( p ); // 取一个格子
    vec2 f = fract( p ); // 获取在格子内的位置

    vec2 u = f*f*(3.0-2.0*f); // 根据权重的平滑函数

    return mix(
               mix( dot( hash( i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
                     dot( hash( i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ),
                     u.x), // 将水平方向得到的两个点乘积根据水平方向的权重做差值
                mix( dot( hash( i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
                     dot( hash( i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ),
                     u.x),
          u.y);// 在竖直方向上对两个值按权重进行差值
}

// -----------------------------------------------

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 p = fragCoord.xy / iResolution.xy; // 像素位置除以分辨率，坐标范围在0~1之间

    vec2 uv = p*vec2(iResolution.x/iResolution.y,1.0); // 这时u.x范围在0~宽高比之间，u.y在0~1之间

    float f = 0.0;

    // left: noise
    if( p.x<0.6 )// 左边部分简单的生成单噪声
    {
        f = noise( 32.0*uv ); // 32作为一个参数音箱噪音频率
    }
    // right: fractal noise (4 octaves)
    else    // 右边部分使用四个倍频在模拟效果
    {
        uv *= 8.0;
        mat2 m = mat2( 1.6,  1.2, -1.2,  1.6 );
        f  = 0.5000*noise( uv ); uv = m*uv;
        f += 0.2500*noise( uv ); uv = m*uv;
        f += 0.1250*noise( uv ); uv = m*uv;
        f += 0.0625*noise( uv ); uv = m*uv;
    }

    f = 0.5 + 0.5*f;

    f *= smoothstep( 0.0, 0.005, abs(p.x-0.6) );    // 生成中间那条黑线，smoothstep的作用看这里，https://blog.csdn.net/libing_zeng/article/details/68924521

    fragColor = vec4( f * iTime, f, f, 1.0 );
}

最后还是列一下大神们的文章：

【图形学】谈谈噪声

一篇文章搞懂柏林噪声算法，附代码讲解

[数学][转载][柏林噪声]