噪声颜色映射
3 / 15
学习程序化噪声的基础构件与常见风格化手法。
噪声值是 0–1 的浮点数，可以直接用它来控制两种颜色之间的混合比例：
mix 把噪声变成颜色
mix(a, b, t) 在颜色 a 和颜色 b 之间插值，t 是混合比例（0% 到 100%）。当 t = n（噪声值），低噪声区域偏向颜色 a，高噪声区域偏向颜色 b，中间有连续的过渡——这就把灰度噪声变成了双色渐变噪声。
当前使用的颜色
深蓝和橙黄的对比度高，能把噪声的明暗结构清晰地呈现出来。
valueNoise 是什么
valueNoise 把画布分成格子，每个格点分配一个随机值，格点之间用平滑曲线插值。结果是连续变化的斑块噪声，vUv * 8.0 表示把坐标放大 8 倍，画面里会出现 8×8 个噪声周期。
试着改一改
| 改动 | 效果 |
|---|---|
vUv * 8.0 → vUv * 3.0 | 噪声频率降低，色块变大 |
a → vec3(0.05, 0.3, 0.1)（深绿） | 改变低值区颜色，整体偏绿 |
b → vec3(1.0, 0.95, 0.8)（米白） | 改变高值区颜色 |
valueNoise 改为 fbm | 使用多层叠加噪声，纹理更细腻 |
练习
把 vec3 c = a; 和 gl_FragColor = vec4(c, 1.0); 替换为使用 mix(a, b, n) 的颜色输出，让画面按噪声值从蓝色渐变到橙色。
答案解析
初始状态：vec3 c = a 直接把颜色设为 a（深蓝色），所有像素输出同一种颜色，完全看不出噪声的形状。
改动：用 mix(a, b, n) 替换固定颜色，噪声值 n 决定每个像素混合的比例。低噪声区偏蓝，高噪声区偏橙黄，中间值产生平滑过渡，噪声的空间分布就以颜色的形式显现出来。
试着改为 mix(a, b, pow(n, 3.0))，体验指数变换让低值区域更大、高值区域更小的效果。