WebGL - INVALID_OPERATION: texImage2D: ArrayBufferView 对于请求来说不够大

Question

我目前正在按照本指南将我的场景渲染为纹理以生成深度/阴影贴图：http : //www.opengl-tutorial.org/intermediate-tutorials/tutorial-14-render-to-texture/

该指南是用 C++ 编写的。我正在将它转换为 WebGL - JavaScript，到目前为止已经成功，但不幸的是在 Chrome 中遇到了这个错误：

WebGL：INVALID_OPERATION：texImage2D：ArrayBufferView 对于请求来说不够大

这是一个与以下相关的错误：

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 768, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));

1024～768的宽高设置为1时，不会产生错误。

在指南中，它使用以下内容：

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 1024, 768, 0, GL_RGB, GL_UNSIGNED_BYTE, 0);

这里有一个类似问题的很好答案：Error when created textures in WebGL with the RGB format这让我相信，由于在调用方法时纹理不存在，它不能大于 1 像素，但我不确定这是否正确？编辑：不是这个问题的重复有两个原因。1，如果它是重复的，我就不会问这个问题 2，答案解释了为什么它不是重复的。

指南中的其余转换代码我将在下面转储：

    // shadow test
    this.frameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);

    this.texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 768, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    this.depthBuffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER, this.depthBuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 1024, 768);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.depthBuffer);

    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
    gl.drawBuffers([gl.NONE, gl.COLOR_ATTACHMENT0_EXT]);

    gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer);
    gl.viewport(0, 0, 1024, 768);

我已经用 C++ 和 OpenGL 标记了它，以帮助理解 WebGL - JavaScript 和 OpenGL - C++ 之间这种方法的差异。

Answer 1

您得到的错误与解包对齐无关，而是您无法仅用 4 个字节填充 1024x768 纹理的事实。texImage2D要求您提供null（在这种情况下，纹理大小的缓冲区被初始化，零填充并用于初始化纹理）或纹理大小的缓冲区，在您的情况下，它是1024 * 768 * 3字节，恰好是 4 的倍数（因此您不会遇到任何解包问题）。

以下是WebGL 1 规范的相关摘录：

如果像素为空，则传递初始化为 0 的足够大小的缓冲区。[...] 如果像素为非空，但其大小小于指定的宽度、高度、格式、类型和像素存储参数所需的大小，则会生成 INVALID_OPERATION 错误。