Three.js 实现真实海面，核心就这几个 Shader 技巧

vec3 gerstnerWave(vec4 wave, vec3 p, inout vec3 tangent, inout vec3 binormal) {
  float steepness = wave.z;   // 陡度：0=平缓，1=破碎
  float wavelength = wave.w;  // 波长
  float k = 2.0 * PI / wavelength;
  float c = sqrt(GRAVITY / k); // 相速度，基于真实物理
  vec2  d = normalize(wave.xy); // 传播方向
  float f = k * (dot(d, p.xz) - c * uTime);
  float a = steepness / k;      // 振幅
 
  // XZ 水平位移（产生波峰尖锐感）
  return vec3(
    d.x * a * cos(f),
    a * sin(f),        // Y 垂直位移
    d.y * a * cos(f)
  );
}

// 垂直方向噪声：增加随机起伏
vec3 nc1 = position * 0.015 + vec3(uTime * 0.35, 0.0, uTime * 0.22);
float heightNoise = (vfbm(nc1) - 0.5) * 2.0;
totalDisp.y += heightNoise * 2.2;
 
// 水平方向噪声：产生有机感的横向扭动
vec3 nc2 = position * 0.01 + vec3(-uTime * 0.12, 0.0, uTime * 0.08);
totalDisp.x += (vfbm(nc2) - 0.5) * 0.9;
totalDisp.z += (vfbm(nc2 + vec3(4.7, 1.3, 6.1)) - 0.5) * 0.9;

// tanh 把超出范围的波峰柔和地压回去
float softFactor = 3.5;
totalDisp.y = tanh(totalDisp.y / softFactor) * softFactor;

// 先做域扭曲（Domain Warp）：用噪声扭曲采样坐标，避免直线感
vec3 warp = vec3(
  snoise(vWorldPosition * 0.02 + vec3(wt, 0.0, wt * 0.7)),
  0.0,
  snoise(vWorldPosition * 0.02 + vec3(0.0, wt, -wt * 0.5))
) * 3.0;
 
// Layer 1: 中等波纹（沿主风向）
vec3 p1 = vWorldPosition * 0.07 + warp * 0.3 + vec3(t1, 0.0, t1 * 0.65);
float r1x = fbm(p1);
 
// Layer 3: 微波纹（高频）
vec3 p3 = vWorldPosition * 0.45 + vec3(t3 * 0.4, 0.0, -t3 * 0.25);
float r3x = snoise(p3) * 0.35;
 
// Layer 5: 超细节（消除任何残留平滑感）
vec3 p5 = vWorldPosition * 1.8 + vec3(t5 * 0.15, 0.0, -t5 * 0.1);
float r5x = snoise(p5) * 0.15;
 
// 所有层合并，以 45% 权重混入几何法线
vec3 noiseNormal = normalize(noiseOffset);
N = normalize(mix(N, noiseNormal, 0.45));

// Schlick 近似公式，F0=0.02 对应水的折射率
float fresnel = fresnelSchlick(NdotV, 0.02);
 
// 天空颜色：从 CubeCamera 实时渲染的环境贴图采样
vec3 reflectDir = reflect(-viewDir, N);
vec3 envColor = textureCube(uEnvMap, reflectDir).rgb;
 
// 水体颜色：深水深色、浅角度浅色
vec3 waterColor = mix(uDeepColor, uShallowColor, depthFactor);
 
// 用 Fresnel 混合两者
vec3 color = mix(waterColor, envColor, fresnel);

float specSharp  = pow(NdotH, 512.0) * 4.0;  // 紧凑的太阳圆盘
float specMedium = pow(NdotH, 128.0) * 0.6;  // 中等散射
float specBroad  = pow(NdotH, 32.0)  * 0.15; // 宽泛光晕
vec3 specular = uSunColor * (specSharp + specMedium + specBroad);

// 把世界坐标投影到风向和垂直风向，制造拉伸效果
vec2 windDir  = normalize(vec2(0.85, 0.35));
vec2 windPerp = vec2(-windDir.y, windDir.x);
 
// 风向拉伸 6 倍，垂直方向压缩——泡沫条带就来自这里
vec2 stretchA = vec2(
  dot(worldXZ, windDir) * 0.06,   // 沿风向，坐标密度低 → 拉伸
  dot(worldXZ, windPerp) * 0.22   // 垂直风向，坐标密度高 → 压缩
);
 
// 第 1 层：主条带
float streak = snoise(vec3(stretchA + uTime * vec2(0.035, 0.015), uTime * 0.04));
streak = smoothstep(0.30, 0.75, streak);
 
// 第 3 层：蜂窝纹理，让泡沫有透气感（不是实心色块）
float cell1 = abs(snoise(vec3(worldXZ * 0.5, uTime * 0.08)));
float cell2 = abs(snoise(vec3(worldXZ * 1.0 + 5.3, uTime * 0.12)));
float cellular = smoothstep(0.03, 0.20, cell1 * cell2); // 软梯度，非二值
 
// 最终：波峰因子 × 条带 × 蜂窝 → 泡沫只在波峰出现，且有有机纹理
float foamBase = vFoamFactor * streak * cellular * 0.8;

PlaneGeometry(4000×4000, 512×512 细分)
    │
    ├── Vertex Shader
    │     ├── 12 条 Gerstner 波叠加
    │     ├── FBM 噪声扰动（打破规律感）
    │     └── tanh 波峰压缩
    │
    └── Fragment Shader
          ├── 5 层多尺度法线扰动（域扭曲）
          ├── Fresnel 反射
          ├── 天空 CubeMap 反射
          ├── 次表面散射（SSS）
          ├── 三瓣太阳高光
          ├── 4 层各向异性泡沫
          └── 距离雾

后处理：UnrealBloom（threshold=0.9，只让高光泛光）

// 海面颜色
const COLORS = {
  deep:    new THREE.Color(0.0, 0.025, 0.08),  // 深水色
  shallow: new THREE.Color(0.02, 0.18, 0.25),  // 浅水/透明色
  fog:     new THREE.Color(0.55, 0.62, 0.72),  // 大气雾色
};
 
// 太阳位置
const SUN_CONFIG = {
  elevation: 15,  // 0=地平线，90=正午
  azimuth:   160, // 旋转角度
};
 
// Bloom 后处理
const bloomPass = new UnrealBloomPass(
  size, 0.25, 0.5, 0.90 // strength, radius, threshold
);