Three.js海面着色器 - Gerstner波与水体模拟详解

海面着色器效果预览

简介

本示例展示如何使用Three.js实现真实的海面波浪效果。通过Gerstner波算法和高级水体着色技术，创造出具有动态波浪、泡沫效果和光线反射的逼真海洋场景。

在线演示地址 | 完整源代码

核心技术栈

技术 说明 难度等级
Three.js WebGL 3D渲染引擎 ⭐⭐⭐
ShaderMaterial 自定义着色器材质 ⭐⭐⭐
Gerstner波 真实波浪算法 ⭐⭐⭐⭐
法线贴图 水面细节 ⭐⭐⭐
Fresnel反射 光线反射 ⭐⭐⭐

算法原理解析

1. Gerstner波原理

Gerstner波是模拟真实海洋波浪的经典算法：

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Gerstner波函数
vec3 gerstnerWave(vec3 position, float steepness, float wavelength, vec2 direction, float time) {
    float k = 2.0 * 3.14159 / wavelength;
    float c = sqrt(9.8 / k);
    vec2 d = normalize(direction);
    float f = k * (dot(d, position.xz) - c * time);
    float a = steepness / k;

    return vec3(
        d.x * (a * cos(f)),
        a * sin(f),
        d.y * (a * cos(f))
    );
}

2. 多层波浪叠加

GLSL
1
2
3
4
5
6
7
8
9
uniform float uTime;

vec3 calculateWavePosition(vec3 pos) {
    vec3 wave1 = gerstnerWave(pos, 0.25, 60.0, vec2(1.0, 0.0), uTime);
    vec3 wave2 = gerstnerWave(pos, 0.2, 31.0, vec2(0.7, 0.7), uTime * 1.2);
    vec3 wave3 = gerstnerWave(pos, 0.15, 18.0, vec2(-0.5, 0.5), uTime * 0.8);

    return pos + wave1 + wave2 + wave3;
}

3. 水体着色

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
void main() {
    // 计算表面法线
    vec3 normal = calculateNormal(vPosition);

    // Fresnel效应
    vec3 viewDir = normalize(cameraPosition - vWorldPosition);
    float fresnel = pow(1.0 - max(dot(viewDir, normal), 0.0), 3.0);

    // 水体颜色
    vec3 deepColor = vec3(0.0, 0.1, 0.2);
    vec3 shallowColor = vec3(0.0, 0.5, 0.5);
    vec3 waterColor = mix(deepColor, shallowColor, fresnel);

    // 反射
    vec3 reflection = textureCube(uEnvMap, reflect(-viewDir, normal)).rgb;

    vec3 finalColor = mix(waterColor, reflection, fresnel * 0.6);

    gl_FragColor = vec4(finalColor, 0.9);
}

学习要点总结

入门级知识点

  1. 波浪函数：理解正弦波叠加原理
  2. 顶点动画：在顶点着色器中移动顶点
  3. 基础光照：漫反射和镜面反射

进阶级知识点

  1. Gerstner波：真实的波浪模拟算法
  2. 法线计算：数值微分计算表面法线
  3. Fresnel效应：视角相关的反射强度

高级知识点

  1. GPU泡沫模拟：基于波峰高度的泡沫生成
  2. 焦散效果：光线在水底的折射图案
  3. 性能优化：LOD水面细节控制

相关学习资源

结语

海面着色器展示了WebGL在物理模拟方面的强大能力。通过本示例的学习，你将掌握真实感水体渲染的核心技术，为创建更复杂的自然现象模拟打下基础。

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。