I am using WebGL to draw lines and polygons on a canvas layer on top of my map for OSM data. I have written a query that returns a list of polygons from the planet_osm_polygon
table. It returns the list as JSON objects. I am using
gl.drawElements(gl.LINES, vetexIndex.length, gl.UNSIGNED_SHORT, 0)
To draw the polygons.
My index buffer looks like this:
pIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pIndexBuffer);
pVertexIndices = new Uint16Array([0,1, 1,2, 2,3]);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, pVertexIndices, gl.STATIC_DRAW);
Here, for the indices of the polygon, I have used 0,1 1,2 and 2,3 as pairs, which draws a three consecutive lines (as border surrounding the polygon) I would want to draw several other polygons like this. Without the use of drawElements() and index buffers, using just drawArrays() and gl.LINE_STRIP as so:
gl.drawArrays(gl.LINESTRIP, 0, json_data_length)
Draws the polygons but connects one end of each polygon with the next one (since it is a LINE_STRIP).
How can I draw separate individual polygons on my map? How can I use my index buffer here, for each polygon?
I do not want to use any external library; just plain JavaScript. I have already converted the lat-long coordinates from my OSM database into pixel coordinates in my JavaScript code.
using gl.LINE_STRIP
using gl.LINES and an index buffer
The only way you will be able to draw multiple polylines in a single draw call is to use GL_LINES. When OpenGL goes to render a buffer using GL_LINES or GL_LINESTRIP it will need 2 vertices from your vertex buffer, and use these 2 point to draw a line. The behavior of GL_LINES vs GL_LINESTRIP differs as follows:
GL_LINES:
line 1 - v[0], v[1]
line 2 - v[2], v[3]
line 3 - v[4], v[5]
...
GL_LINESTRIP
line 1 - v[0], v[1]
line 2 - v[1], v[2]
line 3 - v[2], v[3]
...
So as you can see, if you do not use GL_LINES, then you will not be able to disconnect the lines, and the lines will be considered one continuous polyline. The only exception is if you insert a degenerate primitive, but this is an advanced technique that I do not recommend for a beginner such as yourself.
Best of luck. Hope this solves your problem.
EDIT: My mistake, degenerate primitives only applies to GL_TRIANGLE_STRIP, it is not possible to draw degenerates with GL_LINESTRIP.