javascript - 使用 RGB 格式在 WebGL 中创建纹理时出错

Question

尝试从具有 RGBA 格式的数据创建一个 1px x 4px 纹理，就像这样:

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 格式做同样的事情:

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 中给出这个错误:

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 中的这个错误:

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

交换 gl.texImage2D 的宽度和高度参数，所以我有一个 4px x 1px 的纹理然后可以与 gl.RGB 一起使用，但是 2px x 2px 的纹理不能。我在这里犯了什么错误/误解？

Answer 1

由于 WebGL 1.0 基于 OpenGL ES 2.0 API，我将引用 OpenGL ES 2.0 refpages glPixelStorei

GL_UNPACK_ALIGNMENT

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。

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

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

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

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

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.pixelStorei 将 gl.UNPACK_ALIGNMENT 参数设置为 1| :

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