Three.js 熔岩瀑布效果着色器
提示词
创建一个熔岩瀑布效果着色器,包含熔岩流动、热浪、岩浆气泡、水火混合和蒸汽效果,支持熔岩强度和水火混合调节。
效果描述
这是一个模拟熔岩瀑布的效果着色器,通过熔岩流动、热浪和蒸汽效果创造壮观的熔岩瀑布视觉效果。
效果特性
- 熔岩流动:垂直流动的熔岩效果
- 热浪效果:热浪波动效果
- 岩浆气泡:动态的岩浆气泡
- 水火混合:水火交界面的混合效果
- 蒸汽效果:上升的蒸汽效果
- 熔岩发光:熔岩的发光效果
参数调节
| 参数 |
默认值 |
范围 |
说明 |
| 熔岩强度 |
2.0 |
0.5-3.0 |
熔岩效果的强度 |
| 水火混合 |
0.5 |
0.1-1.0 |
水火混合的程度 |
| 热流强度 |
0.8 |
0.1-1.5 |
热浪的强度 |
| 熔岩颜色 |
#ff5500 |
- |
熔岩的基础颜色 |
核心代码解析
熔岩流动效果
float lavaFlow(vec2 uv, float time) {
float flow = 0.0;
for (int i = 0; i < 3; i++) {
float layer = float(i) * 0.3;
float speed = 1.0 + layer * 0.8;
flow += sin(uv.y * 15.0 - time * speed + layer) * 0.2;
}
return flow * 0.5 + 0.5;
}
热浪效果
float thermalWave(vec2 uv, float time) {
float wave = 0.0;
for (int i = 0; i < 2; i++) {
float frequency = 6.0 + float(i) * 3.0;
wave += sin(uv.x * frequency + time * 2.0) *
cos(uv.y * frequency + time * 1.5) * 0.15;
}
return wave * thermalFlow;
}
岩浆气泡效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
float magmaBubbles(vec2 uv, float time) {
float bubbles = 0.0;
for (int i = 0; i < 5; i++) {
float seed = float(i) * 45.678;
vec2 bubblePos = vec2(
fract(sin(seed * 78.233) * 43758.5453),
fract(sin(seed * 12.9898) * 43758.5453)
);
float dist = distance(uv, bubblePos);
float size = 0.05 + fract(seed * 34.567) * 0.1;
bubbles += smoothstep(size, 0.0, dist) * sin(time * 3.0 + seed) * 0.2;
}
return bubbles;
}
水火混合效果
float waterLavaMix(vec2 uv, float time, float mixRatio) {
float mixEffect = 0.0;
for (int i = 0; i < 2; i++) {
float phase = float(i) * 1.57;
mixEffect += sin(uv.x * 12.0 + time * 1.5 + phase) *
cos(uv.y * 12.0 + time * 1.2 + phase) * 0.1;
}
return mixEffect * mixRatio;
}
uniforms: {
time: { value: 0 },
resolution: { value: new THREE.Vector2(_width, _height) },
lavaIntensity: { value: 2.0 },
waterMix: { value: 0.5 },
thermalFlow: { value: 0.8 },
lavaColor: { value: new THREE.Color(0xff5500) }
}
技术亮点
- 熔岩流动:垂直方向的熔岩流动
- 热浪波动:热浪的波动效果
- 岩浆气泡:动态的岩浆气泡
- 橙色主题:#ff5500营造熔岩氛围
- 发光效果:熔岩的发光效果
调试技巧
- 熔岩强度:影响整体效果的强度
- 水火混合:控制水火混合的程度
- 热流强度:影响热浪的强度
- 橙色主题:适合熔岩效果
- 发光强度:需要较高的发光强度
扩展方向
- 真实熔岩:使用熔岩纹理
- 火山场景:添加火山背景
- 岩浆河流:添加岩浆河流
- 火焰效果:增强火焰效果
- 火山爆发:添加火山爆发效果
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!