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

「爱情、让人受尽委屈。」 2022-01-11 02:41 268阅读 0赞

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);
    }

效果如下:  
![在这里插入图片描述][20190619131544327.png]

# 2. Noise 2D #

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

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

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);
    }

效果如下:  
![在这里插入图片描述][20190619131823942.png]

# 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);
    }

最终效果如下:  
![在这里插入图片描述][20190619131944358.png]

--------------------

## 参考文献 ##

\[1\] Patricio Gonzalez Vivo, Jen Lowe. The Book of Shaders. Retrieved Jan. 9, 2019, from [https://thebookofshaders.com/11/?lan=ch][https_thebookofshaders.com_11_lan_ch]

[20190619131544327.png]: /images/20220111/bead48b9649e49d28c6d0cd5d9342534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70]: /images/20220111/c3d5942721ca4dc18c8e14272b80053d.png
[20190619131823942.png]: /images/20220111/d62b0987a693484a8a05efe388a13866.png
[20190619131944358.png]: /images/20220111/be05d8e0d316483f85600c3dcd63955b.png
[https_thebookofshaders.com_11_lan_ch]: https://thebookofshaders.com/11/?lan=ch