此文上接 WebGL2 系列文章，第一篇是基础概念， 上一篇是纹理。

上节中讲到了纹理的工作原理以及如何使用，我们用下载的图像创建纹理， 在这篇文章中我们将直接用 JavaScript 创建数据。

根据纹理格式，用 JavaScript 为纹理创建数据是比较直接的。 WebGL2 支持大量纹理格式。 WebGL2 支持所有在 WebGL1 中 未定义大小 的格式

它们被称为 未定义大小 因为它们在内部的实际表示方式在 WebGL1 中是未定义的。 它们在 WebGL2 中被定义。 除了那些未定义大小的格式之外，还有许多定义了大小的格式，包括

还有这些深度和模板格式 And these depth and stencil formats as well

Legend:

• 单个数字比如 8 表示 8 位将归一化为 0 到 1
• 前面有 s 的数字比如 s8 表示一个有符号的 8 位数字，将归一化为 -1 到 1
• 前面有 f 的数字比如 f16 表示浮点数。
• 前面有 i 的数字比如 i8 表示整数。
• 前面有 ui 的数字比如 ui8 表示无符号整数。

我们不会在此处使用此信息， 但我 突出显示 了 half 和 float 纹理格式以显示与 WebGL1 的不同，它们始终在 WebGL2 中可用， 但默认情况下它们未标记为可渲染颜色和/或可过滤纹理。 不可渲染意味着它们不能被渲染。 渲染到纹理将在另一课中介绍。不可过滤纹理意味着它们必须仅用于 gl.NEAREST 。这两个特性都可以作为 WebGL2 中的可选扩展。

对于每种格式，你都指定 内部格式 (GPU 将在内部使用的格式)以及您提供给 WebGL 的数据的 格式 和 类型 。这是你提供给内部格式的数据的 格式 和 类型

让我们创建一个 3×2 像素的 R8 纹理， 因为是 R8 纹理， 所以在红色通道里每个像素只有一个值

我们继续使用上篇文章中的例子，首先修改纹理坐标，每个面使用整个纹理

// 填充立方体纹理坐标的缓冲
function setTexcoords(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        // 正面
        0, 0,
        0, 1,
        1, 0,
        1, 0,
        0, 1,
        1, 1,
        ...

然后修改代码创建一个纹理

// 创建一个纹理
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

-// 用 1x1 的蓝色像素填充纹理
-gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
-              new Uint8Array([0, 0, 255, 255]));

// 用 3x2 的像素填充纹理
const level = 0;
const internalFormat = gl.R8;
const width = 3;
const height = 2;
const border = 0;
const format = gl.RED;
const type = gl.UNSIGNED_BYTE;
const data = new Uint8Array([
  128,  64, 128,
    0, 192,   0,
]);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border,
              format, type, data);

// 设置筛选器，我们不需要使用贴图所以就不用筛选器了
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

-// 异步加载图像
-...

这是结果

哦！为什么不管用？！？！！

查看 JavaScript 控制台看到这样的错误信息

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

结果是 WebGL 中有一种首次创建 OpenGL 后的模糊设定， 计算机有时在数据为某些特定大小时速度会快一些， 例如一次拷贝 2，4 或 8 个字节比一次拷贝 1 个字节要快， WebGL 默认使用 4 字节长度，所以它期望每一行数据是多个 4 字节数据（最后一行除外）。

我们之前的数据每行只有 3 个字节，总共为 6 字节， 但是 WebGL 试图在第一行获取 4 个字节，第二行获取 3 个字节， 总共 7 个字节，所以会出现这样的报错。

我们可以告诉 WebGL 一次处理 1 个字节

const alignment = 1;
gl.pixelStorei(gl.UNPACK_ALIGNMENT, alignment);

有效参数为 1，2，4 和 8.

我觉得你可能无法计算出对齐数据和非对齐数据的速度区别， 所以希望默认值是 1 而不是 4， 这样这个问题就不会困扰新手， 但是为了适配 OpenGL，所以要保留相同的默认设置，这样移植应用就不用改变行数， 然后可以为新的应用在需要的地方设置属性为 1。

有了这个设置后就能正常运行了

有着这些基础就可以讲渲染到材质了。