Three.js极光效果着色器 - 大气光学现象详解

极光效果预览

简介

本示例展示如何使用Three.js实现极光（Aurora）效果，模拟地球南北极地区的大气光学现象。通过多层噪声叠加和颜色渐变，创造出流动、变幻的极光效果。

在线演示地址 | 完整源代码

核心技术栈

技术 说明 难度等级
Three.js WebGL 3D渲染引擎 ⭐⭐⭐
ShaderMaterial 自定义着色器材质 ⭐⭐⭐
FBM噪声 分形布朗运动 ⭐⭐⭐⭐
颜色渐变 极光配色 ⭐⭐⭐
时间动画 流动效果 ⭐⭐⭐

算法原理解析

1. 极光颜色渐变

极光的颜色取决于大气中不同气体和高度：

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 极光典型颜色
vec3 auroraGreen = vec3(0.2, 0.9, 0.3);   // 绿色 - 氧原子
vec3 auroraBlue = vec3(0.2, 0.3, 0.9);   // 蓝色 - 氮分子
vec3 auroraRed = vec3(0.9, 0.2, 0.2);    // 红色 - 高层氧原子

// 基于高度的颜色混合
vec3 getAuroraColor(float altitude, float intensity) {
    vec3 color;

    if (altitude < 0.3) {
        color = auroraBlue;
    } else if (altitude < 0.6) {
        color = mix(auroraBlue, auroraGreen, (altitude - 0.3) / 0.3);
    } else {
        color = mix(auroraGreen, auroraRed, (altitude - 0.6) / 0.4);
    }

    return color * intensity;
}

2. 极光噪声动画

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
uniform float uTime;

// 多层FBM噪声
float auroraNoise(vec3 p) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 1.0;

    for (int i = 0; i < 6; i++) {
        value += amplitude * noise(p * frequency);
        amplitude *= 0.5;
        frequency *= 2.0;
    }

    return value;
}

void main() {
    vec2 uv = vUv;

    // 垂直方向的极光带
    float altitude = uv.y;

    // 噪声驱动的波动
    float wave1 = auroraNoise(vec3(uv.x * 3.0, uTime * 0.2, 0.0));
    float wave2 = auroraNoise(vec3(uv.x * 5.0 + 100.0, uTime * 0.3, 1.0));

    float waves = (wave1 + wave2) * 0.5;

    // 极光形状
    float aurora = smoothstep(0.2, 0.8, waves);
    aurora *= smoothstep(0.0, 0.3, altitude); // 底部边界
    aurora *= smoothstep(1.0, 0.5, altitude); // 顶部衰减

    // 颜色
    vec3 color = getAuroraColor(altitude, aurora);

    // 额外的闪烁
    float flicker = noise(vec3(uv.x * 10.0, uv.y * 5.0, uTime * 3.0));
    color *= (0.8 + 0.2 * flicker);

    gl_FragColor = vec4(color, aurora * 0.8);
}

3. 星空背景

GLSL
1
2
3
4
5
6
7
8
9
10
11
vec3 starfield(vec2 uv) {
    vec3 stars = vec3(0.0);

    float starNoise = random(uv * 500.0);
    if (starNoise > 0.98) {
        float brightness = (starNoise - 0.98) * 50.0;
        stars = vec3(brightness);
    }

    return stars;
}

学习要点

入门级知识点

  1. FBM噪声：叠加多层噪声创造复杂效果
  2. 颜色混合：基于位置和强度的颜色渐变
  3. 透明度控制：极光的半透明效果

进阶级知识点

  1. 多层波动：不同频率的波动叠加
  2. 闪烁效果：高频噪声创造闪烁
  3. 大气颜色：基于物理的极光颜色

高级知识点

  1. 体积极光：3D空间中的极光模拟
  2. 光线投射：大气散射效果
  3. 性能优化：噪声计算的优化

相关学习资源

结语

极光着色器展示了噪声函数在创造自然现象方面的强大能力。通过本示例的学习，你将掌握多层噪声叠加和颜色渐变的技巧，为创建更复杂的自然特效打下基础。

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