webgl 绘制多个独立的三角形

要绘制多个独立的三角形，可以使用WebGL的缓冲区对象和顶点数组对象。具体步骤如下：

1. 创建一个顶点数组对象（VAO）和一个缓冲区对象（VBO）。
2. 绑定VAO和VBO。
3. 将顶点数据存储到VBO中。
4. 配置顶点属性指针，告诉WebGL如何解析顶点数据。
5. 解绑VAO和VBO。
6. 在绘制之前，绑定VAO并调用绘制函数。

下面是一个简单的示例代码，用于绘制两个独立的三角形：

// 顶点数据
const vertices = [
  // 第一个三角形
  -0.5, 0.5, 0.0,
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  // 第二个三角形
  0.5, -0.5, 0.0,
  0.5, 0.5, 0.0,
  -0.5, 0.5, 0.0
];

// 创建VAO和VBO
const vao = gl.createVertexArray();
const vbo = gl.createBuffer();

// 绑定VAO和VBO
gl.bindVertexArray(vao);
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

// 将顶点数据存储到VBO中
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 配置顶点属性指针
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 解绑VAO和VBO
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// 绘制
gl.useProgram(program);
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.bindVertexArray(null);

相关问题:
1. WebGL有哪些常用的绘制方式？
2. 如何在WebGL中使用纹理？
3. WebGL的性能如何？