Three.js 时空涟漪效果着色器

提示词

PROMPT
1
创建一个时空涟漪效果着色器,包含时空扭曲、引力波、时间膨胀、黑洞吸积盘和时空涟漪效果,支持时空扭曲和引力波强度调节。

效果描述

这是一个模拟时空涟漪的效果着色器,通过时空扭曲、引力波和时间膨胀效果创造宇宙时空涟漪的视觉效果。

效果特性

  • 时空扭曲:UV坐标的扭曲效果
  • 引力波效果:引力波传播效果
  • 时间膨胀:时间膨胀区域效果
  • 黑洞吸积盘:旋转的吸积盘效果
  • 时空涟漪:多个时空涟漪源
  • 星光效果:背景星光效果

参数调节

参数 默认值 范围 说明
时空扭曲 1.0 0.1-2.0 时空扭曲的程度
引力波强度 0.7 0.1-1.5 引力波的强度
时间膨胀 1.2 0.5-2.0 时间膨胀的程度
时空颜色 #3366ff - 时空效果的基础颜色

核心代码解析

时空扭曲函数

GLSL
1
2
3
4
5
6
7
8
9
10
11
vec2 spacetimeDistortion(vec2 uv, float time) {
    vec2 distortedUV = uv;
    
    // 创建时空扭曲效果
    float distortion = spacetimeWarp * 0.1;
    
    distortedUV.x += sin(uv.y * 10.0 + time * 2.0) * distortion;
    distortedUV.y += cos(uv.x * 10.0 + time * 1.5) * distortion;
    
    return distortedUV;
}

引力波效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
float gravitationalWaveEffect(vec2 uv, float time) {
    float wave = 0.0;
    
    // 创建引力波传播
    for (int i = 0; i < 3; i++) {
        float frequency = 5.0 + float(i) * 2.0;
        float amplitude = 0.1 - float(i) * 0.03;
        
        wave += sin(distance(uv, vec2(0.5)) * frequency - time * 3.0) * amplitude;
    }
    
    return wave * gravitationalWave;
}

时间膨胀效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
float timeDilationEffect(vec2 uv, float time, float dilation) {
    float dilationEffect = 0.0;
    
    // 创建时间膨胀区域
    vec2 center = vec2(0.5, 0.5);
    float dist = distance(uv, center);
    
    dilationEffect = sin(dist * 20.0 - time * dilation * 5.0) * exp(-dist * 8.0);
    
    return dilationEffect;
}

黑洞吸积盘效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
float accretionDisk(vec2 uv, float time) {
    float disk = 0.0;
    
    // 创建吸积盘旋转效果
    vec2 center = vec2(0.5, 0.5);
    float angle = atan(uv.y - center.y, uv.x - center.x);
    float radius = distance(uv, center);
    
    disk = sin(angle * 10.0 + time * 4.0) * exp(-radius * 15.0) * 0.3;
    
    return disk;
}

时空涟漪效果

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
float spacetimeRipple(vec2 uv, float time) {
    float ripple = 0.0;
    
    // 创建时空涟漪
    for (int i = 0; i < 4; i++) {
        float seed = float(i) * 67.890;
        vec2 source = vec2(
            fract(sin(seed * 78.233) * 43758.5453),
            fract(sin(seed * 12.9898) * 43758.5453)
        );
        
        float dist = distance(uv, source);
        float wave = sin(dist * 25.0 - time * 6.0) * exp(-dist * 12.0);
        
        ripple += wave * 0.2;
    }
    
    return ripple;
}

Uniforms

JAVASCRIPT
1
2
3
4
5
6
7
8
uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(_width, _height) },
    spacetimeWarp: { value: 1.0 },
    gravitationalWave: { value: 0.7 },
    timeDilation: { value: 1.2 },
    spacetimeColor: { value: new THREE.Color(0x3366ff) }
}

技术亮点

  1. 时空扭曲:UV坐标的扭曲变换
  2. 引力波:距离相关的引力波传播
  3. 时间膨胀:指数衰减的时间膨胀
  4. 吸积盘:极坐标旋转的吸积盘
  5. 蓝色主题:#3366ff营造宇宙氛围

调试技巧

  1. 时空扭曲:影响UV坐标的扭曲程度
  2. 引力波强度:影响引力波的强度
  3. 时间膨胀:控制时间膨胀的程度
  4. 蓝色主题:适合宇宙效果
  5. 星光效果:高频星光效果

扩展方向

  1. 引力透镜:添加引力透镜效果
  2. 黑洞:添加黑洞模型
  3. 宇宙场景:添加宇宙背景
  4. 引力波探测:添加引力波探测可视化
  5. 时空穿越:添加时空穿越效果

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