Nano Hash - криптовалюты, майнинг, программирование

Отрисовка отдельных полигонов - зданий, границ страны и т. д. на карте (циклический индексный буфер) в WebGL

Я использую 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 и индексный буфер

введите здесь описание изображения

javascript webgl opengl-es index-buffer polygons
21.06.2015

  • Я немного смущен вашим вопросом. Кажется, у вас правильно работает рисование полигонов с помощью drawElements, но по какой-то причине вы не хотите использовать index/drawElements и хотите использовать drawArrays? 22.06.2015
  • Нет. Я нанес точки на карту; эти точки образуют границу многоугольников. Затем я пытаюсь нарисовать линии, соединяя эти точки, чтобы отрисовывался многоугольник. Сначала я использовал drawArrays. Кажется, это нарисовало полигоны. Но в drawArrays я использовал LINE_STRIP, который соединял даже конечную точку одного многоугольника со следующим многоугольником, который я рисую (многоугольники не рисовались отдельно, они были соединены). Итак, я прибегнул к использованию drawElements и попытался использовать индексный буфер для соединения точек и рисования многоугольника. 22.06.2015
  • С помощью приведенного выше кода я могу соединить 3 точки и нарисовать 3 последовательные линии. полигона. 22.06.2015
  • см. ссылку выше; он содержит скриншоты того, что я пытаюсь отобразить. 22.06.2015

Ответы:


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.

22.06.2015
  • Я не думаю, что использование вырожденных примитивов поможет в случае рисования линий. Он по-прежнему не позволит вам рисовать несвязанные линии с помощью GL_LINE_STRIP. 23.06.2015
  • Итак, должен ли я вместо этого попробовать использовать gl.LINES в webgl? 23.06.2015
  • @RetoKoradi вы правы, это относится только к GL_TRIANGLE_STRIP 23.06.2015
  • @user4726090 user4726090 да, gl.LINES будет эквивалентом WebGL. 23.06.2015
  • но все же я не могу рисовать отдельные полигоны. Каждый раз, когда я перезагружаю страницу, webgl теперь рисует только один полигон вместо двух. 28.06.2015
  • Если вы по-прежнему не можете рисовать несколько полигонов, это почти наверняка ошибка вашего кода. Я бы удостоверился, что все ваши буферы вершин верны, и использовал надстройку Chrome WebGL Inspector для проверки ваших буферов вершин и вызовов отрисовки, чтобы убедиться, что все состояние установлено правильно. 31.10.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..