阅读 269

Shader 中的随机与噪声

《The Book Of Shader》笔记,有增删。

一、随机(random)

说到随机函数,JavaScript 中有 Math.random(),PHP 中有rand(),在图形绘制时,随机也无处不在。《The Book Of Shader》 通过一个简单的函数衍化,让我们了解随机:

通过fract()sin()的结合,我们得到了一个有一定规律但被打乱的曲线,当我们把1.0变成无限大时,再看看效果:

我们把上面的公式封装成rand()函数:

Shader 中的随机是确定性随机(伪随机),也就是当我们的输入值确定时,输出值也是确定的,而 JavaScript 和 PHP 则是非确定随机,每次随机出来的内容是不一样的。当然我们还可以对随机增加一些变化:

rand()*rand() 会让值更趋近于 0:

更多的随机研究可以看这篇文章,你会发现随机数也是可以「操作」的:

你会发现随机图表中,会有两个地方的随机分布不均匀(-1.5707 ~ 1.5707),这是 sin() 最大值和最小值的地方,所以我们在取值的时候尽量避免这两个地方:

2D 随机

现在我们对随机有了深入的理解,是时候将它应用到二维,x 轴和 y 轴。为此我们需要将一个二维向量转化为一维浮点数。这里有几种不同的方法来实现,但 dot() 函数在这个例子中尤其有用。它根据两个向量的方向返回一个 0.0 到 1.0 之间的值。—— refer

如果你对下面的vec2(12.23,78.32)))*232348.23)留有疑问,姑且将其理解为 magic number,它的效果就跟电视没有信号时的雪花效果一样:

下面对这些随机数做一些操作:

封装函数:

// 伪随机
float random (float n) {
    return fract(sin(n)*1000000.);
}

float random (vec2 st) {
    return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
}

// 散列函数(哈希值)
float hash(float n) {
    return fract(sin(n) * 1e4);
}

float hash(vec2 p) { 
    return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x))));
}
复制代码


二、噪声(noise)

噪声跟随机有什么不同?

噪音的基础来自于随机数,随机数的特点是每个点的值都是离散的,相互完全没有关系,而噪音则是让离散的随机数连续起来。最简单的连续化处理就是插值,在离散数据中间用函数插值的方法把空隙填满空间就自然连续了。说到插值,学过数值分析的立刻就能想到七八种插值方法,只要能保持连续性不管是三角函数,正态分布,还是样条曲线都可以使用。—— 不只是噪音

有了噪音我们就可以还原出自然界的真实景象:

如何得到一个离散的随机值,可以通过上面的随机函数:

接着把这些离散的随机值通过mix()线性插值的方式连接起来:

通过smoothstep()函数让变化更圆滑:

在一些 noise 的应用中你会发现程序员喜欢用他们自己的三次多项式函数(比如下面的例子),而不是用smoothstep(),结果是一样的。

通过这种方式得到了一段 「噪音」

当我们把它作为值,显示在画布中,会是什么样子呢?可以看到一维的噪音并没有太大的价值:

可以用直接封装好的noise()函数(文章底部会罗列这些函数的声明):

2D 噪声

2D 噪声在图形角度才更具备价值,其自变量不再是水平或垂直的一个值而是二维的值:

当我们使用已经封装好后的 2D noise() 函数并传入坐标后,看看效果:

函数封装:


// 一维(这里都是基于hash,也可以改成基于random
float noise(float x) {
    float i = floor(x);
    float f = fract(x);
    float u = f * f * (3.0 - 2.0 * f);
    return mix(hash(i), hash(i + 1.0), u);
}

// 二维
float noise(vec2 x) {
    vec2 i = floor(x);
    vec2 f = fract(x);

	// Four corners in 2D of a tile
	float a = hash(i);
    float b = hash(i + vec2(1.0, 0.0));
    float c = hash(i + vec2(0.0, 1.0));
    float d = hash(i + vec2(1.0, 1.0));

    // Simple 2D lerp using smoothstep envelope between the values.
	// return vec3(mix(mix(a, b, smoothstep(0.0, 1.0, f.x)),
	//			mix(c, d, smoothstep(0.0, 1.0, f.x)),
	//			smoothstep(0.0, 1.0, f.y)));

	// Same code, with the clamps in smoothstep and common subexpressions
	// optimized away.
    vec2 u = f * f * (3.0 - 2.0 * f);
	return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}

// 三维
float noise(vec3 x) {
    const vec3 step = vec3(110, 241, 171);

    vec3 i = floor(x);
    vec3 f = fract(x);
 
    // For performance, compute the base input to a 1D hash from the integer part of the argument and the 
    // incremental change to the 1D based on the 3D -> 1D wrapping
    float n = dot(i, step);

    vec3 u = f * f * (3.0 - 2.0 * f);
    return mix(mix(mix( hash(n + dot(step, vec3(0, 0, 0))), hash(n + dot(step, vec3(1, 0, 0))), u.x),
                   mix( hash(n + dot(step, vec3(0, 1, 0))), hash(n + dot(step, vec3(1, 1, 0))), u.x), u.y),
               mix(mix( hash(n + dot(step, vec3(0, 0, 1))), hash(n + dot(step, vec3(1, 0, 1))), u.x),
                   mix( hash(n + dot(step, vec3(0, 1, 1))), hash(n + dot(step, vec3(1, 1, 1))), u.x), u.y), u.z);
}
复制代码

相关链接:

关注下面的标签,发现更多相似文章
评论