texImage2D接受什么样的数据？

Question

我想使用WebGL将某些矩阵计算卸载到片段着色器。

我正在尝试使用texImage2D将矩阵作为RGB 2D纹理texImage2D ，但我不知道必须如何格式化数据。

我尝试了这个（对于2x2正方形矩阵）：

var textureData = new Uint8Array([
  0, 0, 0,  1, 0, 0,
  2, 0, 0,  3, 0, 0
]);
//...
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
  textureData);

但是我收到以下错误：

未捕获的TypeError：无法在“ WebGLRenderingContext”上执行“ texImage2D”：未找到与提供的签名匹配的函数。

Answer 1

我正在尝试将矩阵作为RGB 2D纹理发送

恐怕UNSIGNED_BYTE不会为此提供足够的精度，您可能想使用OES_texture_float扩展并将其创建为浮点纹理。

我不知道数据必须如何格式化

texImage2D的可用签名可以在规范中找到：

void texImage2D(
    GLenum target,
    GLint level,
    GLint internalformat,
    GLsizei width,
    GLsizei height,
    GLint border,
    GLenum format,
    GLenum type,
    ArrayBufferView? pixels
);

void texImage2D(
    GLenum target,
    GLint level,
    GLint internalformat,
    GLenum format,
    GLenum type,
    TexImageSource? source
);

其中TexImageSource是类型

ImageBitmap
ImageData
HTMLImageElement
HTMLCanvasElement
HTMLVideoElement

Answer 2

如果你想从像typearray上传数据Uint8Array你需要使用的版本texImage2D ，需要一个typedArray。

那是

void texImage2D(
    GLenum target,
    GLint level,
    GLint internalformat,
    GLsizei width,
    GLsizei height,
    GLint border,
    GLenum format,
    GLenum type,
    ArrayBufferView? pixels
);

您还应该注意，像OpenGL一样，WebGL默认将UNPACK_ALIGNMENT设置为4字节，这意味着每行像素/纹理UNPACK_ALIGNMENT必须是4字节的倍数。 您可以通过调用将其更改为1个字节

gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

我之所以提出这一点，是因为由于您要上载每像素3个字节的RGB / UNSIGNED_BYTE纹理，这意味着如果您上载2x2像素的纹理，则每行是6个字节。 WebGL会将其填充到8个字节，因此它将期望缓冲区长14个字节（第一行使用8个字节，其中仅使用前6个字节，最后一行使用6个字节。它并不关心填充最后一行。如果您将UNPACK_ALIGNMENT设置为1，该问题就消失了。

顺便说一句，您可以将参数设为默认值1，但WebGL在OpenGL之后，而在OpenGL中默认值为4。