javascript - WebGL - INVALID_OPERATION : texImage2D: ArrayBufferView not big enough for request

Question

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

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

WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

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

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 creating 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 specification 的相关摘录:

If pixels is null, a buffer of sufficient size initialized to 0 is passed. [...] If pixels is non-null but its size is less than what is required by the specified width, height, format, type, and pixel storage parameters, generates an INVALID_OPERATION error.