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

文章目录

创建 Buffer绑定 Buffer数据传输使用 Buffer绘制示例

在 WebGL 中，<code>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 的渲染效率和性能。