在WebGL中绘制地图上的单个多边形 - 建筑物，国家边界等（循环索引缓冲区）

Question

我正在使用WebGL在我的地图上方的画布图层上绘制线条和多边形以获取OSM数据。我编写了一个查询，它返回planet_osm_polygon表中的多边形列表。它将列表作为JSON对象返回。我正在使用

 gl.drawElements(gl.LINES, vetexIndex.length, gl.UNSIGNED_SHORT, 0) 

绘制多边形。

我的索引缓冲区如下所示：

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);

这里，对于多边形的索引，我使用了0,1 1,2和2,3作为对，绘制了三条连续的线（作为多边形的边框）  我想画这样的其他几个多边形。不使用drawElements（）和索引缓冲区，只使用drawArrays（）和gl.LINE_STRIP：

gl.drawArrays(gl.LINESTRIP, 0, json_data_length)

绘制多边形但将每个多边形的一端与下一个多边形连接（因为它是LINE_STRIP）。

如何在地图上绘制单独的单个多边形？对于每个多边形，我如何在这里使用索引缓冲区？

我不想使用任何外部库;只是简单的JavaScript。我已经将我的OSM数据库中的lat-long坐标转换为我的JavaScript代码中的像素坐标。

使用gl.LINE_STRIP

使用gl.LINES和索引缓冲区

Answer 1

您可以在单次绘制调用中绘制多条折线的唯一方法是使用GL_LINES。当OpenGL使用GL_LINES或GL_LINESTRIP渲染缓冲区时，它将需要来自顶点缓冲区的2个顶点，并使用这2个点绘制一条线。 GL_LINES与GL_LINESTRIP的行为不同如下：

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]
...

正如您所看到的，如果您不使用GL_LINES，那么您将无法断开线条，并且线条将被视为一条连续折线。唯一的例外是如果你插入一个退化原语，但这是一种我不推荐给像你这样的初学者的高级技术。

祝你好运。希望这能解决你的问题。

编辑：我的错误，简并原语只适用于GL_TRIANGLE_STRIP，不可能用GL_LINESTRIP绘制退化。