云朵
6 / 15
学习程序化噪声的基础构件与常见风格化手法。
噪声值本身是连续的灰度，要变成云朵轮廓，需要用 smoothstep 把高值区域「提亮」，低值区域「压暗」：
FBM 噪声长什么样
画布里使用的是 FBM（分形布朗运动）噪声——把 4 层不同频率的值噪声叠加起来，每层的振幅减半、频率翻倍。叠加后的噪声值在 0–1 之间，有大块的低频起伏，也有细节上的小颗粒感，整体看起来像白云的密度分布。
smoothstep 做「阈值」
smoothstep(0.5, 0.75, n) 对噪声值 n 做了一次平滑截断：
n < 0.5：返回 0（天空，不是云）0.5 < n < 0.75：从 0 平滑过渡到 1（云的边缘，半透明）n > 0.75：返回 1（云的核心，纯白）
这样只有噪声值较高的区域才会显示为白色云朵，低值区域保持天蓝色背景。
mix 把云叠在天空上
c 为 0 时输出天蓝色，c 为 1 时输出白色，中间值产生柔和的云边缘。
试着改一改
| 改动 | 效果 |
|---|---|
smoothstep(0.5, 0.75, n) → smoothstep(0.6, 0.8, n) | 云层变稀，只保留密度更高的区域 |
smoothstep(0.5, 0.75, n) → smoothstep(0.3, 0.6, n) | 云层变厚，覆盖更大范围 |
vUv * 5.0 → vUv * 10.0 | 噪声频率翻倍，云朵变得更细碎 |
u_time * 0.05 → u_time * 0.2 | 云朵漂移加速 |
练习
把 float c = 0.0; 改为用 smoothstep 从噪声值 n 中提取云朵轮廓，让蓝色天空上出现白色云朵。
答案解析
初始状态：c = 0.0 表示没有云，整个画布是天蓝色背景色。
改动：smoothstep(0.5, 0.75, n) 把 FBM 噪声的高值区域（大于 0.5）映射为非零的 c，再通过 mix(sky, cloud, c) 把这些区域渲染为白色。两个边界值（0.5 和 0.75）决定了云朵的密度阈值和边缘柔和程度。
试着用 step(0.6, n) 替换 smoothstep，对比硬切割和平滑过渡的边缘差异。