（十七）WebGL中图像处理的初识

关键要点

WebGL 是一种在浏览器中使用 GPU 处理 2D 和 3D 图形的技术，适合高效的图像处理。
通过片段着色器（fragment shader）可以对图像的每个像素进行操作，如模糊、颜色调整等。
实际应用包括实时照片编辑、视频流滤镜和性能关键的图形应用。
令人惊讶的是，WebGL 允许在浏览器中实现接近桌面软件的图像处理速度。

WebGL 的基础概念

WebGL 基于 OpenGL 标准，通过 GPU 提供硬件加速渲染能力。相比 CPU，GPU 擅长并行处理大量数据，这使得它在图像处理中表现优异。图像处理涉及的操作包括滤波（如模糊、锐化）、颜色调整、变换（如缩放、旋转）等，WebGL 通过片段着色器（fragment shader）实现对每个像素的独立操作。

图像处理的工作流程

以下是 WebGL 图像处理的基本步骤：

设置 WebGL 上下文：在 HTML 画布（canvas）上创建 WebGL 环境。
加载图像为纹理：将图像加载为 GPU 可访问的纹理，方便后续操作。
编写片段着色器：定义如何处理每个像素，例如通过采样邻近像素实现模糊。
渲染结果：将处理后的图像渲染回画布，供用户查看。

代码示例分析

示例 1：交换红蓝通道

以下代码展示如何使用 WebGL 交换图像的红蓝通道：

<html>
<body>
<canvas id="canvas"></canvas>
<img id="image" src="path/to/image.jpg">
</body>
</html>

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var image = document.getElementById('image');

image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEX_TURE_2D, texture);
    gl.texImage2D(gl.TEX_TURE_2D, 0, gl.RGBA, gl.RGBA, gl.U N SIGNED BYTE, image);
    gl.texParameteri(gl.TEX_TURE_2D, gl.TEX_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEX_TURE_2D, gl.TEX_MAG_FILTER, gl.NEAREST);

    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, `
        attribute vec3 a_position;
        attribute vec2 a_texCoord;
        varying vec2 v_texCoord;
        void main() {
            gl_Posit ion = vec4(a_position, 1);
            v_texCoord = a_texCoord;
        }
    `);
    gl.compileShader(vertexShader);

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, `
        precision mediump float;
        uniform sampler2D u_image;
        varying vec2 v_texCoord;
        void main() {
            gl_FragColor = texture2D(u_image, v_texCoord).bgra;
        }
    `);
    gl.compileShader(fragmentShader);

    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);

    var vertices = [-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0];
    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATI C);

    var texCoords = [0, 0, 1, 0, 0, 1, 1, 1];
    var texCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATI C);

    var positionLocation = gl.getAttribLocation(program, 'a_position');
    gl.enableVertexAttributeArray(positionLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.vertexAttributePointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

    var texCoordLocation = gl.getAttribLocation(program, 'a_texCoord');
    gl.enableVertexAttributeArray(texCoordLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
    gl.vertexAttributePointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);

    var u_imageLocation = gl.getUniformLocation(program, 'u_image');
    gl.uniform1i(u_imageLocation, 0);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
};

代码解释

上下文设置：通过 getContext('webgl') 创建 WebGL 环境。
图像加载：将图像转为纹理，并设置最近邻过滤（nearest neighbor）以确保像素精确采样，避免插值影响。
着色器：
- 顶点着色器（vertex shader）：传递位置和纹理坐标到片段着色器。
- 片段着色器（fragment shader）：通过 .bgra 交换红蓝通道，gl_FragColor = texture2D(u_image, v_texCoord).bgra 表示从纹理采样颜色并重新排列组件。
渲染：使用全屏四边形（quad）绘制图像，显示交换后的结果。

示例 2：简单水平模糊

以下是水平模糊的片段着色器示例：

precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_textureSize;
varying vec2 v_texCoord;
void main() {
    vec2 onePixel = 1.0 / u_textureSize;
    vec4 left = texture2D(u_image, v_texCoord - vec2(onePixel.x, 0));
    vec4 center = texture2D(u_image, v_texCoord);
    vec4 right = texture2D(u_image, v_texCoord + vec2(onePixel.x, 0));
    gl_FragColor = (left + center + right) / 3.0;
}

解释

uniform vec2 u_textureSize：存储纹理的宽度和高度（像素单位）。
vec2 onePixel = 1.0 / u_textureSize：计算一个像素在纹理坐标中的大小。
通过 texture2D 采样左、中、右像素的颜色，并取平均值实现水平模糊。
这种方法适合简单的模糊效果，但边缘像素可能需要额外处理（默认使用最近邻过滤）。

多通道处理：3x3 框模糊

为了实现更真实的模糊效果，可以使用多通道渲染，例如 3x3 框模糊，通过两个步骤完成：

水平模糊：对每行像素取平均。
垂直模糊：对每列像素取平均，使用第一步的结果。

这需要使用帧缓冲区（framebuffer）进行中间渲染。以下是基本流程：

创建帧缓冲区和纹理，用于存储水平模糊结果。
绑定帧缓冲区，渲染水平模糊。
解绑帧缓冲区，使用其纹理作为垂直模糊的输入，渲染到画布。

水平模糊片段着色器如上，垂直模糊类似，调整 y 方向的采样：

precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_textureSize;
varying vec2 v_texCoord;
void main() {
    vec2 onePixel = 1.0 / u_textureSize;
    vec4 bottom = texture2D(u_image, v_texCoord - vec2(0, onePixel.y));
    vec4 center = texture2D(u_image, v_texCoord);
    vec4 top = texture2D(u_image, v_texCoord + vec2(0, onePixel.y));
    gl_FragColor = (bottom + center + top) / 3.0;
}

使用场景分析

WebGL 图像处理的应用场景包括但不限于：

实时照片编辑：如网页版照片编辑器，用户可快速应用滤镜（如模糊、锐化），提升用户体验。例如，IMG.LY Blog 提供了如何实现内核滤波的详细指导。
视频流滤镜：如实时处理网络摄像头视频，添加效果保持流畅，适合社交平台或直播应用。
性能关键应用：如游戏或模拟，需要快速处理图像，减轻 CPU 负担。例如，WebGL Fundamentals 展示了如何优化图像处理性能。
交互式图形：用户可动态调整图像，实时更新效果，适合交互式设计工具。

与 2D Canvas 的比较

相比 2D Canvas API，WebGL 更适合性能关键场景。Canvas 通过 getImageData 和 putImageData 操作像素数据，依赖 CPU 处理，速度较慢。而 WebGL 利用 GPU 并行处理，特别适合大型图像或实时应用。

技术细节与注意事项

纹理坐标与采样：纹理坐标从 0 到 1，映射到图像像素。采样时需注意边缘处理，默认使用最近邻过滤（nearest neighbor）或线性插值（linear interpolation）。
多通道渲染：如框模糊，需使用帧缓冲区（framebuffer）进行中间结果存储，效率更高。
性能优化：为确保效率，建议使用可分离内核（如水平后再垂直模糊），减少计算量。

结论

WebGL 提供了一种高效的浏览器内图像处理方法，通过片段着色器操作像素，利用 GPU 并行计算能力，适合实时性和性能关键场景。其应用广泛，从照片编辑到视频滤镜，展现了现代网页开发的强大潜力。

关键引用

WebGL Image Processing Tutorial
WebGL2 Image Processing
How To Apply Image Filters in WebGL