Three.js 瀑布效果着色器
提示词
创建一个瀑布效果着色器,包含瀑布流动、湍流、泡沫和冲击效果,支持下落速度和湍流强度调节。
效果描述
这是一个模拟瀑布的效果着色器,通过瀑布流动、湍流和泡沫效果创造逼真的瀑布视觉效果。
效果特性
- 瀑布流动:垂直流动的瀑布效果
- 湍流效果:湍流波动效果
- 泡沫效果:动态的泡沫效果
- 冲击效果:底部的冲击效果
- 多层瀑布:多层瀑布叠加
参数调节
| 参数 |
默认值 |
范围 |
说明 |
| 下落速度 |
2.0 |
0.5-5.0 |
瀑布下落的速度 |
| 湍流强度 |
0.5 |
0.1-1.0 |
湍流的强度 |
| 泡沫强度 |
0.3 |
0.1-0.8 |
泡沫的强度 |
| 水面颜色 |
#4a90e2 |
- |
水面的基础颜色 |
核心代码解析
瀑布流动函数
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;
}
湍流效果
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;
}
泡沫效果
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: {
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) }
}
技术亮点
- 垂直流动:垂直方向的瀑布流动
- 湍流波动:湍流的波动效果
- 泡沫效果:动态的泡沫效果
- 冲击效果:底部的冲击高光
- 蓝色主题:#4a90e2营造水面氛围
调试技巧
- 下落速度:影响瀑布下落的速度
- 湍流强度:控制湍流的强度
- 泡沫强度:影响泡沫的强度
- 蓝色主题:适合水面效果
- 冲击效果:底部更亮
扩展方向
- 真实瀑布:使用瀑布纹理
- 山景场景:添加山景背景
- 水雾效果:添加水雾效果
- 瀑布声音:添加瀑布声音
- 峡谷场景:添加峡谷场景
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!