12｜噪声函数

/** 伪随机数：fract + sin + dot 的经典组合
 *  1. dot(st, vec2(12.9898, 78.233))：2D 坐标映射到 1D 标量
 *  2. sin(...)：正弦函数产生周期性波动
 *  3. * 43758.5453：放大让小数部分更"随机"
 *  4. fract(...)：只取小数部分，得到 [0, 1) 的伪随机数
 *
 *  缺点：不连续，相邻点差异大 → 看起来像雪花 */
float random(vec2 st) {
  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
}

网格点：  A ---- B
          |      |
          |  P   |
          |      |
          C ---- D

P 点的噪声值 = 混合(A、B、C、D 四个格点对 P 的影响)

/** 2D 哈希函数 — 返回 vec2 梯度向量
 *  每个格点需要一个随机"方向"，这个函数把整数坐标映射到伪随机 vec2
 *  -1.0 + 2.0 * fract(...) 把 [0, 1] 映射到 [-1, 1] */
vec2 hash(vec2 p) {
  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
  return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}

/** 2D Perlin 梯度噪声
 *  返回值范围：约 [-0.7, 0.7]（2D Perlin 的理论最大值） */
float perlinNoise(vec2 p) {
  /** 1. 网格坐标：floor 取整数部分确定在哪个格子 */
  vec2 i = floor(p);
  /** 2. 格子内的小数坐标：fract 确定在格子内的位置 */
  vec2 f = fract(p);

  /** 3. 四个角的梯度向量 */
  vec2 a = hash(i);
  vec2 b = hash(i + vec2(1.0, 0.0));
  vec2 c = hash(i + vec2(0.0, 1.0));
  vec2 d = hash(i + vec2(1.0, 1.0));

  /** 4. 距离向量与梯度的点积 → 影响值
   *  方向一致 → 值大；垂直 → 值为 0 */
  float va = dot(a, f);
  float vb = dot(b, f - vec2(1.0, 0.0));
  float vc = dot(c, f - vec2(0.0, 1.0));
  float vd = dot(d, f - vec2(1.0, 1.0));

  /** 5. Hermite 平滑插值：f*f*(3-2*f) 比线性插值更平滑
   *  保证一阶导数连续 → 噪声值在格点边界不会出现折角 */
  vec2 su = f * f * (3.0 - 2.0 * f);
  return mix(mix(va, vb, su.x), mix(vc, vd, su.x), su.y);
}

import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';
const simplex = new SimplexNoise();
const value = simplex.noise(x, y); // 返回 [-1, 1]

FBM(x) = Σ (amplitude * noise(x * frequency))
         i=0..octaves

/** FBM 分形布朗运动
 *  - 每一层（octave）频率翻倍（lacunarity），振幅减半（persistence）
 *  - 低频 = 大轮廓，高频 = 细节纹理
 *  - 模拟自然界分形结构（山脉、云雾、海岸线） */
float fbm(vec2 p, int octaves, float lacunarity, float persistence) {
  float value = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;

  /** GLSL 循环上限必须是编译期常量，用 if (i >= octaves) break 动态退出 */
  for (int i = 0; i < 8; i++) {
    if (i >= octaves) break;
    value += amplitude * perlinNoise(p * frequency);
    frequency *= lacunarity;  // 频率翻倍
    amplitude *= persistence; // 振幅衰减
  }
  return value;
}

/** 云雾：FBM 生成多层噪声 + 时间偏移让云缓慢漂移
 *  smoothstep 强化对比度 → 让云更"团状" */
float cloud(vec2 uv, float time) {
  vec2 q = uv * 3.0 + vec2(time * 0.03, time * 0.02);
  float n = fbm(q, 6, 2.0, 0.5);
  return smoothstep(-0.1, 0.6, n * 0.5 + 0.5);
}

/** 地形高度：FBM 生成连续高度场
 *  smoothstep 强化山脊，高度值直接驱动顶点 Y 坐标 */
float terrain(vec2 uv) {
  float height = fbm(uv * 5.0, 8, 2.0, 0.5);
  return smoothstep(0.0, 1.0, height * 0.5 + 0.5);
}

