WebGL

Question

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

这里有一个类似问题的很好的答案：这让我相信由于调用方法时纹理不存在，它不能大于 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 的相关摘录：

If pixels is null, a buffer of sufficient size initialized to 0 is passed. [...] If pixels is non-null but its size is less than what is required by the specified width, height, format, type, and pixel storage parameters, generates an INVALID_OPERATION error.

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

WebGL - INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

javascript

c++

webgl2