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 }
}

技术亮点

  1. 多层噪声系统:3层不同频率的噪声叠加,创造复杂的熔岩纹理
  2. 湍流模拟:使用sin函数组合模拟真实湍流效果
  3. 气泡粒子系统:动态生成的气泡增加熔岩的真实感
  4. 粘度物理模拟:粘度参数影响熔岩的流动特性
  5. 材质混合模式:使用AdditiveBlending增强发光效果

调试技巧

  1. 温度调节:温度高于0.8时熔岩更亮,低于0.5时更暗更稠密
  2. 粘度优化:低粘度创造更流动的效果,高粘度创造更厚重的效果
  3. 气泡密度:可减少气泡数量提升性能
  4. 颜色调试:可通过修改getLavaType函数调整熔岩颜色

扩展方向

  1. 地形融合:添加地形模型与熔岩效果融合
  2. 热气效果:添加热气波纹效果增强真实感
  3. 焦化效果:添加熔岩冷却后的焦化纹理
  4. 交互式熔岩:添加鼠标点击产生新的熔岩流

本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。