0

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

enter image description here

using gl.LINES and an index buffer

enter image description here

gman
  • 100,619
  • 31
  • 269
  • 393
user4726090
  • 27
  • 3
  • 9
  • Im a bit confused by your question. It seems you got the polygons drawing working properly via drawElements but then for some reason you dont want to use indices/drawElements and want to use drawArrays? – WacławJasper Jun 22 '15 at 00:25
  • No. I have plotted points on my map; these points form the border of the polygons. Then, I am trying to draw lines, connecting these points so that a polygon would be rendered. I used drawArrays initially. This seems to have drawn the polygons. But in drawArrays, i used LINE_STRIP, which connected even the endpoint of one polygon with the next polygon that I am drawing(the polygons were not drawn separately, they were connected). So, I resorted to using drawElements and tried to use an index buffer to connect points and draw the polygon. – user4726090 Jun 22 '15 at 01:03
  • With the above code, I am able to connect 3 points and draw 3 consecutive lines. of the polygon. – user4726090 Jun 22 '15 at 01:03
  • please see the link above; it contains screenshots of what I am trying to render. – user4726090 Jun 22 '15 at 02:20

1 Answers1

1

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.

aeskreis
  • 1,923
  • 2
  • 17
  • 24
  • 1
    I don't think using degenerate primitives would help for the line drawing case. It still won't allow you to draw disconnected lines with `GL_LINE_STRIP`. – Reto Koradi Jun 23 '15 at 02:21
  • So, should I try using gl.LINES in webgl instead? – user4726090 Jun 23 '15 at 03:25
  • @RetoKoradi you are correct, this applies only to GL_TRIANGLE_STRIP – aeskreis Jun 23 '15 at 19:48
  • @user4726090 yes, gl.LINES would be the WebGL equivalent. – aeskreis Jun 23 '15 at 19:49
  • but still, i am not able to draw individual polygons. Everytime I reload the page, webgl seems to draw only one polygon now, instead of 2. – user4726090 Jun 28 '15 at 03:29
  • If you are still not able to draw multiple polygons, this is almost certainly a bug with your code. I would make sure all your vertex buffers are correct and use the WebGL Inspector chrome add-on to inspect your vertex buffers and draw calls to make sure that all of the state is set correctly. – aeskreis Oct 30 '15 at 22:33