texImage2D 接受什么样的数据？答案

【问题标题】：What kind of data does texImage2D accept?texImage2D 接受什么样的数据？
【发布时间】：2016-07-20 09:10:24
【问题描述】：

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

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

我试过这个（对于一个正方形 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);

但我收到以下错误：

未捕获的类型错误：无法执行“texImage2D” “WebGLRenderingContext”：未找到与提供签名。

【问题讨论】：

标签： javascript webgl

【解决方案1】：

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

恐怕UNSIGNED_BYTE 无法提供足够的精度，您可能需要使用OES_texture_float 扩展并将纹理创建为浮点纹理。

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

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

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

【讨论】：

【解决方案2】：

如果您想从Uint8Array 这样的类型数组上传数据，您需要使用采用类型数组的texImage2D 版本。

那个是

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

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

gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

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

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

【讨论】：