/** 顶点着色器：用噪声偏移 position 沿法线方向
 *  变形后的法线需要用有限差分法重算 */
varying vec3 vNormal;
uniform float uTime;
uniform float uNoiseScale;
uniform float uNoiseStrength;

void main() {
  vec3 pos = position;
  /** 用顶点位置采样噪声，加时间让它动起来 */
  float n = fbm(pos.xy * uNoiseScale + uTime * 0.15, 4, 2.0, 0.5);
  /** 沿法线方向偏移：凸起和凹陷沿表面法线分布 */
  pos += normal * n * uNoiseStrength;
  vNormal = normal;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

/** 火焰：q.y -= time 让火焰向上飘动
 *  (1.0 - uv.y) 让底部亮、顶部暗（火焰自然衰减）
 *  fbm 生成不规则边缘 */
float fire(vec2 uv, float time) {
  vec2 q = uv;
  q.y -= time * 0.3;  // UV 向下滚动 = 图案向上移动
  float n = fbm(q * 4.0, 5, 2.0, 0.6);
  return smoothstep(0.2, 0.9, (n * 0.5 + 0.5) * (1.0 - uv.y));
}

/** 沿 X/Y 方向偏移采样坐标，噪声图案缓慢流动 */
float animatedNoise(vec2 uv, float time) {
  return noise(uv + vec2(time * 0.1, time * 0.05));
}

/** 用 sin(time) 调制频率，噪声"呼吸" */
float pulsingNoise(vec2 uv, float time) {
  float freq = 2.0 + sin(time) * 1.0;
  return noise(uv * freq);
}

uniform float uTime;
uniform float uScale;
varying vec2 vUv;

/* noiseUtils 包含 random/hash/perlinNoise/fbm */
${noiseUtils}

void main() {
  vec2 uv = vUv * uScale;
  /** uTime 驱动采样坐标偏移：不同方向速度不同 → 斜向流动 */
  float n = perlinNoise(uv + vec2(uTime * 0.1, uTime * 0.05));
  /** [-0.7, 0.7] → [0, 1] 标准值域映射 */
  n = n * 0.5 + 0.5;
  /** 蓝色 → 白色 */
  vec3 color = mix(vec3(0.1, 0.2, 0.8), vec3(1.0), n);
  gl_FragColor = vec4(color, 1.0);
}

uniform float uTime;
uniform int uOctaves;
uniform float uLacunarity;
uniform float uPersistence;
varying vec2 vUv;

${noiseUtils}

void main() {
  vec2 uv = vUv * 3.0;
  float n = fbm(uv + uTime * 0.05, uOctaves, uLacunarity, uPersistence);
  n = n * 0.5 + 0.5;
  vec3 color = mix(vec3(0.15, 0.08, 0.02), vec3(0.95, 0.75, 0.3), n);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 uv = vUv;
  if (uv.y > 0.5) {
    /** 上半：云雾 = FBM + 时间漂移 + smoothstep 强化 */
    vec2 cloudUV = vec2(uv.x, (uv.y - 0.5) * 2.0);
    float c = cloud(cloudUV, uTime);
    vec3 color = mix(vec3(0.15, 0.25, 0.55), vec3(0.9, 0.95, 1.0), c);
    gl_FragColor = vec4(color, 1.0);
  } else {
    /** 下半：火焰 = FBM + 向上飘动 + 底部亮顶部暗 */
    vec2 fireUV = vec2(uv.x, uv.y * 2.0);
    float f = fire(fireUV, uTime);
    vec3 color = mix(vec3(0.02, 0.01, 0.0), vec3(1.0, 0.4, 0.05), f);
    gl_FragColor = vec4(color, 1.0);
  }
}

uniform float uTime;
uniform float uNoiseScale;
uniform float uNoiseStrength;
varying vec3 vNormal;
varying float vNoise;

${noiseUtils}

void main() {
  vec3 pos = position;
  /** 用顶点位置采样噪声，加时间让它动起来 */
  float n = fbm(pos.xy * uNoiseScale + uTime * 0.15, 4, 2.0, 0.5);
  vNoise = n;
  /** 沿法线方向偏移 */
  pos += normal * n * uNoiseStrength;

  /** 法线近似重算（有限差分法）
   *  变形后的法线不能直接用原始 normal
   *  对 pos 做微小偏移，算切线和副切线，叉积得新法线 */
  float eps = 0.01;
  vec3 posU = position + vec3(eps, 0.0, 0.0);
  vec3 posV = position + vec3(0.0, eps, 0.0);
  float nU = fbm(posU.xy * uNoiseScale + uTime * 0.15, 4, 2.0, 0.5);
  float nV = fbm(posV.xy * uNoiseScale + uTime * 0.15, 4, 2.0, 0.5);
  posU += normal * nU * uNoiseStrength;
  posV += normal * nV * uNoiseStrength;
  vec3 tangent = normalize(posU - pos);
  vec3 bitangent = normalize(posV - pos);
  vNormal = normalize(cross(tangent, bitangent));

  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

function createPerlinPanel(): THREE.Mesh {
  const geometry = new THREE.PlaneGeometry(4, 4)
  const material = new THREE.ShaderMaterial({
    vertexShader: perlinVertexShader,
    fragmentShader: perlinFragmentShader,
    uniforms: {
      uTime: { value: 0 },
      uScale: { value: 3.0 },      // 噪声密度
    },
    side: THREE.DoubleSide,
  })
  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(-6, 0, 0)     // 最左侧
  return mesh
}

/** 噪声修复：坐标 + 时间一起进噪声
 *  base * uWindScale：空间频率 → 风团大小
 *  + vec2(uTime * uWindSpeed, 0)：沿风向平移采样窗 → 阵风扫过草地
 *  两层复合：低频阵风（大片起伏）+ 高频抖动（细碎颤动） */
float gust = perlinNoise(base * uWindScale + vec2(uTime * uWindSpeed, 0.0));
float flutter = perlinNoise(base * uWindScale * 4.0 + vec2(uTime * uWindSpeed * 2.5, 0.0));
float phase = gust * 0.8 + flutter * 0.25;

/** 根部固定、叶尖摆动最大：pow(uv.y, 1.5) 高度权重 */
float w = pow(uv.y, 1.5);
world.x += phase * uWindStrength * w;

/** 修复：窄区间贴着实际值域扫，云边缘对比立刻出来 */
float d = smoothstep(uCoverage - 0.1, uCoverage + 0.1, n);
/** 错误：smoothstep(0.0, 1.0, n) 区间远宽于实际值域 → 整片灰 */

/** 高度场：位置 → 高度的连续函数（山脉的核心） */
float terrainHeight(vec2 p) {
  return fbm(p * uNoiseScale, 5, 2.0, 0.5);
}

/** 有限差分法线：对高度场四邻域采样，叉积得真实坡向 */
float eps = 0.06;
float hL = terrainHeight(pos.xz - vec2(eps, 0.0));
float hR = terrainHeight(pos.xz + vec2(eps, 0.0));
float hD = terrainHeight(pos.xz - vec2(0.0, eps));
float hU = terrainHeight(pos.xz + vec2(0.0, eps));
vNormal = normalize(vec3(hL - hR, 2.0 * eps, hD - hU));

/** 冰面高度场：根据模式选择噪声方案
 *  - 单频：只有一种特征尺度 → 拉近后坡被放大 → 糊
 *  - FBM：频率逐级翻倍、幅度逐级衰减 → 多尺度细节储备
 *  - Voronoi：晶界天然像冰裂纹 → 近距离有结构感 */
float iceHeight(vec2 p) {
  if (uMode < 0.5) {
    return perlinNoise(p) * 0.6;       // 单频（错误）
  } else if (uMode < 1.5) {
    return fbm(p, 5, 2.0, 0.5);       // FBM（修复）
  } else {
    float crystal = voronoiHeight(p * 3.0);  // 冰晶
    float base = perlinNoise(p * 0.5) * 0.3;
    return base + (0.5 - crystal) * 0.4;
  }
}