
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 }
}
技术亮点
- 引力波模拟:多层正弦波叠加模拟引力波的传播
- 时空扭曲:使用噪声函数创造时空弯曲效果
- 涟漪传播:动态涟漪从多个点向外扩散
- 脉冲调制:sin函数创造脉动效果
- 加法混合:AdditiveBlending创造发光效果
调试技巧
- 波幅调节:高波幅创造更明显的引力波效果
- 频率调节:高频创造更密集的波纹
- 扭曲强度:适当扭曲强度创造真实时空弯曲感
- 涟漪数量:减少涟漪计算点可提升性能
- 颜色选择:不同引力类型适合不同宇宙场景
扩展方向
- 双黑洞系统:实现两个黑洞相互绕转的引力波
- 引力波探测:模拟LIGO引力波探测器的数据可视化
- 宇宙演化:添加宇宙膨胀背景增强效果
- 交互式引力波:鼠标拖动创造局部引力波
- 引力透镜:添加引力透镜效果增强真实感
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







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