Three.js 熔岩瀑布效果着色器

提示词

PROMPT
1
创建一个熔岩瀑布效果着色器,包含熔岩流动、热浪、岩浆气泡、水火混合和蒸汽效果,支持熔岩强度和水火混合调节。

效果描述

这是一个模拟熔岩瀑布的效果着色器,通过熔岩流动、热浪和蒸汽效果创造壮观的熔岩瀑布视觉效果。

效果特性

  • 熔岩流动:垂直流动的熔岩效果
  • 热浪效果:热浪波动效果
  • 岩浆气泡:动态的岩浆气泡
  • 水火混合:水火交界面的混合效果
  • 蒸汽效果:上升的蒸汽效果
  • 熔岩发光:熔岩的发光效果

参数调节

参数 默认值 范围 说明
熔岩强度 2.0 0.5-3.0 熔岩效果的强度
水火混合 0.5 0.1-1.0 水火混合的程度
热流强度 0.8 0.1-1.5 热浪的强度
熔岩颜色 #ff5500 - 熔岩的基础颜色

核心代码解析

熔岩流动效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}

热浪效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
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;
}

岩浆气泡效果

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

水火混合效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
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

JAVASCRIPT
1
2
3
4
5
6
7
8
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) }
}

技术亮点

  1. 熔岩流动:垂直方向的熔岩流动
  2. 热浪波动:热浪的波动效果
  3. 岩浆气泡:动态的岩浆气泡
  4. 橙色主题:#ff5500营造熔岩氛围
  5. 发光效果:熔岩的发光效果

调试技巧

  1. 熔岩强度:影响整体效果的强度
  2. 水火混合:控制水火混合的程度
  3. 热流强度:影响热浪的强度
  4. 橙色主题:适合熔岩效果
  5. 发光强度:需要较高的发光强度

扩展方向

  1. 真实熔岩:使用熔岩纹理
  2. 火山场景:添加火山背景
  3. 岩浆河流:添加岩浆河流
  4. 火焰效果:增强火焰效果
  5. 火山爆发:添加火山爆发效果

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