Draw different length of LINE_LOOPs from buffer

Question

I have many Polylgons. one contains different amount of points. I'm drawing them using LINE_LOOP in 2d (orthographic).

Now i want to upload all of them to a single buffer. The problem is when i'm drawing the buffer using glDrawArrays the last point of the first polygon is connected by line to the next point which is the first point of the second polygon, and so on.

I know that with glDrawElements i can send the indices and it is solving the issue. but for this, I need to send allot of data for drawing polygons with allot of points, and changing the LINE_LOOP to LINES.

Is there a way to draw only with the start and end indices of each polygon ?

For example

// My 2d polygons points are 
polygons = [ 
  0,0,   10,0,  10,5, 5,10,      // polygon 1
  20,20, 30,20, 30,30            // polygon 2
]

// First polygon is starting at 0, the second at index 8
// If there was function like this
draw(polygons, [0, 8]);

------ADDITION-----------------

We can do it in OpenGL by calling the glDrawMultiArray - Thanks for ratchet freak answer.

But in WebGL this function does not exists. Is there any alternative ?

Answer 1

you can use glMultiDrawArrays:

starts=[0,4,...]
counts=[4,3,...]

glMultiDrawArrays(GL_LINE_LOOP, starts, counts, starts.length);

otherwise with glDrawElements you can specify a primitive restart index

glEnable(GL_PRIMITIVE_RESTART);
glPrimitiveRestartIndex(65535);
index = [0,1,2,3,65535,4,5,6,65535,...]

//bind and fill GL_ELEMENT_ARRAY_BUFFER​
glDrawElements(GL_LINE_LOOP, index.size, GL_UNSIGNED_INT, 0);
//will draw lines `0,1 1,2 2,3 3,0 4,5 5,6 6,4`

Answer 2

With WebGL, which AFAIK corresponds to ES 2.0 features, I don't think there's a way around making multiple draw calls. For your example, you would need two draw calls:

glDrawArrays(GL_LINE_LOOP, 0, 8);
glDrawArrays(GL_LINE_LOOP, 8, 6);

You could reduce it to a single draw call by using GL_LINES instead of GL_LINE_LOOP, but that means that your vertex array gets twice as large, because you need the start and end point of each line segment.

If you use an index buffer combined with GL_LINES, the increase is only 50%, as long as you don't have more than 64k vertices in a buffer. The vertex array itself remains at its original size, and you will need two GL_UNSIGNED_SHORT indices per vertex in addition. So that's 4 more bytes per vertex, on top of the 8 bytes (for 2 floats) you have for the vertex coordinates. This is probably your best option with the limited ES 2.0 feature set.