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

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

没啥意思是吧,那么看下面这个:

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

perlin噪声-LMLPHP
图1:小蓝点代表输入值在单元正方形里的空间坐标,其他4个点则是单元正方形的各顶点

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

perlin噪声-LMLPHP
图2:各顶点上的梯度向量随机选取结果

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

perlin噪声-LMLPHP
图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 );
}

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

【图形学】谈谈噪声

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

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

 

05-11 20:05