Three.js 引力波效果着色器 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
创建一个模拟引力波效果着色器,包含时空扭曲和涟漪效果,支持波幅、频率参数调节,提供三种引力类型可选。

🖼️ 效果预览

引力波效果着色器

🎮 案例演示

立即体验


效果描述

这是一个模拟引力波(时空涟漪)的视觉效果,通过多层波动和时空扭曲效果创造宇宙尺度的引力波动画。

效果特性

  • 多层引力波:3层不同频率的引力波叠加
  • 时空扭曲:模拟引力对时空的弯曲效果
  • 涟漪传播:动态的涟漪从中心向外扩散
  • 三种引力类型:黑洞合并、中子星合并、宇宙膨胀
  • 脉冲动画:引力波的脉动效果

参数调节

参数 默认值 范围 说明
波幅 0.8 0.1-1.2 引力波的幅度
频率 0.7 0.1-1.0 引力波的频率
时空扭曲 0.6 0.1-1.0 时空扭曲的强度
发光强度 1.2 0.1-1.8 引力波发光强度
涟漪效果 0.8 0.1-0.9 涟漪效果的剧烈程度
显示涟漪 true boolean 是否显示涟漪效果

核心代码解析

顶点着色器

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uniform float uTime;
uniform float uWaveAmplitude;
uniform float uWaveFrequency;
uniform float uRippleEffect;

void main() {
    vUv = uv;
    vPosition = position;
    vNormal = normal;

    // 引力波幅度效果
    float amplitude = sin(position.x * 3.0 + uTime * uWaveAmplitude) *
                     cos(position.y * 4.0 + uTime * uWaveAmplitude * 0.8) *
                     sin(position.z * 3.0 + uTime * uWaveAmplitude * 0.6);

    // 波频率
    float frequency = sin(position.x * 5.0 + uTime * uWaveFrequency * 2.0) *
                     cos(position.z * 5.0 + uTime * uWaveFrequency * 2.0);

    // 涟漪效果
    float ripple = sin(position.x * uRippleEffect * 6.0) *
                  cos(position.y * uRippleEffect * 8.0);

    vec3 newPosition = position + normal * (amplitude + frequency * 0.5 + ripple * 0.3) * 0.15;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

引力波效果

glsl
1
2
3
4
5
6
7
8
9
10
11
float gravitationalWave(vec2 uv, float amplitude) {
    float waveField = 0.0;

    // 多层引力波
    waveField += sin(uv.x * 4.0 + uTime * 0.3) *
                cos(uv.y * 6.0 + uTime * 0.5);
    waveField += sin(uv.x * 6.0 + uTime * 0.7) *
                cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
    waveField += sin(uv.x * 8.0 + uTime * 1.1) *
                cos(uv.y * 10.0 + uTime * 1.3) * 0.4;

    return waveField * amplitude;
}

时空扭曲效果

glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float spaceDistortion(vec2 uv, float distortion) {
    float distortionField = 0.0;
    for(int i = 0; i < 20; i++) {
        vec2 distortionPos = vec2(
            noise(vec2(float(i) * 0.123, 0.456)),
            noise(vec2(float(i) * 0.456, 0.789))
        );
        float dist = distance(uv, distortionPos);
        float distortionSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.04 + 0.02;
        float distortionLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
        float distortionIntensity = sin(distortionLife) * 0.7 + 0.3;
        distortionField += exp(-dist * 45.0) * distortionIntensity * distortion;
    }
    return distortionField;
}

Uniforms

javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
    uTime: { value: 0.0 },
    uWaveAmplitude: { value: 0.8 },
    uWaveFrequency: { value: 0.7 },
    uSpaceDistortion: { value: 0.6 },
    uGlowIntensity: { value: 1.2 },
    uRippleEffect: { value: 0.8 },
    uGravityType: { value: 0 },
    uShowRipples: { value: true }
}

技术亮点

  1. 引力波模拟:多层正弦波叠加模拟引力波的传播
  2. 时空扭曲:使用噪声函数创造时空弯曲效果
  3. 涟漪传播:动态涟漪从多个点向外扩散
  4. 脉冲调制:sin函数创造脉动效果
  5. 加法混合:AdditiveBlending创造发光效果

调试技巧

  1. 波幅调节:高波幅创造更明显的引力波效果
  2. 频率调节:高频创造更密集的波纹
  3. 扭曲强度:适当扭曲强度创造真实时空弯曲感
  4. 涟漪数量:减少涟漪计算点可提升性能
  5. 颜色选择:不同引力类型适合不同宇宙场景

扩展方向

  1. 双黑洞系统:实现两个黑洞相互绕转的引力波
  2. 引力波探测:模拟LIGO引力波探测器的数据可视化
  3. 宇宙演化:添加宇宙膨胀背景增强效果
  4. 交互式引力波:鼠标拖动创造局部引力波
  5. 引力透镜:添加引力透镜效果增强真实感

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