我目前正在遵循此指南将场景渲染到纹理以生成深度/阴影贴图: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);
这里有一个很好的答案来回答类似的问题: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 ++之间的这种方法的差异。
1条答案
按热度按时间kulphzqa1#
你得到的错误与解包对齐无关,但事实上,你根本无法用4个字节填充1024x768的纹理。
texImage2D
需要你提供null
(在这种情况下,一个纹理大小的缓冲区被初始化,填充零并用于初始化纹理)或一个纹理大小的缓冲区,在你的情况下,它将是1024 * 768 * 3
字节,巧合的是4的倍数(所以你不会遇到任何解包问题)。以下是WebGL 1规范的相关摘录:
如果pixels为null,则传递初始化为0的足够大小的缓冲区。[...]如果pixels为非null,但其大小小于指定的width、height、format、type和pixel存储参数所需的大小,则生成INVALID_OPERATION错误。