熔岩流动效果

Three.js 熔岩流动效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个熔岩流动效果着色器,使用噪声函数和湍流效果模拟高温熔岩,支持温度、流动速度、粘度等参数调节,提供三种熔岩类型可选。
🖼️ 效果预览
🎮 案例演示
效果描述
这是一个基于WebGL的实时熔岩流动效果渲染,通过多层噪声和湍流效果模拟真实的熔岩流动,支持丰富的参数调节和三种熔岩类型。
效果特性
- 多层噪声叠加:多层不同频率的噪声叠加创造复杂纹理
- 气泡效果:动态生成和消融的气泡效果
- 温度系统:可调节的温度参数影响熔岩颜色和发光
- 粘度模拟:不同粘度影响熔岩流动特性
- 三种熔岩类型:红色、橙色、黄色熔岩可选
参数调节
| 参数 | 默认值 | 范围 | 说明 |
|---|---|---|---|
| 温度 | 0.8 | 0.1-1.2 | 熔岩的温度,影响亮度和颜色 |
| 流动速度 | 0.6 | 0.1-1.0 | 熔岩流动的速度 |
| 粘度 | 0.7 | 0.1-1.0 | 熔岩的粘度,影响流动特性 |
| 发光强度 | 1.2 | 0.1-2.0 | 熔岩发光的强度 |
| 湍流强度 | 0.8 | 0.1-1.2 | 湍流效果的剧烈程度 |
| 显示气泡 | true | boolean | 是否显示气泡效果 |
核心代码解析
顶点着色器
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
uniform float uTime;
uniform float uFlowSpeed;
uniform float uViscosity;
uniform float uTurbulence;
void main() {
vUv = uv;
vPosition = position;
vNormal = normal;
// 熔岩流动效果
float flow = sin(position.x * 3.0 + uTime * uFlowSpeed) *
cos(position.y * 4.0 + uTime * uFlowSpeed * 0.8) *
sin(position.z * 3.0 + uTime * uFlowSpeed * 0.6);
// 湍流效果
float turbulence = sin(position.x * 6.0 + uTime * uTurbulence * 2.0) *
cos(position.y * 8.0 + uTime * uTurbulence * 1.5);
// 粘度影响
float viscosityEffect = mix(0.1, 0.3, uViscosity);
vec3 newPosition = position + normal * (flow + turbulence) * viscosityEffect;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
熔岩效果函数
glsl
1
2
3
4
5
6
7
8
9
10
11
float lava(vec2 uv, float temperature) {
float lavaField = 0.0;
// 多层熔岩
lavaField += sin(uv.x * 8.0 + uTime * 0.4) *
cos(uv.y * 10.0 + uTime * 0.6);
lavaField += sin(uv.x * 12.0 + uTime * 0.8) *
cos(uv.y * 14.0 + uTime * 1.0) * 0.7;
lavaField += sin(uv.x * 16.0 + uTime * 1.2) *
cos(uv.y * 18.0 + uTime * 1.4) * 0.4;
return lavaField * temperature;
}
气泡效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
float bubbles(vec2 uv, float density) {
if(!uShowBubbles) return 0.0;
float bubbleField = 0.0;
for(int i = 0; i < 20; i++) {
vec2 bubblePos = vec2(
noise(vec2(float(i) * 0.123, 0.456)),
noise(vec2(float(i) * 0.456, 0.789))
);
float dist = distance(uv, bubblePos);
float bubbleSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.1 + 0.05;
float bubbleLife = mod(uTime * 0.5 + float(i) * 3.0, 6.28);
float bubbleIntensity = sin(bubbleLife) * 0.5 + 0.5;
bubbleField += exp(-dist * 50.0) * bubbleIntensity * density;
}
return bubbleField;
}
Uniforms
javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
uTime: { value: 0.0 },
uTemperature: { value: 0.8 },
uFlowSpeed: { value: 0.6 },
uViscosity: { value: 0.7 },
uGlowIntensity: { value: 1.2 },
uTurbulence: { value: 0.8 },
uLavaType: { value: 0 },
uShowBubbles: { value: true }
}
技术亮点
- 多层噪声系统:3层不同频率的噪声叠加,创造复杂的熔岩纹理
- 湍流模拟:使用sin函数组合模拟真实湍流效果
- 气泡粒子系统:动态生成的气泡增加熔岩的真实感
- 粘度物理模拟:粘度参数影响熔岩的流动特性
- 材质混合模式:使用AdditiveBlending增强发光效果
调试技巧
- 温度调节:温度高于0.8时熔岩更亮,低于0.5时更暗更稠密
- 粘度优化:低粘度创造更流动的效果,高粘度创造更厚重的效果
- 气泡密度:可减少气泡数量提升性能
- 颜色调试:可通过修改getLavaType函数调整熔岩颜色
扩展方向
- 地形融合:添加地形模型与熔岩效果融合
- 热气效果:添加热气波纹效果增强真实感
- 焦化效果:添加熔岩冷却后的焦化纹理
- 交互式熔岩:添加鼠标点击产生新的熔岩流
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!