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

扭曲着色器效果预览

简介

本示例展示如何使用Three.js实现空间扭曲效果,创造类似透镜变形、空间漩涡等视觉效果。这是学习坐标变换和空间变形的经典案例。

在线演示地址 | 完整源代码


核心技术栈

技术 说明 难度等级
Three.js WebGL 3D渲染引擎 ⭐⭐⭐
ShaderMaterial 自定义着色器材质 ⭐⭐⭐
坐标变换 UV空间扭曲 ⭐⭐⭐
极坐标 漩涡效果 ⭐⭐⭐
波纹效果 振动传播 ⭐⭐⭐

算法原理解析

1. 圆柱形扭曲

GLSL
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;

    // 使用扭曲后的UV采样纹理
    vec4 color = texture2D(uTexture, twistedUv);

    gl_FragColor = color;
}

2. 波纹扭曲

GLSL
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. 漩涡效果

GLSL
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;
}

学习要点

入门级知识点

  1. 极坐标变换:直角坐标到极坐标的转换
  2. 角度旋转:基于角度的坐标旋转
  3. 衰减函数:效果随距离的衰减

进阶级知识点

  1. 复合扭曲:多种扭曲效果的组合
  2. 时间动画:动态的扭曲变化
  3. 纹理寻址:wrap和repeat模式

高级知识点

  1. 3D扭曲:体积空间变形
  2. 物理透镜:模拟真实透镜效果
  3. 性能优化:避免过度的纹理采样

相关学习资源


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