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

Posted 2023-02-22

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

【英文标题】：Drawing individual polygons - buildings, country borders, etc on a map (looping through index buffer) in WebGL

【发布时间】：2015-06-21 23:48:27

【问题描述】：

我正在使用 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 数据库中的经纬度坐标转换为 JavaScript 代码中的像素坐标。

使用 gl.LINE_STRIP

使用 gl.LINES 和索引缓冲区

【问题讨论】：

我对你的问题有点困惑。看来您通过 drawElements 使多边形绘图正常工作，但由于某种原因您不想使用 indices/drawElements 并想使用 drawArrays？

没有。我已经在我的地图上绘制了点；这些点形成多边形的边界。然后，我尝试画线，连接这些点，以便渲染多边形。我最初使用 drawArrays。这似乎已经绘制了多边形。但是在drawArrays中，我使用了LINE_STRIP，它甚至将一个多边形的端点与我正在绘制的下一个多边形连接起来（多边形不是单独绘制的，它们是连接的）。所以，我求助于使用 drawElements 并尝试使用索引缓冲区来连接点并绘制多边形。

使用上面的代码，我可以连接 3 个点并连续绘制 3 条线。的多边形。

请看上面的链接；它包含我正在尝试渲染的屏幕截图。

【参考方案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，那么您将无法断开线，这些线将被视为一条连续的折线。唯一的例外是如果您插入一个 degenerate 原语，但这是一种高级技术，我不建议像您这样的初学者使用。

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

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

【讨论】：

我不认为使用退化原语对画线有帮助。它仍然不允许您使用GL_LINE_STRIP 绘制断开的线。

那么，我应该尝试在 webgl 中使用 gl.LINES 吗？

@RetoKoradi 你是对的，这仅适用于 GL_TRIANGLE_STRIP

@user4726090 是的，gl.LINES 相当于 WebGL。

但是，我仍然无法绘制单个多边形。每次我重新加载页面时，webgl 现在似乎只绘制一个多边形，而不是 2 个。