木纹年轮
12 / 15
学习程序化噪声的基础构件与常见风格化手法。
真实木头的年轮是一圈一圈的同心环，用极坐标半径加上噪声扰动就能模拟这个效果：
思路：半径 + 噪声
r = length(p) * 8.0 计算到画布中心的距离，乘以 8 后值在 0–4 之间（画布半径约 0.5，乘以 8 后约为 4）。
fract(r) 取小数部分，把这段距离折叠成重复的 0–1 模式——这就是「年轮」结构，每隔 1 单位出现一圈。
单独用 fract(r) 年轮是完美的同心圆。加上 n（FBM 噪声）之后，年轮被随机扰动，边缘产生不规则的弯曲，更接近真实木纹。
fract 如何产生重复
fract(x) 只保留 x 的小数部分：
fract(0.0) = 0.0fract(1.7) = 0.7fract(3.2) = 0.2
输出永远在 0–1 之间。对一个随距离线性增长的值取 fract，就得到锯齿形的重复模式——视觉上就是一圈圈的环。
FBM 噪声做扰动
n = fbm(vUv * 6.0) 在 0–1 之间变化，是 4 层叠加的平滑噪声，带有真实木纹那种不规则的大块感。把它加到 r 上，相当于在径向距离上引入随机偏移，让每圈年轮都稍微弯曲。
试着改一改
| 改动 | 效果 |
|---|---|
* 8.0 改为 * 4.0 | 年轮变宽，圈数减少 |
* 8.0 改为 * 16.0 | 年轮变细，圈数增多 |
fbm(vUv * 6.0) 改为 fbm(vUv * 12.0) | 噪声频率增高，木纹纹路更细碎 |
扰动量 n 改为 n * 0.3 | 年轮扰动减弱，更接近正圆同心环 |
练习
把 float w = 0.0; 改为用 fract(r + n) 计算木纹值，让画面出现被噪声扰动的年轮图案。
答案解析
初始状态：w = 0.0 所有像素输出黑色，什么都看不见。
改动：fract(r + n) 把径向距离 r 加上 FBM 噪声 n 再取小数部分。r 增大时，fract(r) 不断重置回 0，形成一圈圈的环；加上 n 之后，环的边界在不同角度被噪声推远或拉近，产生类似木纹的弯曲效果。
试着把 vec3(w) 改为 mix(vec3(0.35, 0.2, 0.05), vec3(0.8, 0.5, 0.15), w)，给年轮上木头颜色。