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

这里有一个类似问题的好答案： 用RGB格式在WebGL中创建纹理时出错，这使我相信，由于调用该方法时纹理不存在，因此纹理不能大于1个像素，但我不确定这是否正确？ 编辑： 2个原因，不是此问题的重复项。 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规范的相关摘录：

如果pixel为null，则传递一个大小为0的足够大的缓冲区。 [...]如果像素不为空，但是其大小小于指定的宽度，高度，格式，类型和像素存储参数所要求的大小，则会生成INVALID_OPERATION错误。