在webGl中绘制多个东西

Question

我的任务是在画布上的不同点绘制多个圆圈。我有圈顶点，但我似乎无法弄清楚如何同时绘制所有这些。我可以单独绘制每一个，但不是我需要的全部五个。

我的代码看起来像这样

var vertices = [];
var blueCircle = drawCircle(-50,-50,200);
var yellowCircle= drawCircle(50,50,200);
var blackCircle= drawCircle(50,50,200);
var greenCircle= drawCircle(50,50,200);
var redCircle= drawCircle(50,50,200);

vertices.push(blueCircle);
vertices.push((yellowCircle);
vertices.push(blackCircle);
vertices.push(greenCircle);
vertices.push(redCircle);

这给了我一个由每个圆阵列组成的顶点数组，如

vertices:(5) [Array(2272), Array(2272), Array(2272), Array(2272), Array(2272)]

我有办法在其组件中添加每个数组吗？如同拥有一个由所有11360个元素组成的顶点数组？

如果没有，我怎么可能循环遍历多维数组并使用

绘制每个点

gl.DrawArrays(GL_POINTS, number, number);