用噪声生成云雾

当你不想依赖图片纹理时，可以用数学函数在片元着色器里直接生成“程序化纹理”。本节我们实现一个最小的 2D value noise（值噪声），再叠加多层得到更自然的云雾效果（fBm）。

目标

• 理解噪声构造的基本套路：hash + 插值
• 用多层叠加（fBm）获得更丰富的细节
• 用 uTime 驱动噪声采样位置，让云雾“流动”

思路

1. hash(p)：把二维坐标映射到一个伪随机值（0~1）。
2. noise(p)：对网格四个角的随机值做平滑插值。
3. fbm(p)：多次采样并叠加，每层频率翻倍、振幅减半。

最后用 smoothstep 把噪声值映射为“云的密度”，再在两种颜色之间插值。

动手练习

• 修改 fBm 叠加层数（循环次数），观察细节丰富程度与性能的权衡
• 调整 smoothstep 的阈值，让云雾更稀薄或更浓
• 把 p.x += uTime * 0.08 改成 p += vec2(uTime * 0.05, uTime * 0.03)，观察流动方向变化

小结

你已经掌握了程序化纹理的核心思路：用少量数学生成复杂图案。下一节我们将使用 RawShaderMaterial，更接近原生 WebGL 的写法，理解 Three.js 为你做了哪些“自动注入”。