WebGL中异步拼接图像：帧缓冲区的应用与常见陷阱

本教程详细探讨了在webgl中异步加载并拼接多张图像的方法。文章首先指出并解决了异步渲染时图像消失的常见问题，即通过`preservedrawingbuffer`参数保留绘制缓冲区。随后，深入讲解了如何利用帧缓冲区（framebuffer）进行图像合成，包括目标纹理的初始化、两阶段渲染策略以及统一变量和缓冲区管理，旨在实现高效且灵活的图像拼接效果。

WebGL异步图像拼接的基础问题与解决方案

在WebGL应用中，当需要异步加载并逐步将多张图像拼接到一个画布上时，开发者常会遇到一个问题：每次绘制新图像时，之前已绘制的图像会消失。这并非帧缓冲区使用不当的直接结果，而是WebGL上下文的默认行为所致。

问题根源：绘制缓冲区的默认行为

WebGL上下文默认会在每次绘制操作（例如gl.drawArrays或gl.drawElements）之后清除画布。这意味着，如果你在多个异步加载回调中连续调用render函数，每次渲染都会在一个空白画布上进行，导致前一帧的内容被擦除。

简单修复：保留绘制缓冲区

解决这个问题的最直接方法是在获取WebGL上下文时设置preserveDrawingBuffer参数为true。

const canvas = document.getElementById('your-canvas-id');
const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });

通过此设置，WebGL将不再在每次绘制前自动清除画布，从而允许后续的绘制操作在现有内容之上进行叠加。

利用帧缓冲区实现高级图像合成

尽管preserveDrawingBuffer: true能解决图像消失的问题，但它并不总是最佳实践，尤其是在需要对整个合成图像进行复杂的后期处理时。帧缓冲区（Framebuffer）提供了一种更强大、更灵活的离屏渲染机制，允许我们将图像绘制到一个纹理上，而不是直接绘制到屏幕上，然后再将这个合成纹理绘制到屏幕。

帧缓冲区的工作原理

帧缓冲区允许我们将渲染目标从默认的画布切换到一个自定义的纹理。这意味着，我们可以将多个图像逐步绘制到这个“目标纹理”上，形成一个合成图像，然后像处理普通纹理一样处理这个合成图像，例如应用全局着色器效果，最后再将它渲染到屏幕。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

65

查看详情

实现步骤：

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

   首先，你需要创建一个帧缓冲区，并为其绑定一个目标纹理。这个目标纹理将作为所有后续渲染操作的接收器。至关重要的是，你需要明确指定目标纹理的尺寸和格式，因为WebGL不会自动推断它们。

   const fb = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
   
   const targetTexture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, targetTexture);
   
   // 定义目标纹理的尺寸和格式。这里假设合成图像为512x512像素。
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
       512, 512, 0, // 宽度、高度、边框（必须为0）
       gl.RGBA, gl.UNSIGNED_BYTE, null); // 格式、类型、数据（null表示创建一个空纹理）
   
   // 设置纹理参数
   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
   );
   
   // 解绑帧缓冲区，避免影响后续操作
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);

   登录后复制

2. 两阶段渲染策略

   每次加载新图像时，渲染过程将分为两个主要阶段：

   • 阶段一：将新图像绘制到帧缓冲区（即目标纹理） 这个阶段，我们将当前加载的图像作为纹理，绘制到之前创建的帧缓冲区上。由于帧缓冲区绑定了targetTexture，所以所有绘制操作都会累积到targetTexture中。

     function renderTile(tileImage: HTMLImageElement, tile: Tile) {
         // ... (设置顶点、纹理坐标、创建图像纹理等通用步骤) ...
     
         // 绑定到帧缓冲区，以便绘制到targetTexture
         gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
         // 设置视口为目标纹理的尺寸
         gl.viewport(0, 0, 512, 512); // 假设targetTexture是512x512
     
         // 绑定当前加载的图像纹理
         gl.bindTexture(gl.TEXTURE_2D, currentImageTexture); // currentImageTexture是tileImage创建的纹理
         gl.uniform2f(textureSizeLocation, tileImage.width, tileImage.height); // 当前图像的尺寸
     
         // 设置矩形位置，将当前图像绘制到targetTexture的指定位置
         gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
         setRectangle(gl, tile.position.x, tile.position.y, tileImage.width, tileImage.height);
     
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     }

     登录后复制

   • 阶段二：将帧缓冲区内容（合成图像）绘制到主画布 完成将新图像绘制到帧缓冲区后，我们需要将帧缓冲区的内容（即targetTexture）作为纹理，绘制到最终的屏幕画布上。

     function renderToScreen() {
         // 解绑帧缓冲区，将渲染目标切换回默认画布
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         // 设置视口为画布的尺寸
         gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
     
         // 绑定targetTexture作为源纹理
         gl.bindTexture(gl.TEXTURE_2D, targetTexture);
         gl.uniform2f(textureSizeLocation, 512, 512); // targetTexture的尺寸
     
         // 设置矩形位置，将targetTexture绘制到整个画布
         gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
         setRectangle(gl, 0, 0, gl.canvas.width, gl.canvas.height); // 绘制覆盖整个画布的矩形
     
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     }

     登录后复制

   在每次异步图像加载完成后，你应该先调用renderTile将新图像添加到合成纹理，然后调用renderToScreen更新屏幕显示。

优化与注意事项：

1. 资源一次性设置： 像着色器程序（program）、统一变量（uniform）和属性位置（attribute）的查找、以及缓冲区（positionBuffer, texcoordBuffer）的创建和初始数据绑定等操作，通常只需要在初始化时执行一次。在render函数中重复执行这些操作会带来不必要的性能开销。
2. 纹理垂直翻转： 在WebGL中，纹理坐标的原点通常在左下角，而图像加载到HTML Image元素后，其原点可能在左上角。这可能导致图像在渲染到帧缓冲区或屏幕时出现垂直翻转。可以通过调整纹理坐标或在着色器中进行Y轴翻转来解决。
3. 着色器统一变量： 确保在两个渲染阶段中，u_resolution和u_textureSize等统一变量根据当前渲染目标（帧缓冲区或画布）和源纹理（当前图像纹理或targetTexture）的实际尺寸进行正确设置。
4. 2D Canvas作为替代： 如果你的目标仅仅是简单地拼接2D图像，并且不需要在WebGL中对整个合成图像进行复杂的像素级着色器处理，那么使用HTML的2D Canvas API来合成图像，然后将2D Canvas作为WebGL纹理源（gl.texImage2D(..., canvas2d)）可能是一个更简单、更高效的方案。这种方法避免了WebGL帧缓冲区的复杂性，但失去了WebGL着色器处理的灵活性。

总结

在WebGL中异步拼接图像，可以根据需求选择不同的策略。对于简单的叠加效果，通过canvas.getContext("webgl", { preserveDrawingBuffer: true })可以快速解决图像消失的问题。而当需要更高级的离屏渲染、图像合成以及对合成结果进行着色器处理时，帧缓冲区是不可或缺的工具。正确理解和应用帧缓冲区的两阶段渲染模型，以及合理管理WebGL资源，是实现高效、灵活图像拼接的关键。

以上就是WebGL中异步拼接图像：帧缓冲区的应用与常见陷阱的详细内容，更多请关注php中文网其它相关文章！