本教程深入探讨了在 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);