Рисование отдельных многоугольников - зданий, границ страны и т. Д. На карте (циклически проходя через индексный буфер) в 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 в пиксельные координаты в моем коде 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.