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

Question

我正在使用 WebGL 在我的 OSM 数据地图顶部的 canvas 图层上绘制线条和多边形。我写了一个查询，returns 来自 planet_osm_polygon table 的多边形列表。它将 returns 列表作为 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。我已经在我的 JavaScript 代码中将 OSM 数据库中的经纬度坐标转换为像素坐标。

使用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_LINES旅行

line 1 - v[0], v[1]
line 2 - v[1], v[2]
line 3 - v[2], v[3]
...

所以如你所见，如果你不使用GL_LINES，那么你将无法断开这些线，这些线将被视为一条连续的折线。唯一的例外是如果你插入一个 degenerate 基元，但这是一种高级技术，我不建议像你这样的初学者使用。

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

编辑：我的错误，退化图元仅适用于 GL_TRIANGLE_STRIP，无法使用 GL_LINESTRIP 绘制退化图元。

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

Drawing individual polygons - buildings, country borders, etc on a map (looping through index buffer) in WebGL

javascript

opengl-es

polygons

webgl

index-buffer