本教程深入探讨了在 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）实现高级图像拼接
帧缓冲区提供了一种更强大、更灵活的离屏渲染机制。通过帧缓冲区，我们可以将渲染结果绘制到一个纹理上，而不是直接绘制到屏幕上。这样，我们就可以在后台逐步累积图像，最后将累积好的纹理一次性绘制到屏幕上。
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 函数需要执行两个主要步骤：
- 第一步：绘制当前图像到帧缓冲区 将新加载的图像绘制到 targetTexture 上。由于 targetTexture 已经包含了之前绘制的所有图像，这次操作会将新图像叠加到现有内容上。
- 第二步：将帧缓冲区内容绘制到画布 将 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); 
