[Fragment Shader] Noise 2D 在Shader中实现

最新推荐文章于 2023-12-21 16:26:59 发布

原创最新推荐文章于 2023-12-21 16:26:59 发布 · 721 阅读

2 ·

CC 4.0 BY-SA版权

Fragment Shader 专栏收录该内容

3 篇文章

订阅专栏

这是关于《The Book of Shaders - Generative designs - Noise》的学习笔记。主要介绍了2D随机函数，通过floor函数将坐标网格化；2D噪声函数，利用周围4个点随机值和SmoothStep非线性插值得到；还实现了2D分形噪声，将多个缩放不同的Noise叠加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The Book of Shaders - Generative designs - Noise[1] 学习笔记.

1. Random 2D

首先实现之前学过的的2D随机函数, 即输入一个2D坐标, 输出(0,1)随机值:

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

在调用这个函数前, 用 floor 函数将坐标网格化:

void main() 
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec2 pos = floor(st*10.0);
    float n = random(pos);
    gl_FragColor = vec4(vec3(n), 1.0);
}

效果如下:
在这里插入图片描述

2. Noise 2D

然后实现2D噪声函数, 方法是获取周围4个点的随机值, 然后根据当前坐标的小数部分(利用 fract 函数), 插值得到最终噪声值. 插值时用到了之前学的 SmoothStep 进行非线性插值.
如图所示, 四个角的高度表示它们的随机值, 分别为代码中的a, b, c, d. 非线性插值获得中间的高度, 即所求噪声值.

借用The Book of Shaders的插图:
在这里插入图片描述
代码如下:

float noise(in vec2 st) 
{
    vec2 i = floor(st);
    vec2 f = fract(st);

    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));
    // smooth step
    vec2 u = f*f*(3.0-2.0*f);

    float ab = mix(a, b, u.x);
    float cd = mix(c, d, u.x);
    return mix(ab, cd, u.y);
    // 功能与上面三行相同
    // return mix(a, b, u.x) +
    //        (c - a)* u.y * (1.0 - u.x) +
    //        (d - b) * u.x * u.y;
}

在调用时, 直接传入坐标:

void main() 
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec2 pos = st*10.0;
    float n = noise(pos);
    gl_FragColor = vec4(vec3(n), 1.0);
}

效果如下:
在这里插入图片描述

3. Fractal Noise 2D

之前用 Shadershop 实现了1D的分形噪声, 原理是将多个缩放程度不同的 Noise 叠加起来, 现在也用 Noise2D 来实现分形噪声.

void main() 
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    
    float n = 0.0;
    n += noise(st*10.0);
	n += noise(st*20.0)/2.0;
    n += noise(st*40.0)/4.0;
    n += noise(st*80.0)/8.0;
    n += noise(st*160.0)/16.0;
    n += noise(st*320.0)/32.0;
    // 限制值在[0,1] 
    n = n*0.5;
    
    gl_FragColor = vec4(vec3(n), 1.0);
}