🎭 WebGL 魔法

图像扭曲 Three.js Distortion

使用 WebGL 和 Shader 技术创造出令人惊叹的图像扭曲效果，为你的网页带来前所未有的视觉冲击

交互演示

移动鼠标查看扭曲效果，使用下方控制面板调整参数

扭曲强度 0.5

波纹频率 3.0

动画速度 1.0

效果类型

多种扭曲效果供你选择，点击预览

波浪扭曲

经典的正弦波扭曲效果，适合创造流动感和韵律感

涟漪效果

从中心扩散的圆形波纹，模拟水面涟漪

噪声扭曲

使用 Perlin 噪声创造自然、有机的扭曲效果

漩涡效果

将图像围绕中心旋转扭曲，创造螺旋视觉

故障艺术

数字故障美学，色彩偏移与条纹效果

缩放模糊

从中心向外的放射状模糊效果

Shader 技术

图像扭曲效果的核心是 WebGL Shader。通过编写顶点着色器和片段着色器，我们可以在 GPU 上高效地处理每个像素，实现复杂的视觉效果。

顶点着色器处理几何变换
片段着色器处理颜色计算
Uniform 变量传递动态参数
纹理采样实现图像处理
GPU 并行计算确保高性能

// Fragment Shader 示例
uniform sampler2D uTexture;
uniform float uTime;
uniform float uDistortion;
varying vec2 vUv;

void main() {
  vec2 uv = vUv;
  
  // 波浪扭曲
  uv.x += sin(uv.y * 10.0 + uTime) 
        * uDistortion * 0.1;
  uv.y += cos(uv.x * 10.0 + uTime) 
        * uDistortion * 0.1;
  
  vec4 color = texture2D(uTexture, uv);
  
  gl_FragColor = color;
}