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 not big enough for request

This is an error relating to:

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

这里有一个类似问题的很好的回答： 使用RGB格式在WebGL中创建纹理时出错 这使我相信，由于在调用该方法时纹理不存在，因此它不能大于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++之间该方法的差异。

- user8826104

---

使用 WebGL 指南 而不是 OpenGL 指南？顺便说一句，这在 OpenGL 和 WebGL 中实际上是相同的。区别在于 WebGL 会捕获错误，而 OpenGL 只会读取您提供的缓冲区末尾之后的内容，从而可能导致潜在的安全问题和可能的崩溃。换句话说，您的 WebGL 代码等效于 C 语言中的以下代码：gl.texImage2D(....., 1024, 768, ...., calloc(4, 1)); 这将分配 4 个字节，将指向它的指针传递给 OpenGL，并告诉 OpenGL 从您分配的那 4 个字节所在的内存中读取 3145728 个字节。 - gman

Answer 1

你遇到的错误与解包对齐无关，而是因为你不能只用4个字节填充1024x768的纹理。 texImage2D 要求你提供 null（在这种情况下，初始化大小为纹理大小的缓冲区，填充零并用于初始化纹理）或者大小为纹理的缓冲区，在你的情况下应该是 1024 * 768 * 3 字节，恰好是4的倍数（所以你不会遇到任何解包问题）。以下是 WebGL 1 specification 的相关摘录：

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

- LJᛃ