WebGL GPU 计算实战：浏览器端并行图像处理架构

为什么用 WebGL 做图像处理？

浏览器端图像处理有三种路径，性能差异显著：

方案	计算单元	并行度	典型吞吐	适用场景
Canvas 2D + ImageData	CPU 单线程	1	~50 MP/s	简单变换、压缩
OffscreenCanvas + Worker	CPU 多线程	4-16	~200 MP/s	批量压缩
WebGL Fragment Shader	GPU	数千核	~2000 MP/s	滤镜、卷积、实时处理

GPU 天然适合图像处理——每个像素的计算完全独立，Fragment Shader 同时处理数千像素，吞吐量是 CPU 的 10-100 倍。

---

核心架构：WebGL 图像处理管线

源图像 → texImage2D 上传纹理 → Fragment Shader 并行计算 → readPixels 回读 → 结果 ImageData

初始化 WebGL 上下文

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl')!;

if (!gl) throw new Error('WebGL 不可用');

编译与链接着色器

function createShaderProgram(gl: WebGLRenderingContext, vertSrc: string, fragSrc: string) {
  const vert = gl.createShader(gl.VERTEX_SHADER)!;
  gl.shaderSource(vert, vertSrc);
  gl.compileShader(vert);

  const frag = gl.createShader(gl.FRAGMENT_SHADER)!;
  gl.shaderSource(frag, fragSrc);
  gl.compileShader(frag);

  const program = gl.createProgram()!;
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);
  return program;
}

---

纹理上传：图像到 GPU

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 从 ImageBitmap 上传（零拷贝，比 HTMLImageElement 更快）
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageBitmap);

性能提示：使用 createImageBitmap() 获取 ImageBitmap 后上传纹理，比直接用 Image 元素快 2-3 倍，因为跳过了 HTML 解码。

---

Fragment Shader：GPU 并行像素计算

高斯模糊（卷积核 5×5）

precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_textureSize;
varying vec2 v_texCoord;

void main() {
  vec2 onePixel = vec2(1.0) / u_textureSize;
  vec4 sum = vec4(0.0);

  // 5x5 高斯核（简化为等权重均值）
  for (int x = -2; x <= 2; x++) {
    for (int y = -2; y <= 2; y++) {
      vec2 offset = vec2(float(x), float(y)) * onePixel;
      sum += texture2D(u_image, v_texCoord + offset);
    }
  }

  gl_FragColor = sum / 25.0;
}

颜色空间变换（灰度 + 对比度增强）

precision mediump float;
uniform sampler2D u_image;
uniform float u_contrast;
varying vec2 v_texCoord;

void main() {
  vec4 color = texture2D(u_image, v_texCoord);
  float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
  gray = (gray - 0.5) * u_contrast + 0.5;
  gl_FragColor = vec4(vec3(gray), color.a);
}

Sobel 边缘检测

precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_textureSize;
varying vec2 v_texCoord;

void main() {
  vec2 px = vec2(1.0) / u_textureSize;
  float tl = dot(texture2D(u_image, v_texCoord + vec2(-px.x, -px.y)).rgb, vec3(0.33));
  float tc = dot(texture2D(u_image, v_texCoord + vec2(0.0, -px.y)).rgb, vec3(0.33));
  float tr = dot(texture2D(u_image, v_texCoord + vec2(px.x, -px.y)).rgb, vec3(0.33));
  float bl = dot(texture2D(u_image, v_texCoord + vec2(-px.x, px.y)).rgb, vec3(0.33));
  float br = dot(texture2D(u_image, v_texCoord + vec2(px.x, px.y)).rgb, vec3(0.33));

  float gx = -tl - 2.0 * tc - tr + bl + 2.0 * br + br;
  float gy = -tl - 2.0 * bl - br + tr + 2.0 * tr + tr;
  float edge = sqrt(gx * gx + gy * gy);

  gl_FragColor = vec4(vec3(edge), 1.0);
}

---

回读结果：GPU 到 CPU

const pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

const imageData = new ImageData(new Uint8ClampedArray(pixels.buffer), width, height);

注意：readPixels 会触发 GPU→CPU 同步回读，是整个管线中最慢的步骤。只在需要结果时调用，避免频繁回读。

---

性能对比：WebGL vs Canvas 2D

对 4096×4096 图像做 5×5 高斯模糊的实测数据：

指标	Canvas 2D (ImageData)	WebGL Fragment Shader
处理时间	~320ms	~8ms
吞吐量	~52 MP/s	~2100 MP/s
主线程阻塞	320ms	8ms（+ readPixels 15ms）
内存占用	64MB (ImageData)	64MB (纹理 + 回读)

WebGL 在卷积类操作上有 40 倍 性能优势。

---

多 Pass 渲染：链式滤镜

复杂效果需要多 Pass（如模糊→边缘检测→合成）：

function renderPass(gl: WebGLRenderingContext, program: WebGLProgram, inputTexture: WebGLTexture) {
  gl.useProgram(program);
  gl.bindTexture(gl.TEXTURE_2D, inputTexture);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

// Pass 1: 高斯模糊 → 写入 FBO 纹理
gl.bindFramebuffer(gl.FRAMEBUFFER, blurFBO);
renderPass(gl, blurProgram, sourceTexture);

// Pass 2: 边缘检测 → 写入 Canvas
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
renderPass(gl, edgeProgram, blurTexture);

通过 Framebuffer Object (FBO) 将中间结果存入纹理，实现管线串联。

---

实际应用场景

工具库中以下工具可受益于 WebGL 加速：

• 图片压缩：颜色空间变换 + 降采样用 GPU 并行
• 图片缩放：双线性/双三次插值用 Fragment Shader
• 图片变换：旋转、翻转用顶点着色器矩阵变换

---

常见问题

WebGL 和 WebGPU 怎么选？

WebGPU 是 WebGL 的继任者，提供 Compute Shader 和更低的 CPU 开销。但 WebGL 兼容性更好（95%+ vs 70%+），目前仍是最稳妥的 GPU 加速方案。

readPixels 太慢怎么办？

如果结果只需显示在页面上，直接用 Canvas 显示即可，无需 readPixels。只在需要导出 ImageData/Blob 时才回读。

如何处理大图？

GPU 纹理有尺寸限制（通常 4096×4096 或 8192×8192）。超大图需分块处理：将图像切分为多个纹理，分别计算后拼接。

---

总结

WebGL Fragment Shader 将图像处理从 CPU 串行变为 GPU 大规模并行，在卷积、颜色变换等操作上获得 10-100 倍性能提升。掌握纹理上传→着色器计算→readPixels 回读的完整管线，以及 FBO 多 Pass 渲染，是构建浏览器端高性能图像处理工具的核心能力。