当前位置：首页 > news >正文

webgl入门实例-07顶点缓冲区基本概念

news 来源：原创 2025/5/18 21:12:57

WebGL 顶点缓冲区 (Vertex Buffer)

顶点缓冲区(Vertex Buffer)是WebGL中存储顶点数据的主要机制，它允许您高效地将大量顶点数据发送到GPU。

基本概念

顶点缓冲区用于存储：

顶点位置坐标
顶点颜色
纹理坐标
法线向量
其他顶点属性数据

创建和使用顶点缓冲区

1. 创建顶点数据

// 示例：三角形的三个顶点，每个顶点包含位置和颜色
const vertices = [// 位置(x,y)    颜色(r,g,b)0.0,  0.5,    1.0, 0.0, 0.0,  // 顶点1 (红色)-0.5, -0.5,    0.0, 1.0, 0.0,  // 顶点2 (绿色)0.5, -0.5,    0.0, 0.0, 1.0   // 顶点3 (蓝色)
];

2. 创建并绑定顶点缓冲区

// 创建缓冲区对象
const vertexBuffer = gl.createBuffer();// 绑定缓冲区为当前使用的ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将数据传入缓冲区
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

3. 设置顶点属性指针

// 获取着色器中属性位置
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const colorAttributeLocation = gl.getAttribLocation(program, "a_color");// 启用属性
gl.enableVertexAttribArray(positionAttributeLocation);
gl.enableVertexAttribArray(colorAttributeLocation);// 告诉WebGL如何从缓冲区读取数据
const stride = 5 * Float32Array.BYTES_PER_ELEMENT; // 每个顶点5个浮点数(x,y,r,g,b)// 位置属性
gl.vertexAttribPointer(positionAttributeLocation, // 属性位置2,                        // 每个顶点的大小(2个分量x,y)gl.FLOAT,                 // 数据类型false,                    // 是否归一化stride,                   // 步长(到下一个顶点的字节数)0                         // 偏移量
);// 颜色属性
gl.vertexAttribPointer(colorAttributeLocation,    // 属性位置3,                        // 每个顶点的大小(3个分量r,g,b)gl.FLOAT,                 // 数据类型false,                    // 是否归一化stride,                   // 步长2 * Float32Array.BYTES_PER_ELEMENT // 偏移量(跳过前2个浮点数x,y)
);

4. 绘制图形

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

顶点缓冲区的类型

WebGL中有两种主要缓冲区类型：

ARRAY_BUFFER - 用于顶点数据
ELEMENT_ARRAY_BUFFER - 用于索引数据(与索引缓冲区配合使用)

使用多个顶点缓冲区

您可以使用多个顶点缓冲区来存储不同类型的顶点属性：

// 位置数据
const positions = [0.0,  0.5,-0.5, -0.5,0.5, -0.5
];// 颜色数据
const colors = [1.0, 0.0, 0.0,0.0, 1.0, 0.0,0.0, 0.0, 1.0
];// 创建位置缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);// 创建颜色缓冲区
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

性能考虑

静态数据：使用gl.STATIC_DRAW表示数据不会或很少改变
动态数据：使用gl.DYNAMIC_DRAW表示数据会频繁改变
流数据：使用gl.STREAM_DRAW表示数据每帧都会改变

顶点数组对象(VAO)

在更复杂的应用中，可以使用顶点数组对象来封装顶点属性状态：

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);// 设置所有顶点属性...
// (位置、颜色、纹理坐标等)// 绘制时只需绑定VAO
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, 3);