WebGL入门（005）：WebGLBuffer 简介、使用方法、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

在 WebGL 中，WebGLBuffer 是一种用于存储数据的对象，这些数据可以被传递给着色器程序进行渲染。Buffer 对象通常用于存储顶点坐标、颜色、纹理坐标、法线以及其他顶点属性数据。在 WebGL 中，这些 Buffer 对象通常通过 gl.createBuffer() 方法创建，并通过 gl.bindBuffer() 方法绑定到特定的目标。

下面是对 WebGLBuffer 的详细说明：

创建 Buffer

要创建一个新的 Buffer 对象，可以使用 WebGL 上下文的方法 createBuffer()：

var buffer = gl.createBuffer();

绑定 Buffer

在 WebGL 中，必须先将 Buffer 绑定到目标才能对其进行操作。常见的目标包括 gl.ARRAY_BUFFER 和 gl.ELEMENT_ARRAY_BUFFER。

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

数据传输

一旦 Buffer 被绑定，就可以使用 bufferData 方法将数据传入 Buffer。这个方法接受三个参数：目标、数据、数据的用途。

// 为 ARRAY_BUFFER 准备一些数据
var vertices = [
  // 位置数据
  0, 0,
  1, 0,
  0, 1
];

// 将数据放入 ArrayBuffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

这里的 gl.STATIC_DRAW 表示数据在 Buffer 中是静态的，不会经常改变。

使用 Buffer

在着色器中使用 Buffer 数据前，需要配置顶点属性变量（vertex attribute variables）。首先，需要获取顶点属性的位置，然后启用该属性，并指向 Buffer。

// 获取顶点属性位置
var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

// 启用顶点属性
gl.enableVertexAttribArray(positionAttributeLocation);

// 指定顶点属性如何从 Buffer 中读取数据
gl.vertexAttribPointer(
  positionAttributeLocation,  // 属性位置
  2,                         // 每个顶点属性的分量数量
  gl.FLOAT,                  // 分量的数据类型
  false,                     // 是否对数据进行标准化
  0,                         // 每个顶点属性之间的字节偏移量
  0                          // Buffer 中顶点属性数据的起始偏移量
);

绘制

最后，使用 drawElements 或 drawArrays 方法来绘制图形。

// 使用 ELEMENT_ARRAY_BUFFER 进行绘制
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

// 使用 ARRAY_BUFFER 进行绘制
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2); // 因为每两个浮点数代表一个顶点

这里 indices.length / 2 是因为每个顶点有两个坐标值。

示例

下面是一个完整的示例，展示了如何创建 Buffer，填充数据，并使用 Buffer 数据进行渲染：

// 创建 Buffer
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 准备一些数据
var vertices = [
  0, 0,
  1, 0,
  0, 1
];

// 将数据放入 Buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点属性位置
var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

// 启用顶点属性
gl.enableVertexAttribArray(positionAttributeLocation);

// 指定顶点属性如何从 Buffer 中读取数据
gl.vertexAttribPointer(
  positionAttributeLocation,
  2, gl.FLOAT, false, 0, 0
);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

以上就是 WebGL 中 Buffer 的基本用法。Buffer 是 WebGL 中非常重要的组成部分，几乎所有的渲染操作都需要通过 Buffer 来传递数据。通过合理地组织和使用 Buffer，可以大大提高 WebGL 的渲染效率和性能。