WebGL异步图像拼接教程：理解与应用帧缓冲区

本教程深入探讨了在 WebGL 中异步加载并拼接多张图像到单个画布上的技术。针对图像绘制后消失的问题，文章提供了两种解决方案：一是通过 `preserveDrawingBuffer` 选项简单持久化绘图内容；二是通过详细讲解帧缓冲区（Framebuffer）的正确使用方法，实现图像的离屏累积与最终显示，帮助开发者构建高效且专业的图像合成应用。

在 WebGL 应用中，我们经常需要处理异步加载的图像，并将它们以“平铺”或“拼接”的方式呈现在同一个画布上。然而，初学者在尝试实现这一功能时，常常会遇到一个常见问题：当一张新图像被绘制到画布上时，之前绘制的图像会莫名消失。这通常是由于 WebGL 默认的渲染行为所导致。本教程将详细介绍两种解决此问题的方法，并重点阐述如何利用帧缓冲区（Framebuffer）实现更灵活和专业的图像拼接。

1. 理解 WebGL 的默认绘制行为

WebGL 默认在每次绘制循环开始时清空绘图缓冲区。这意味着，如果你在多个异步图像加载完成后，依次调用 gl.drawArrays 将它们绘制到同一个画布上，每次绘制都会覆盖前一次的内容，导致只有最后一张图像可见。

2. 解决方案一：通过 preserveDrawingBuffer 选项持久化绘图内容

最直接、最简单的解决方案是在获取 WebGL 渲染上下文时，设置 preserveDrawingBuffer 选项为 true。

2.1 启用 preserveDrawingBuffer

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });

if (!gl) {
    console.error('无法初始化 WebGL');
    // 处理 WebGL 不可用情况
}

2.2 工作原理

当 preserveDrawingBuffer 设置为 true 时，WebGL 将不会在每次渲染帧开始时自动清空绘图缓冲区。这意味着，一旦像素被绘制到画布上，它们就会保留下来，直到你手动清空（例如使用 gl.clear()）或被新的绘制操作覆盖。

2.3 优点与注意事项

• 优点： 实现简单，代码改动小，适合快速解决图像消失的问题。
• 注意事项：
  • 性能开销： 启用 preserveDrawingBuffer 可能会带来一定的性能开销，因为它阻止了浏览器对绘图缓冲区的优化。对于需要高帧率或复杂渲染的场景，这可能不是最佳选择。
  • 内存使用： 绘图缓冲区的内容会一直保留在显存中，直到页面卸载，这可能增加内存负担。
  • 适用场景： 对于图像拼接这类不需要频繁清空画布，且最终结果是静态或更新不频繁的场景，这是一个可行的解决方案。

3. 解决方案二：使用帧缓冲区（Framebuffer）实现高级图像拼接

帧缓冲区提供了一种更强大、更灵活的离屏渲染机制。通过帧缓冲区，我们可以将渲染结果绘制到一个纹理上，而不是直接绘制到屏幕上。这样，我们就可以在后台逐步累积图像，最后将累积好的纹理一次性绘制到屏幕上。

ImgGood

免费在线AI照片编辑器

下载

3.1 帧缓冲区的核心概念

• 帧缓冲区对象 (Framebuffer Object, FBO)： 一个容器，用于将渲染目标（如颜色纹理、深度纹理）附加到其上。
• 目标纹理 (Target Texture)： 附加到帧缓冲区上的纹理，所有的绘制操作都会写入这个纹理，而不是直接显示在屏幕上。

3.2 初始化帧缓冲区和目标纹理

在使用帧缓冲区之前，我们需要创建它并为其分配一个目标纹理。这个目标纹理将作为所有拼接图像的累积区域。

// 全局或初始化时执行
let fb: WebGLFramebuffer | null;
let targetTexture: WebGLTexture | null;
const FBO_WIDTH = gl.canvas.width; // 示例：与画布同宽
const FBO_HEIGHT = gl.canvas.height; // 示例：与画布同高

function initFramebuffer() {
    fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

    targetTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, targetTexture);

    // 为目标纹理分配存储空间，但初始数据为null
    gl.texImage2D(
        gl.TEXTURE_2D,
        0, // mipmap level
        gl.RGBA, // internal format
        FBO_WIDTH, // width
        FBO_HEIGHT, // height
        0, // border
        gl.RGBA, // format
        gl.UNSIGNED_BYTE, // type
        null // data source (null for allocation)
    );

    // 设置纹理参数
    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.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    // 将目标纹理附加到帧缓冲区
    gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0, // 颜色附件点
        gl.TEXTURE_2D,
        targetTexture,
        0 // mipmap level
    );

    // 检查帧缓冲区是否完整
    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (status !== gl.FRAMEBUFFER_COMPLETE) {
        console.error('帧缓冲区不完整:', status);
    }

    // 解绑帧缓冲区，避免影响后续默认绘制
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

// 在 WebGL 上下文初始化后调用
initFramebuffer();

注意： targetTexture 的尺寸可以根据需求设定，但不一定需要是2的幂次方，尤其是当 CLAMP_TO_EDGE 和 NEAREST 过滤模式被使用时。然而，为了兼容性和潜在的 mipmap 使用，通常建议使用2的幂次方尺寸。

3.3 改造 render 函数：两步绘制法

使用帧缓冲区后，每次加载并绘制新图像时，render 函数需要执行两个主要步骤：

1. 第一步：绘制当前图像到帧缓冲区 将新加载的图像绘制到 targetTexture 上。由于 targetTexture 已经包含了之前绘制的所有图像，这次操作会将新图像叠加到现有内容上。
2. 第二步：将帧缓冲区内容绘制到画布 将 targetTexture（现在包含了所有累积图像）作为纹理源，绘制一个覆盖整个画布的矩形，从而将完整的拼接图像显示在屏幕上。

下面是改造后的 render 函数示例：

// 辅助函数：设置矩形顶点数据
// (与问题内容中的 setRectangle 相同)
export function setRectangle(
    gl: WebGLRenderingContext,
    x: number,
    y: number,
    width: number,
    height: number
) {
    const x1 = x,
        x2 = x + width,
        y1 = y,
        y2 = y + height;

    gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([
            x1, y1,
            x2, y1,
            x1, y2,
            x1, y2,
            x2, y1,
            x2, y2
        ]),
        gl.STATIC_DRAW
    );
}

// 假设 program, positionLocation, texcoordLocation, resolutionLocation, textureSizeLocation
// 和 positionBuffer, texcoordBuffer 已经在外部初始化并查找好。
// 避免在每次 render 调用中重复执行这些开销较大的操作。

function render(tileImage: HTMLImageElement, tile: Tile) {
    // 确保帧缓冲区和目标纹理已初始化
    if (!fb || !targetTexture) {
        console.error('帧缓冲区或目标纹理未初始化！');
        return;
    }

    // 创建并上传当前瓦片图像到纹理
    const currentTileTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, currentTileTexture);
    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.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        tileImage
    );

    // 激活 WebGL 程序并设置通用属性 (这些通常在外部设置一次即可)
    gl.useProgram(program);
    gl.enableVertexAttribArray(positionLocation);