时空涟漪

Three.js 时空涟漪效果 | 三维可视化 / AI 提示词
📋 AI 提示词
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
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
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
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
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
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) }
}
技术亮点
- 时空扭曲:UV坐标的扭曲变换
- 引力波:距离相关的引力波传播
- 时间膨胀:指数衰减的时间膨胀
- 吸积盘:极坐标旋转的吸积盘
- 蓝色主题:#3366ff营造宇宙氛围
调试技巧
- 时空扭曲:影响UV坐标的扭曲程度
- 引力波强度:影响引力波的强度
- 时间膨胀:控制时间膨胀的程度
- 蓝色主题:适合宇宙效果
- 星光效果:高频星光效果
扩展方向
- 引力透镜:添加引力透镜效果
- 黑洞:添加黑洞模型
- 宇宙场景:添加宇宙背景
- 引力波探测:添加引力波探测可视化
- 时空穿越:添加时空穿越效果
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!