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

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

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

文章目录

在WebGL中，

OES_vertex_array_object

扩展提供了一种方式来使用顶点数组对象（Vertex Array Objects, VAOs）。VAOs简化了顶点数据的管理，允许开发者更高效地组织和重用顶点数据，这对于提高渲染性能非常有帮助。

OES_vertex_array_object 简介

OES_vertex_array_object

扩展为WebGL引入了顶点数组对象的概念，这是一种用于封装所有与顶点相关的数据绑定状态的对象。使用VAOs可以减少每次绘制调用前的绑定操作次数，从而提高渲染效率。

使用方法

使用

OES_vertex_array_object

扩展的一般步骤如下：

1. 检测扩展：首先确保浏览器支持该扩展。
2. 创建顶点数组对象：使用createVertexArray方法创建顶点数组对象。
3. 绑定顶点数组对象：使用bindVertexArray方法绑定顶点数组对象。
4. 设置顶点属性：使用vertexAttribPointer等方法设置顶点属性。
5. 绘制场景：使用drawArrays或drawElements方法绘制场景。

示例代码

下面是一个使用

OES_vertex_array_object

扩展创建和使用顶点数组对象的基本示例：

const canvas = document.getElementById('my-canvas');const gl = canvas.getContext('webgl2',{antialias:true});// 检测扩展const vertexArrayObject = gl.getExtension('OES_vertex_array_object');if(!vertexArrayObject){
  console.error('OES_vertex_array_object extension not supported.');return;}// 创建顶点数组对象const vao = vertexArrayObject.createVertexArrayOES();
vertexArrayObject.bindVertexArrayOES(vao);// 创建顶点缓冲区const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);const vertices =newFloat32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 设置顶点属性const positionAttributeLocation = gl.getAttribLocation(shaderProgram,'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation,2, gl.FLOAT,false,0,0);// 创建并使用着色器程序const shaderProgram =createAndUseShaderProgram(gl);// 绘制场景
gl.drawArrays(gl.TRIANGLES,0,3);// 解绑顶点数组对象
vertexArrayObject.bindVertexArrayOES(null);

注意事项

• 确保在绘制之前正确设置了顶点属性。
• 由于浏览器和设备支持情况的不同，你应该始终检查扩展是否可用。
• 使用顶点数组对象可以提高渲染性能，特别是当需要频繁绘制不同的几何体时。

结论

使用

OES_vertex_array_object

扩展可以显著提高WebGL应用程序中的渲染性能，特别是在需要频繁切换顶点数据时。然而，由于支持情况的不同，你应该始终检查扩展是否可用，并且不要在生产环境中直接暴露敏感信息给用户。