Three.js扭曲着色器 - 空间变形与波纹效果详解

简介
本示例展示如何使用Three.js实现空间扭曲效果,创造类似透镜变形、空间漩涡等视觉效果。这是学习坐标变换和空间变形的经典案例。
在线演示地址 | 完整源代码
核心技术栈
| 技术 |
说明 |
难度等级 |
| Three.js |
WebGL 3D渲染引擎 |
⭐⭐⭐ |
| ShaderMaterial |
自定义着色器材质 |
⭐⭐⭐ |
| 坐标变换 |
UV空间扭曲 |
⭐⭐⭐ |
| 极坐标 |
漩涡效果 |
⭐⭐⭐ |
| 波纹效果 |
振动传播 |
⭐⭐⭐ |
算法原理解析
1. 圆柱形扭曲
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
uniform float uTwist;
uniform float uTime;
varying vec2 vUv;
void main() {
vec2 center = vec2(0.5);
vec2 offset = vUv - center;
float radius = length(offset);
float angle = atan(offset.y, offset.x);
float twistAmount = uTwist * (1.0 - radius);
angle += twistAmount + uTime * 0.5;
vec2 twistedUv = center + vec2(cos(angle), sin(angle)) * radius;
vec4 color = texture2D(uTexture, twistedUv);
gl_FragColor = color;
}
2. 波纹扭曲
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
float ripple(vec2 uv, vec2 center, float time) {
float dist = length(uv - center);
float ripple = sin(dist * 20.0 - time * 5.0);
ripple *= exp(-dist * 3.0);
return ripple * 0.05;
}
void main() {
vec2 uv = vUv;
float rippleEffect = ripple(uv, vec2(0.5), uTime);
vec2 dir = normalize(uv - vec2(0.5));
vec2 twistedUv = uv + dir * rippleEffect;
vec4 color = texture2D(uTexture, twistedUv);
gl_FragColor = color;
}
3. 漩涡效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
vec2 vortex(vec2 uv, vec2 center, float radius, float strength) {
vec2 offset = uv - center;
float dist = length(offset);
if (dist < radius) {
float percent = (radius - dist) / radius;
float theta = percent * percent * strength * 8.0;
float sinTheta = sin(theta);
float cosTheta = cos(theta);
offset = vec2(
offset.x * cosTheta - offset.y * sinTheta,
offset.x * sinTheta + offset.y * cosTheta
);
}
return center + offset;
}
学习要点
入门级知识点
- 极坐标变换:直角坐标到极坐标的转换
- 角度旋转:基于角度的坐标旋转
- 衰减函数:效果随距离的衰减
进阶级知识点
- 复合扭曲:多种扭曲效果的组合
- 时间动画:动态的扭曲变化
- 纹理寻址:wrap和repeat模式
高级知识点
- 3D扭曲:体积空间变形
- 物理透镜:模拟真实透镜效果
- 性能优化:避免过度的纹理采样
相关学习资源
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!