WebGL 实时图像特效 - 从 Shader 基础到生产应用
WebGL 图像处理基础 - 利用 GPU 并行计算
WebGL 是浏览器中直接访问 GPU 的底层图形 API，可以实现远超 CSS 滤镜和 Canvas 2D 的高性能图像处理效果。通过着色器 (Shader) 编程，可以在 GPU 上并行处理每个像素，实现实时的复杂视觉效果。
WebGL 图像处理的优势:
- GPU 并行计算: 数百万像素同时处理，比 CPU 快 10-100 倍
- 实时处理: 60fps 的实时滤镜和效果
- 自定义着色器: 可以实现任何数学上可描述的视觉效果
- 多通道处理: 通过帧缓冲区 (Framebuffer) 实现多步骤效果链
与其他技术的对比:
- CSS filter: 简单易用但效果有限，无法自定义算法
- Canvas 2D: 灵活但在 CPU 上运行，大图像处理慢
- WebGL: 最强大但学习曲线陡峭，需要理解 GPU 编程模型
- WebGPU: WebGL 的继任者，更现代的 API 设计，但浏览器支持尚在普及中
典型应用场景:
- 实时图像滤镜 (Instagram 风格)
- 图像变形和扭曲效果
- 粒子系统和生成艺术
- 图像混合和合成
- 色彩空间转换和色调映射
WebGL 初始设置 - 纹理渲染的最小配置
WebGL 图像处理的核心是片段着色器 (Fragment Shader)。它是一段在 GPU 上为每个像素并行执行的 GLSL 程序。
基本渲染管线:
- 将图像作为纹理 (Texture) 上传到 GPU
- 绘制一个覆盖整个画布的矩形 (两个三角形)
- 顶点着色器传递纹理坐标
- 片段着色器对每个像素执行自定义处理
- 处理结果输出到画布或帧缓冲区
最简片段着色器 (直通):
precision mediump float;uniform sampler2D u_image;varying vec2 v_texCoord;void main() { gl_FragColor = texture2D(u_image, v_texCoord);}
关键概念:
sampler2D: 纹理采样器，用于从图像纹理中读取像素texture2D(): 在指定坐标处采样纹理颜色v_texCoord: 当前像素的纹理坐标 (0.0 到 1.0)gl_FragColor: 输出的像素颜色 (RGBA，每个分量 0.0 到 1.0)
JavaScript 端的设置:
需要创建 WebGL 上下文、编译着色器、创建程序、上传纹理、设置顶点缓冲区、绑定 uniform 变量，最后调用 drawArrays 渲染。虽然样板代码较多，但核心逻辑在着色器中。
色彩校正特效 - 亮度、对比度与饱和度调整
通过修改片段着色器中的颜色计算，可以实现各种图像滤镜效果。
亮度调整:
vec4 color = texture2D(u_image, v_texCoord);gl_FragColor = vec4(color.rgb + u_brightness, color.a);
对比度调整:
vec4 color = texture2D(u_image, v_texCoord);gl_FragColor = vec4((color.rgb - 0.5) * u_contrast + 0.5, color.a);
灰度转换:
vec4 color = texture2D(u_image, v_texCoord);float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));gl_FragColor = vec4(vec3(gray), color.a);
色调分离 (Posterize):
float levels = 4.0;vec4 color = texture2D(u_image, v_texCoord);gl_FragColor = vec4(floor(color.rgb * levels) / levels, color.a);
反色:
vec4 color = texture2D(u_image, v_texCoord);gl_FragColor = vec4(1.0 - color.rgb, color.a);
棕褐色调 (Sepia):
vec4 color = texture2D(u_image, v_texCoord);float r = dot(color.rgb, vec3(0.393, 0.769, 0.189));float g = dot(color.rgb, vec3(0.349, 0.686, 0.168));float b = dot(color.rgb, vec3(0.272, 0.534, 0.131));gl_FragColor = vec4(r, g, b, color.a);
这些基础滤镜可以组合使用，通过 uniform 变量控制参数实现实时交互调整。
模糊特效 - 高效高斯模糊实现
卷积核 (Convolution Kernel) 是图像处理中的基础技术，通过采样周围像素实现模糊、锐化、边缘检测等效果。
卷积原理:
对每个像素，采样其周围 3x3 (或 5x5) 区域的像素，将每个采样值乘以对应的权重 (核矩阵)，求和得到输出值。
高斯模糊核 (3x3):
float kernel[9];kernel[0] = 1.0/16.0; kernel[1] = 2.0/16.0; kernel[2] = 1.0/16.0;kernel[3] = 2.0/16.0; kernel[4] = 4.0/16.0; kernel[5] = 2.0/16.0;kernel[6] = 1.0/16.0; kernel[7] = 2.0/16.0; kernel[8] = 1.0/16.0;
锐化核:
kernel[0] = 0.0; kernel[1] = -1.0; kernel[2] = 0.0;kernel[3] = -1.0; kernel[4] = 5.0; kernel[5] = -1.0;kernel[6] = 0.0; kernel[7] = -1.0; kernel[8] = 0.0;
边缘检测 (Sobel):
使用水平和垂直两个核分别检测 x 和 y 方向的边缘，然后计算梯度幅值。
性能优化 - 分离卷积:
对于可分离的核 (如高斯模糊)，可以将 NxN 卷积分解为两次 1xN 卷积 (水平 + 垂直)。这将采样次数从 N² 减少到 2N，对大核尺寸的性能提升显著。需要使用帧缓冲区存储中间结果。
多通道处理:
通过帧缓冲区 (Framebuffer Object) 可以将一个着色器的输出作为下一个着色器的输入，实现效果链: 模糊 → 锐化 → 色彩调整。这是实现复杂效果的标准模式。
扭曲特效 - 通过 UV 坐标操作实现视觉效果
除了像素级滤镜，WebGL 还可以实现基于坐标变换的图像变形效果。
原理:
在片段着色器中，不直接使用当前像素的纹理坐标采样，而是对坐标进行数学变换后再采样。这实现了"从变形后的位置去源图像中取色"的效果。
漩涡效果 (Swirl):
vec2 center = vec2(0.5, 0.5);vec2 tc = v_texCoord - center;float dist = length(tc);float angle = u_strength * (1.0 - dist);tc = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * tc;gl_FragColor = texture2D(u_image, tc + center);
鱼眼效果 (Fisheye):
将纹理坐标从笛卡尔坐标转换为极坐标，对半径应用非线性变换 (如平方根)，再转回笛卡尔坐标。中心区域被放大，边缘被压缩。
波浪效果 (Wave):
vec2 tc = v_texCoord;tc.x += sin(tc.y * u_frequency + u_time) * u_amplitude;gl_FragColor = texture2D(u_image, tc);
通过 u_time uniform 变量驱动动画，实现持续波动的效果。
位移贴图 (Displacement Map):
使用第二张纹理作为位移贴图，其红绿通道的值决定采样坐标的偏移量。这可以实现任意复杂的变形效果，且变形模式可以通过更换位移贴图来改变。
性能优化与库的使用 - 生产环境的 WebGL 图像处理
在实际项目中使用 WebGL 图像效果时，需要考虑性能、兼容性和用户体验。
性能最佳实践:
- 纹理尺寸: 使用 2 的幂次方尺寸 (512、1024、2048) 获得最佳 GPU 性能
- 避免频繁上传: 纹理上传 (texImage2D) 是昂贵操作，尽量复用已上传的纹理
- 使用 requestAnimationFrame: 动画效果使用 rAF 而非 setInterval
- 减少 draw call: 合并可以一次渲染的操作
- 精度选择: 移动设备上使用
mediump而非highp可提升性能
兼容性处理:
- 检测 WebGL 支持:
canvas.getContext('webgl')返回 null 时提供回退方案 - 检测扩展支持: 某些效果需要 OES_texture_float 等扩展
- 移动设备限制: 最大纹理尺寸可能为 4096px，着色器复杂度有限制
库和框架:
- Three.js: 3D 库但也适合 2D 图像效果，提供后处理 (Post-processing) 管线
- PixiJS: 2D 渲染库，内置滤镜系统，API 友好
- gl-react: React 组件化的 WebGL 着色器
- Shadertoy: 在线着色器实验平台，可以找到大量效果参考
WebGPU 展望:
WebGPU 作为 WebGL 的继任者，提供更现代的 API、计算着色器支持和更好的性能。对于新项目，值得关注 WebGPU 的浏览器支持进展。但 WebGL 在可预见的未来仍将被广泛支持。