还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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 的渲染效率和性能。