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 是从 Web 浏览器访问 GPU (Graphics Processing Unit) 的 API。性能对比：对 1,920 × 1,080 图像应用高斯模糊，Canvas 2D API (CPU) 需 50-200ms，而 WebGL (GPU) 仅需 1-5ms。片段着色器用 GLSL (OpenGL Shading Language) 编写；WebGL 2.0 可使用 GLSL ES 3.0，支持整数运算与纹理数组等高级功能。
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 渲染。虽然样板代码较多，但核心逻辑在着色器中。
顶点着色器 (vertex shader)：attribute vec2 a_position; attribute vec2 a_texCoord;，输出 gl_Position。样板代码较多，实务中常用 twgl.js (WebGL 工具库，gzip 后 12KB) 或 regl 大幅精简。初始化：const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl2');。纹理上传时 gl.texImage2D 可直接传入 HTMLImageElement；WebGL 2.0 中 NPOT (Non-Power-Of-Two) 纹理也无限制；大图可用 gl.texSubImage2D 部分更新以提升内存效率。
色彩校正特效 - 亮度、对比度与饱和度调整
通过修改片段着色器中的颜色计算，可以实现各种图像滤镜效果。
亮度调整：
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 变量控制参数实现实时交互调整。
亮度 (Brightness) 调整：color.rgb + u_brightness。对比度 (Contrast) 调整：vec3 adjusted = (color.rgb - 0.5) * u_contrast + 0.5;。饱和度 (Saturation) 调整：将 RGB 与灰度值混合，float gray = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722)); vec3 adjusted = mix(vec3(gray), color.rgb, u_saturation);。组合这些效果即可实现 Instagram 风格滤镜。
模糊特效 - 高效高斯模糊实现
卷积核 (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) 可以将一个着色器的输出作为下一个着色器的输入，实现效果链：模糊 → 锐化 → 色彩调整。这是实现复杂效果的标准模式。
朴素实现：半径 r 的高斯模糊使用 (2r+1)x(2r+1) 卷积核。半径 10 时每像素需 441 次纹理采样，1,920 × 1,080 图像约 9 亿次。两趟可分离 (separable) 滤波：高斯核可分离为水平与垂直两趟，采样次数从 (2r+1)^2 降为 2*(2r+1)，半径 10 时 441 次减至 42 次。水平趟：uniform vec2 u_direction; for (int i = -RADIUS; i <= RADIUS; i++) { float weight = gaussian(float(i), u_sigma); sum += texture2D(u_image, v_texCoord + u_direction * float(i)) * weight; }，其中 u_direction = vec2(1.0/width, 0.0)。线性采样优化可用双线性过滤将相邻两样本合并为一次取样，半径 10 时实际仅需 11 次。Kawase blur 与 Dual blur 算法即应用此原理。
扭曲特效 - 通过 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):
使用第二张纹理作为位移贴图，其红绿通道的值决定采样坐标的偏移量。这可以实现任意复杂的变形效果，且变形模式可以通过更换位移贴图来改变。
扭曲 (Distortion) 效果通过数学变换纹理坐标 (UV) 实现。波纹 (Ripple)：uniform float u_amplitude; // 0.01 ~ 0.05、uniform float u_frequency; // 10.0 ~ 30.0，float dist = distance(uv, vec2(0.5)); uv += normalize(uv - vec2(0.5)) * sin(dist * u_frequency - u_time) * u_amplitude;。漩涡 (Swirl)：用 u_angle、u_radius、float factor = smoothstep(u_radius, 0.0, dist);。鱼眼 (Fisheye)：用 pow(dist, 2.0) 施加二次非线性畸变，并设置 gl_CLAMP_TO_EDGE 纹理环绕模式或将范围外处理为透明。
性能优化与库的使用 - 生产环境的 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 在可预见的未来仍将被广泛支持。
性能优化：移动设备最大纹理尺寸可能限制为 4,096 × 4,096，用 gl.getParameter(gl.MAX_TEXTURE_SIZE) 确认后按需缩小。FBO (Framebuffer Object) 重用：多趟效果中以 ping-pong 方式复用预先分配的帧缓冲。库选择：Three.js 的 EffectComposer 后处理管线强大；gpu.js 将 JavaScript 函数转为 GPU 内核。用 canvas.getContext('webgl2') || canvas.getContext('webgl') 检测支持，不支持时回退到 CSS 滤镜 filter: blur() brightness()。