Three.js 深海漩涡效果着色器

提示词

PROMPT
1
创建一个深海漩涡效果着色器，模拟深海中的漩涡流动，包含涡旋场、深海颜色映射和泡沫效果，支持涡旋强度和深度强度调节。

效果描述

这是一个模拟深海漩涡流动的效果着色器，通过极坐标变换和深度颜色映射创造逼真的深海漩涡视觉效果。

效果特性

  • 涡旋场效果：极坐标变换创造的旋转涡旋
  • 深海颜色映射：基于深度的颜色渐变
  • 泡沫效果：动态的白色泡沫纹理
  • 深度发光：深处的发光效果
  • PlaneGeometry：128x128高分辨率平面几何

参数调节

参数 默认值 范围 说明
涡旋强度 0.8 0.1-2.0 漩涡的旋转强度
深度强度 1.5 0.5-3.0 深度颜色变化的强度
流动速度 1.0 0.1-3.0 漩涡流动的速度
深海颜色 #3366ff - 深海的基础颜色

核心代码解析

涡旋场函数

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
vec2 vortexField(vec2 uv, float time) {
    vec2 center = vec2(0.5, 0.5);
    vec2 dir = uv - center;
    float dist = length(dir);
    float angle = atan(dir.y, dir.x);
    
    // 创建涡旋效果
    angle += sin(dist * 15.0 + time * flowSpeed) * vortexStrength;
    dist *= 1.0 + sin(angle * 5.0 + time * 2.0) * 0.2;
    
    return center + vec2(cos(angle), sin(angle)) * dist;
}

深海颜色映射

GLSL
1
2
3
4
5
6
7
8
9
10
11
vec3 deepSeaColor(float depth) {
    vec3 surfaceColor = vec3(0.0, 0.3, 0.6);   // 表面蓝色
    vec3 midColor = vec3(0.0, 0.1, 0.3);        // 中层蓝色
    vec3 deepColor = vec3(0.0, 0.05, 0.15);     // 深蓝色
    
    if (depth < 0.3) {
        return mix(surfaceColor, midColor, depth / 0.3);
    } else {
        return mix(midColor, deepColor, (depth - 0.3) / 0.7);
    }
}

泡沫效果

GLSL
1
2
3
4
float foamEffect(vec2 uv, float time) {
    float foam = sin(uv.x * 30.0 + time * 3.0) * sin(uv.y * 30.0 + time * 3.0);
    return max(0.0, foam) * 0.1;
}

Uniforms

JAVASCRIPT
1
2
3
4
5
6
7
8
uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(_width, _height) },
    vortexStrength: { value: 0.8 },
    depthIntensity: { value: 1.5 },
    flowSpeed: { value: 1.0 },
    deepColor: { value: new THREE.Color(0x3366ff) }
}

技术亮点

  1. 极坐标变换：使用atan和length实现极坐标转换
  2. 深度颜色渐变：三层颜色mix实现深度感知
  3. 涡旋扭曲：角度和距离的同时变换
  4. 高分辨率平面：128x128细分保证细节
  5. 深色背景：#001122背景营造深海氛围

调试技巧

  1. 涡旋强度：影响旋转角度和距离变化
  2. 深度强度：控制颜色渐变的速度
  3. 流动速度：影响所有动画的时间参数
  4. 分辨率：高分辨率平面需要更多计算资源
  5. 颜色选择：深蓝色适合深海效果

扩展方向

  1. 海底地形：添加海底山脉和峡谷
  2. 海洋生物：添加鱼类和海洋生物
  3. 上升流：添加从深部上升的水流
  4. 声纳效果：添加声纳扫描效果
  5. 深海探险：添加潜水艇视角

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