一起学 WebGL：绘制三角形

大家好，我是前端西瓜哥。画了好几节课的点，这次我们来画三角形了。

三角形可太重要了，再复杂的三维模型都是由一个个小三角形组合而成，越多越精细越真实。

绘制三角形

这次绘制三角形，要绘制的点就有三个了，不再是一个。为此我们需要用到缓存区对象（buffer object）。

通过缓存区对象，我们可以一次性向顶点着色器传入多个顶点数据。

Float32Array

首先我们来用 Float32Array 数组保存需要用到的三个点的位置信息。

// 顶点数据
const vertices = new Float32Array([
  // 第一个点
  0, 0.5,
  // 第二个点
  -0.5, -0.5,
  // 第三个点
  0.5, -0.5
]);

为了更简单一些，这里先不考虑 z 维度，每个顶点只用了 x 和 y 分量。到时候传递到顶点着色器的 gl_Position 时，z 会自动填充默认的 0。

Float32Array 是一个比较特殊的 JavaScript 数组，最初也是为了和 WebGL 配合使用的，它可以创建一个 32 位浮点数的强类型数组。

普通的 JS 数组没有类型的概念，数组元素可能是数字、字符串、对象的混合体，传给 WebGL，要处理也麻烦，不太合适。

需要注意的是这种强类型数组的 API 和普通数组不一样，比如不能用 push 方法。

缓冲区对象的创建和数据写入

// 创建缓冲区对象
const vertexBuffer = gl.createBuffer();
// 绑定缓冲区对象到上下文
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓冲区对象写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

首先是用 gl.createBuffer 方法创建一个缓冲区对象。

然后用 gl.bindBuffer(target, buffer) 将缓存区绑定到 gl 上下文指定目标（gl.ARRAY_BUFFER）中。target 参数还有另一个值是 gl.ELEMENT_ARRAY_BUFFER，这个我们后面章节讲如何绘制立方体的时候会用到哈。

buffer 参数就是刚刚创建的缓冲区对象。

最后往缓冲区对象写入我们刚刚的数组数据。最后一个参数 gl.STATIC_DRAW，表示数据写入后不会再被修改，去绘制 静态 场景。

绑定到顶点着色器上

接着就是让缓冲区对象对接上顶点着色器的变量。