javascript - 如何在保留内容的情况下调整 WebGLTexture 的大小？

Question

我想调整通过与 Framebuffer 上一帧绑定(bind)渲染的 WebGLTexture 的大小。

我尝试使用 texImage2D 调整该纹理的大小，并保持新的大小并保留格式和类型。

我知道这行不通。这可能会生成新的纹理，其尺寸用 [0,0,0,0] 清除整个像素。

如何在保留内容的情况下调整 WebGLTexture 的大小？

Answer 1

您无法在 WebGL 中调整纹理大小而不丢失其内容。您需要分配另一个具有所需大小的纹理并将旧纹理的数据复制到其中。有两种方法可以做到这一点:通过 copyTexSubImage2D 调用或通过绘制调用。请注意，第一种方法需要将旧纹理链接到帧缓冲区，第二种方法需要将新纹理链接到。

假设您的 WebGL 上下文是 gl，旧纹理是 oldTexture，它链接到的帧缓冲区是 oldFramebuffer，新纹理是 newTexture 其帧缓冲区为 newFramebuffer。

使用copyTexSubImage2D你可以做这样的事情:

gl.bindFramebuffer(gl.FRAMEBUFFER, oldFramebuffer);
gl.bindTexture(gl.TEXTURE_2D, oldTexture);
gl.copyTexSubImage2D(
    gl.TEXTTURE_2D,
    0,
    offsetInNewTextureX,
    offsetInNewTextureY,
    offsetInOldTextureX,
    offsetInOldTextureY,
    width,
    height
);

完成了!请注意，此方法不允许您操作纹理数据，而只能将其逐像素复制。

第二种方法有点复杂，需要一些着色器，我不会在这里列出。基本上，您需要设置上下文来绘制带纹理的四边形。

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, oldTexture);
gl.uniform1i(shaderTextureUniformLocation, 0);

gl.bindFramebuffer(gl.FRAMEBUFFER, newFramebuffer);
gl.drawArrays(/* ... */); // Draw the quad.

这样您还可以操作复制的数据，即拉伸(stretch)它。

I tried to resize this texture using texImage2D with new size and keeping formats and type.

I know this wont work. This maybe generate new texture with the size cleared with [0,0,0,0] for entire pixels.

是的，你就在这里。