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

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

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

// 全局或初始化时执行
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();

// 辅助函数：设置矩形顶点数据
// (与问题内容中的 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);