WebGL-INVALID_OPERATION:texImage2D:ArrayBufferView不够大，无法满足请求

我目前正在按照本指南将场景渲染为纹理以生成深度/阴影贴图：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);

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