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++.