在 WebGL 中使用 RGB 格式创建纹理时出错 [英] Error when creating textures in WebGL with the RGB format

问题描述

尝试从具有 RGBA 格式的数据创建 1px x 4px 纹理，如下所示:

Trying to create a 1px x 4px texture from data with the RGBA format like so works:

const texture = gl.createTexture()
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 4, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
  255, 0, 0, 255,
  0, 255, 0, 255,
  0, 0, 255, 255,
  255, 255, 0, 255
]))
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)

但是尝试像这样对 RGB 格式执行相同的操作:

However trying to do the same with the RGB format like so:

const texture = gl.createTexture()
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 4, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([
  255, 0, 0,
  0, 255, 0,
  0, 0, 255,
  255, 255, 0
]))
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)

在 Firefox 中出现此错误:

Gives this error in Firefox:

错误:WebGL 警告:texImage2D:所需的上传需要比可用数据更多的数据:(需要 3 行加 1 个像素，可用 3 行加 0 个像素)

Error: WebGL warning: texImage2D: Desired upload requires more data than is available: (3 rows plus 1 pixels needed, 3 rows plus 0 pixels available)

Chrome 中的这个错误:

And this error in Chrome:

WebGL:INVALID_OPERATION:texImage2D:ArrayBufferView 对于请求来说不够大

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

交换 gl.texImage2D 的宽度和高度参数，所以我有一个 4px x 1px 的纹理，然后使用 gl.RGB，但 2px x 2px 的纹理没有.我在这里有什么错误/误解?

Swapping the width and height parameters of gl.texImage2D so I have a 4px x 1px texture then works with gl.RGB, but a 2px x 2px texture does not. What am I getting wrong / misunderstanding here?

推荐答案

由于 WebGL 1.0 基于 OpenGL ES 2.0 API，我将参考 OpenGL ES 2.0 refpages glPixelStorei

Since WebGL 1.0 is based on OpenGL ES 2.0 API i will refer to OpenGL ES 2.0 refpages glPixelStorei

GL_UNPACK_ALIGNMENT

指定内存中每个像素行开始的对齐要求.允许的值为 1(字节对齐)、2(行对齐到偶数字节)、4(字对齐)和 8(行以双字边界开始).

Specifies the alignment requirements for the start of each pixel row in memory. The allowable values are 1 (byte-alignment), 2 (rows aligned to even-numbered bytes), 4 (word-alignment), and 8 (rows start on double-word boundaries).

UNPACK_ALIGNMENT 对齐参数的初始值为 4.

The initial value for the UNPACK_ALIGNMENT alignment parameter is 4.

如果指定宽度为 4 个像素的 RGB 纹理，则 3 * 4 中一行的大小 = 12 个字节.
如果纹理的高度为 1，则纹理的预期大小为 12 * 1 = 12.

If you specify a RGB texture with a width of 4 pixels, then the size of one line in 3 * 4 = 12 bytes.
If the height of the texture is 1, then the expected size of the texture is 12 * 1 = 12.

但是，如果您指定一个 RGB 纹理的像素为 1，则一行的大小为 3 * 1 = 3 个字节.
如果 UNPACK_ALIGNMENT 为 4，则此大小对齐为 4 个字节.
如果纹理的高度为 4，则纹理的预期大小为 4*4 = 16 字节.

But, if you specify a RGB texture with a with of 1 pixel, then the size of one line in 3 * 1 = 3 bytes.
If UNPACK_ALIGNMENT is 4, then this size is aligned to 4 bytes.
If the height of the texture is 4, then the expected size of the texture is 4*4 = 16 bytes.

第二种情况与您用来初始化纹理的数据数组不匹配，这会导致错误.

The second case does not match the data array which you use to initialize the texture and this causes the error.

要解决此问题，您必须将纹理的每一行对齐到 4 个字节:

To solve the issue you have to align each line of the texture to 4 bytes:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 4, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([
    255, 0,   0,   0, // add 1 byte for alignment to 4 bytes
    0,   255, 0,   0, // add 1 byte
    0,   0,   255, 0, // add 1 byte
    255, 255, 0,   0  // add 1 byte
]))

或通过 gl.UNPACK_ALIGNMENT 参数设置为 1rel="nofollow noreferrer">gl.pixelStorei:

or to set the gl.UNPACK_ALIGNMENT paramter to 1 by gl.pixelStorei:

gl.pixelStorei( gl.UNPACK_ALIGNMENT, 1 )
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 4, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([
    255, 0,   0,
    0,   255, 0,
    0,   0,   255,
    255, 255, 0
]))

这篇关于在 WebGL 中使用 RGB 格式创建纹理时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！