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

这里有一个类似问题的好答案：Error when creating textures in WebGL with the RGB format使我相信，由于调用该方法时纹理不存在，因此纹理不能大于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 ++之间这种方法的差异。

Answer 1

您遇到的错误与拆包对齐无关，但事实是您仅用4个字节就无法填充1024x768纹理。 texImage2D要求您提供null（在这种情况下，将初始化纹理大小的缓冲区，将其填充为零并用于初始化纹理）或在您的情况下提供纹理大小的缓冲区将是1024 * 768 * 3个字节，恰好是4的倍数（因此您不会遇到任何拆包问题）。

以下是WebGL 1 specification的相关摘录：

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

WebGL-INVALID_OPERATION：texImage2D：ArrayBufferView不足以容纳请求

1 个答案: