WebGL异步图像拼接与帧缓冲器应用教程

const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });

// 创建帧缓冲器
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

// 创建目标纹理，用于存储累积的图像
const targetTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, targetTexture);

// 定义目标纹理的尺寸和格式。这里假设合成图像的尺寸为512x512。
// 注意：width和height必须明确指定，数据源为null表示创建一个空纹理。
gl.texImage2D(
    gl.TEXTURE_2D,
    0, // mipmap level
    gl.RGBA, // internal format
    512, // width
    512, // height
    0, // border (must be 0)
    gl.RGBA, // format
    gl.UNSIGNED_BYTE, // type
    null // pixel data (null for an empty texture)
);

// 设置纹理参数，以便可以渲染任何尺寸的图像
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);

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

// 解绑帧缓冲器，避免后续操作意外写入
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

function render(tileImage: HTMLImageElement, tile: Tile) {
    // ... (初始化顶点缓冲区、纹理坐标缓冲区、创建当前瓦片纹理等代码，与原问题中类似) ...

    // 1. 将当前瓦片渲染到帧缓冲器 (targetTexture)
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb); // 绑定帧缓冲器
    gl.viewport(0, 0, 512, 512); // 设置视口为帧缓冲器的大小 (targetTexture的尺寸)
    gl.useProgram(program); // 使用着色器程序

    // 激活并绑定当前瓦片纹理
    const currentTileTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, currentTileTexture);
    gl.texImage2D(
        gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tileImage
    );
    // 设置纹理参数...
    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);

    // 设置顶点属性 (a_position, a_texCoord)
    // ... (绑定positionBuffer, texcoordBuffer, 调用vertexAttribPointer) ...
    gl.enableVertexAttribArray(positionLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    setRectangle(gl, tile.position.x, tile.position.y, tileImage.width, tileImage.height); // 设置瓦片在targetTexture中的位置和大小
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(texcoordLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
    gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]),
        gl.STATIC_DRAW
    );
    gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0);

    // 设置uniforms，例如分辨率和当前瓦片纹理大小
    gl.uniform2f(resolutionLocation, 512, 512); // 帧缓冲器分辨率
    gl.uniform2f(textureSizeLocation, tileImage.width, tileImage.height); // 当前瓦片纹理大小

    gl.drawArrays(gl.TRIANGLES, 0, 6); // 绘制当前瓦片到帧缓冲器

    // 2. 将帧缓冲器中的内容 (targetTexture) 渲染到主画布
    gl.bindFramebuffer(gl.FRAMEBUFFER, null); // 解绑帧缓冲器，渲染到主画布
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // 设置视口为画布大小

    // 绑定targetTexture，作为源纹理
    gl.bindTexture(gl.TEXTURE_2D, targetTexture);

    // 重新设置顶点属性，以覆盖整个画布
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    setRectangle(gl, 0, 0, gl.canvas.width, gl.canvas.height); // 设置矩形覆盖整个画布
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    // 设置uniforms，例如分辨率和targetTexture纹理大小
    gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height); // 画布分辨率
    gl.uniform2f(textureSizeLocation, 512, 512); // targetTexture纹理大小

    gl.drawArrays(gl.TRIANGLES, 0, 6); // 绘制targetTexture到画布
}

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
    );
}

attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;
uniform vec2 u_textureSize;

varying vec2 v_texCoord;

void main() {
   // 将像素坐标转换为剪辑空间坐标
   vec2 zeroToOne = a_position / u_resolution;
   vec2 zeroToTwo = zeroToOne * 2.0;
   vec2 clipSpace = zeroToTwo - 1.0;
   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // 翻转Y轴

   // 将纹理坐标传递给片段着色器
   v_texCoord = a_texCoord;
}

precision mediump float;

varying vec2 v_texCoord;

uniform sampler2D u_image;

void main() {
   gl_FragColor = texture2D(u_image, v_texCoord);
}