[Fragment Shader] Noise 1D 可视化理解

痛定思痛。 2022-01-11 02:37 206阅读 0赞

Shadershop Part 2. Noise\[1\] 的学习笔记.

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

# 0. 绘图工具 #

1.  [Graph Toy][] by Inigo Quilez
2.  [Shader Shop Editor][] by Toby Schachman

# 1. Random #

R a n d o m ( x ) = F r a c t ( S i n e ( x ) ∗ 999 ) Random(x)=Fract(Sine(x)∗999) Random(x)=Fract(Sine(x)∗999)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70]

# 2. Step Random #

S t e p R a n d o m ( x ) = R a n d o m ( F l o o r ( x ) ) StepRandom(x)=Random(Floor(x)) StepRandom(x)=Random(Floor(x))  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 1]

# 3. Noise #

## 3.1 Smooth Step ##

S m o o t h S t e p ( x ) = x ∗ x ∗ ( x ∗ − 2 + 3 ) SmoothStep(x)=x∗x∗(x∗−2+3) SmoothStep(x)=x∗x∗(x∗−2\+3)  
![三条直线相乘, 区间(0,1)为Smooth Step][_0_1_Smooth Step]

## 3.2 Smooth Saw ##

S m o o t h S a w ( x ) = S m o o t h S t e p ( F r a c t ( x ) ) SmoothSaw(x)=SmoothStep(Fract(x)) SmoothSaw(x)=SmoothStep(Fract(x))  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 2]

## 3.3 Noise ##

首先将 Smooth Saw 和 Step Random 相乘 :  
![SmoothSaw(x) \* StepRandom(x)][SmoothSaw_x_ _ StepRandom_x]  
再将锯齿反向的 Smooth Saw 和 Step Random 相乘.  
可以看到在任意一个 (n,n+1) 区间内, 灰线和黑线沿 x = n+0.5 对称:  
![灰线 : SmoothSaw(x) \* StepRandom(x); 黑线 : ( - SmoothSaw(x) + 1) \* StepRandom(x)][_ SmoothSaw_x_ _ StepRandom_x_ _ _ _ - SmoothSaw_x_ _ 1_ _ StepRandom_x]  
将黑线向右平移1, 然后和灰线相加,  
最后得到一个平滑的噪音 :  
 N o i s e ( x ) = S m o o t h S a w ( x ) ∗ S t e p R a n d o m ( x ) + ( − S m o o t h S a w ( x − 1 ) + 1 ) ∗ S t e p R a n d o m ( x − 1 ) Noise(x)=SmoothSaw(x)∗StepRandom(x)+(−SmoothSaw(x−1)+1)∗StepRandom(x−1) Noise(x)=SmoothSaw(x)∗StepRandom(x)\+(−SmoothSaw(x−1)\+1)∗StepRandom(x−1)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 3]

# 4. Fractal Noise #

将上面得到的 Noise 多层叠加, 每一层比上一层比例小1/2, 即: N o i s e n + 1 ( x ) = 0.5 ∗ N o i s e n ( x ∗ 2 ) Noise \_\{n+1\}(x)=0.5∗Noise\_n(x∗2) Noisen\+1(x)=0.5∗Noisen(x∗2)  
然后就可以得到分形的 Noise .  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 4]

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

## 参考文献 ##

\[1\] Toby Schachman. (December 2014). Shadershop. Retrieved Jan. 8, 2019, from [http://tobyschachman.com/Shadershop/][http_tobyschachman.com_Shadershop]

[Graph Toy]: http://www.iquilezles.org/apps/graphtoy/
[Shader Shop Editor]: http://tobyschachman.com/Shadershop/editor/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70]: /images/20220111/3c6a782ede4d4493b1d5666f5fe2d18f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 1]: /images/20220111/9b71cdddd70746058b215a78ab758c24.png
[_0_1_Smooth Step]: /images/20220111/75bf9d4fd18d42f8933e6379531feb99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 2]: /images/20220111/60a4bb92b26544e0a7db4793f60f0608.png
[SmoothSaw_x_ _ StepRandom_x]: /images/20220111/8d1ac05459bb4605b3a81db714c87c43.png
[_ SmoothSaw_x_ _ StepRandom_x_ _ _ _ - SmoothSaw_x_ _ 1_ _ StepRandom_x]: /images/20220111/4f5e79d476724ee287ef518db89e6881.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 3]: /images/20220111/8e77d00074fa4bc7acf7dbb204f59beb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phbWVzaWth_size_16_color_FFFFFF_t_70 4]: /images/20220111/c6da6efb71984a2595af4f92c6351176.png
[http_tobyschachman.com_Shadershop]: http://tobyschachman.com/Shadershop/