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

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

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例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,newFloat32Array(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 数据进行渲染：

// 创建 Buffervar vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 准备一些数据var vertices =[0,0,1,0,0,1];// 将数据放入 Buffer
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(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 的渲染效率和性能。