webgl-无效的_操作:texImage2d:arrayBufferView不够大,无法进行请求

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

该指南是在C++中。我正在把它转换成webgl-javascript,到目前为止已经成功了,但不幸的是在chrome中遇到了这个错误:

webgl:无效的操作: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 creating textures in WebGL with the RGB format 这让我相信,由于调用方法时纹理是不存在的,它不能大于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标记了这一点,有助于理解WebGLJavaScript和OpenGL+C++之间的这种方法的差异。