Three.js 瀑布效果着色器

提示词

PROMPT
1
创建一个瀑布效果着色器,包含瀑布流动、湍流、泡沫和冲击效果,支持下落速度和湍流强度调节。

效果描述

这是一个模拟瀑布的效果着色器,通过瀑布流动、湍流和泡沫效果创造逼真的瀑布视觉效果。

效果特性

  • 瀑布流动:垂直流动的瀑布效果
  • 湍流效果:湍流波动效果
  • 泡沫效果:动态的泡沫效果
  • 冲击效果:底部的冲击效果
  • 多层瀑布:多层瀑布叠加

参数调节

参数 默认值 范围 说明
下落速度 2.0 0.5-5.0 瀑布下落的速度
湍流强度 0.5 0.1-1.0 湍流的强度
泡沫强度 0.3 0.1-0.8 泡沫的强度
水面颜色 #4a90e2 - 水面的基础颜色

核心代码解析

瀑布流动函数

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
float waterfallFlow(vec2 uv, float time) {
    float flow = 0.0;
    
    // 创建多层瀑布效果
    for (int i = 0; i < 3; i++) {
        float layer = float(i) * 0.2;
        float speed = fallSpeed * (1.0 + layer * 0.5);
        
        // 垂直流动效果
        float verticalFlow = sin(uv.y * 20.0 - time * speed + layer * 3.14);
        
        // 水平波动
        float horizontalWave = sin(uv.x * 10.0 + time * speed * 0.5) * 0.3 + 0.7;
        
        flow += verticalFlow * horizontalWave * (1.0 - layer * 0.3);
    }
    
    return flow * 0.5 + 0.5;
}

湍流效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
float turbulenceEffect(vec2 uv, float time) {
    float turb = 0.0;
    
    for (int i = 0; i < 2; i++) {
        float frequency = float(i + 1) * 5.0;
        turb += sin(uv.x * frequency + time * 2.0) * 
               sin(uv.y * frequency + time * 2.0) * 0.1;
    }
    
    return turb * turbulence;
}

泡沫效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
float foamEffect(vec2 uv, float time) {
    float foam = 0.0;
    
    // 创建泡沫图案
    for (int i = 0; i < 4; i++) {
        float offset = float(i) * 0.5;
        foam += sin(uv.x * 15.0 + time * 3.0 + offset) * 
               sin(uv.y * 15.0 - time * 2.0 + offset) * 0.05;
    }
    
    return max(0.0, foam) * foamIntensity;
}

Uniforms

JAVASCRIPT
1
2
3
4
5
6
7
8
uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(_width, _height) },
    fallSpeed: { value: 2.0 },
    turbulence: { value: 0.5 },
    foamIntensity: { value: 0.3 },
    waterColor: { value: new THREE.Color(0x4a90e2) }
}

技术亮点

  1. 垂直流动:垂直方向的瀑布流动
  2. 湍流波动:湍流的波动效果
  3. 泡沫效果:动态的泡沫效果
  4. 冲击效果:底部的冲击高光
  5. 蓝色主题:#4a90e2营造水面氛围

调试技巧

  1. 下落速度:影响瀑布下落的速度
  2. 湍流强度:控制湍流的强度
  3. 泡沫强度:影响泡沫的强度
  4. 蓝色主题:适合水面效果
  5. 冲击效果:底部更亮

扩展方向

  1. 真实瀑布:使用瀑布纹理
  2. 山景场景:添加山景背景
  3. 水雾效果:添加水雾效果
  4. 瀑布声音:添加瀑布声音
  5. 峡谷场景:添加峡谷场景

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