Как нарисовать повторяющуюся текстуру по контуру линии/полигона?

Question

[black_list_man]

Вот что я имею в виду. Причем паттерн не должен начинаться заново с каждой вершины, он должен продолжаться. Приметно также, как работает пунктирная линия.

Насколько я понял, привязать текстуру произвольной высоты непосредственно к линии невозможно, ибо ширина линии ограничена. Для этого следует триангулировать каждый сегмент линии и уже на полигоны накладывать текстуру.
Вопрос с триангуляцией я решил таким образом:

Рисуя полученный массив точек через

GL_TRIANGLE_STRIP

- получаю линию произвольной ширины. Осталось только наложить текстуру правильным образом. Но с текстурными координатами я совсем запутался.
Как ни пытался, но даже на примере одного сегмента не получается. текстура размазывается и ломается.

Comments

[AlexHell]

тот скриншот который текстура + чтото = чтото, это что должно получиться? а что у вас уже получилось? т.е что там размазывается - надо видеть
сейчас не понятно - в чем собственно проблема
текстурные координаты вывести? а как вы пробовали? показывайте

вот я беру ваш скриншот триангулированный линии и накладываю там uv

(там где и красным и синим в одной точке - так это потому что вершины в этой точке в одной и той же координате, но это разные вершины, т.е инстансы вершин)

такая uv приведет к локальным uv, но это не то что вы хотели
но это проще, тогда расположить сами линии равномерно (будет не очень красиво)

но судя по первой картинке, получится вроде как вы и хотели


главный вопрос тут - верно расположить триангулированные полигоны

если вы хотели глобальные uv, там надо матрицу преобразования юзать т.е каждую xy умножать на матрицу и получать uv.. но как это будет выглядеть в вашем случае - вопрос, и врятли это то что вам нужно

наверное проблема у вас (показывайте) в высоте полигонов, может быть вы взяли ее слишком маленькую, т.е. прям по высоте пунктирной линии.. а надо брать высоту пропорционально итоговой картинки - должны сохраняться пропорции
т.е вот ваша накладываемая текстура в ширину в 3 раза больше высоты, значит и итоговый полигон должен быть по x-y координатам в 3 раза больше в ширину чем в высоту

еще ремарка - даже с сохраненными пропорциями, может получиться размытие - когда пиксельный размер текстуры выводимой на полигом отличается от пиксельного размера самого полигона, тут уж надо все подгонять идеально

[black_list_man]

AlexHell,
Вот что получается. Я для наглядности выбрал простую текстуру в виде иконки и увеличил размер. Дело в том что длина сегмента почти никогда не совпадает с длиной текстуры. Это просто геометрия, являющаяся частью карты. К тому же масштаб меняется динамически и экранное расстояние между сегментами всегда разное. Текстура должна как бы обрезаться и продолжаться со следующего сегмента. В данный момент я рассчитываю длину сегмента и делю ее на длину текстуры, получая таким образом кол-во повторений. Получается, к примеру 5,67 Для того чтобы начать следующий сегмент не с начала, а продолжить, я беру дробную часть от количества повторений на прошлом сегменте, (0,67 в данном случае) и текстурная координата уже становится не (0,1) а (0.67,1).
Но в итоге, во-первых из за того что кол-во повторений одинаковое, в длина внешнего и внутреннего контура сегмента разная, - получается смещение текстуры. Во-вторых, при больших "углах" между сегментами линии, паттерн перекашивается, словно ложась на бок.
Пробовал отдельно учитывать длину внешней и внутренней граней. Т.е. разное кол-во повторений текстуры для верхней и нижней части сегмента. Но результатом недоволен остался.

Проблема в том, что я не знаю правильно ли я вообще двигаюсь к желаемому результату. Я не могу понять как вообще должны располагаться текстурные координаты, чтобы при текстура оставалась перпендикулярна нормали сегмента.
Вот скриншот из ПО, в котором это работает как надо. То, к чему я стремлюсь. Но не понимаю как это реализовано. Этот тот же "круг" что и в скриншоте из вопроса, но при меньшем масштабе. Видно как текстура "огибает" его. А на линиях рядом, видно как даже при больших углах она не искажается.

[AlexHell]

вы показали 2 скриншота как у вас получилось с текстурой - совсем другой
и не показали что должно получиться именно с этой текстурой

а еще показали совсем другую карту

не стоит разные примеры давать

[AlexHell]

покажите в точности что вы хотите видеть например на таком углу

и на таком

[AlexHell]

возможно так вы хотите видеть? это в моем понимании перпендикулярно нормали, но именно на стыке не ясно что вы хотите увидеть

[AlexHell]

возможно вам подошел бы вариант вот такой?

[AlexHell]

или такой лучше?


главное что в таком варианте - тут плотность между объектами маленькая, и на стыке просто ничего лишнего не видно, при данной текстуре,

но при другой текстуре - могут быть отличия, и вот что именно вы хотите при наложении двух прямоугольников видеть - вопрос

[AlexHell]

мне кажется чтобы без триангуляции обойтись и текстурных заполнений, и получить то что на референсе, вам стоит идти другим путем
* создать 2 независимых картинки, а не сплошную текстуру
1) якорь
2) линия и с нормалью

* идти вдоль линии (заданной или как функцией, или таблицой - не суть) и семплировать с определенной частотой, и для каждой точки семпла (x,y)
- идентифицировать - какой имеет поворот (angle) нормаль или касательная (одна от другой на 90 градусов отличается - не суть) в этой точке (производная функции = 0, или проще - таблично задать по вашим данным)
- расположить в (x,y) нужную картинку (1 или 2 - скажем каждые 4 шага располагаем якорь, а иначе линию) с поворотом angle

получится так (4 семпла)

[black_list_man]

AlexHell,

Да, такой вариант выглядит неплохо. Но насколько я понимаю требуется еще один треугольник. И не совсем понятно как это будет работать на углах близких к 90.
В целом, как я не пытался в уме расположить текстуру на текущий вариант триангуляции, всегда были проблемы со стыками. Получалось как-то так

При этом сразу понятно что при больших углах начнутся проблемы. Надо будет сильно растягивать.
При этом на скриншотах нет никаких искажения на больших углах. Выглядит это так, словно там вообще нет соединения сегментов.

Возможно действительно сам способ триангуляции не позволяет разместить текстуру как надо. Я все это время пытаюсь понять как это сделано в том проприетарном приложении, чьи скриншоты я прикладывал. Если бы я знал, было бы легче.

Последний способ мне кажется через чур сложным, исходя из того что таких паттернов довольно много, и все они разные. Паттерт с якорем лишь один из многих, который я выбрал в качестве примера. Все зависит от атрибутов линии. Нужен какой-то универсальный способ.

[AlexHell]

black_list_man,

Последний способ мне кажется через чур сложным

последний способ довольно простой, он проще в реализации чем верная триангуляций, чтобы текстуры наложить верно
и он вполне универсальный, там нет никаких проблем с разными значками - любой подставляйте, и нет проблем с искажениями, которые будут при махинациях с UV, я гарантирую что будут, и вы их не решите

то что вы показали как проблему на углах - вы не сможете сделать корректно без растягивания, потому что вариантов таких не существует, кроме как располагать целиковыми иконками, как я предложил

Я все это время пытаюсь понять как это сделано в том проприетарном приложении, чьи скриншоты я прикладывал. Если бы я знал, было бы легче.

если я скажу что 99% оно сделано - так как я предложил в конце, чтото изменится? попробуйте, в чем проблема? я делал уже такой вариант, в другом контексте, и выглядело нормально

[black_list_man]

AlexHell, В общем, я подумал над последним способом и реализовал его, но немного иначе. Я не стал делить текстуру на сегменты, (да это и почти не осуществимо в моем случае, ибо сами текстуры рисуются динамически, и имеют разный размер, в зависимости от DPI устройства, к тому же, не все их них вообще могут быт разделены на составляющие, некоторые имеют непрерывный характер). Я просто рисую всю текстуру, пока не закончится сегмент, в конце сегмента конечно обрезаю. А в следующем сегменте я уже начинаю рисовать текстуру не с начала, а с того места где закончил в прошлый раз. В итоге выглядит все это хорошо. Хотя кончено на "закруглениях" видны артефакты, в виде полос. Ибо текстура нарезается, но не растягивается. Но это не столь критично.
Но что самое интересное, я нашел как настроить DPI в приложении - образце и при бОльшем масштабе самих текстур обнаружил там точно такие же артефакты, что говорит о том, что там совершенно идентичная реализация.
На рисунке: слева - мое приложение, справа - образец. (Стоит открыть рисунок в полном масштабе, чтобы были видны артефакты)


Хотя в некоторых ситуациях артефактов там значительно меньше. Интересно как они этого добились

[AlexHell]

ок, если ваш способ работает без сильных артефактов, и то что у конкурентов похожая реализация - допускаю
другие артефакты - значит реализация чуть другая

на вскидку такие
артефакты происходят изза неверных текстурных координат
возможно гдето округление не в ту сторону
или же вершинные координаты аналогично округляются не туда, или расположены чуть не там

еще гипотеза артефактов - может даже более вероятней, изза того что это загругление, вы пытаетесь текстуру тоже закруглить, что не так то просто, т.е. ломаете прямую линию, делая ее наклонной, и какието пиксели не компенсируете, получая пустоту в том месте

тут виден излом, и он не компенсированный


но я бы предложил сделать моим способом с семплингом целиковых иконок - там бы не было артефактов нарезки текстур, но и загруглений иконки бы не было, все иконки были бы четко так как в исходных файлах, но вам видней, может это тоже не то

[black_list_man]

AlexHell, Артефакты происходят как следствие самого метода. У каждого куска текстуры своя нормаль. Я понимаю почему так происходит. Я немного уменьшил количество "щелей", путем уменьшения кол-ва точек в геометрии во время отрисовки. (убираю точку, если она ближе 7 пикселей от предыдущей). Но упрощать дальше уже нет смысла, ибо тогда разница между нормалями станет больше, и хотя самих "щелей" убавится, те что останутся будут шире.

Образец - это не конкурирующее приложение, просто оно закрытое. А мне нужен картографический движок, на который я смогу навешивать свой специфический функционал. Поэтому приходится делать самому.
И если внимательно посмотреть на него, то там тоже видны похожие "щели", причем в таком же количестве, просто они почему-то видны лишь ближе к внешней стороне текстуры, что делает их почти незаметными.

[black_list_man]

AlexHell,

Добавив небольшой буфер к части текстуры (+2 пикселя, так чтобы одна часть текстуры как бы накладывалась на следующую) получилось приблизиться к результату. На рисунке все также мой софт - слева.

[AlexHell]

тут явно просится интерполяция
или размытие
я не вникал точно в ваш метод, как вы нарезали меш вершины и как задали UV, вам видней, подумайте

с учетом такого меша

не понятно почему получаются пустоты
по идее у вас должно накладываться внахлест, а не нехватать

[AlexHell]

не совсем верный буфер значит выбрали, с чего вдруг такие куски появились?
оч похоже что UV съехало

мне кажется от таких артефактов надо избавляться, оч криво смотрится

[AlexHell]

вместо такого

попробуйте пошире сделать, внахлест

[AlexHell]

или это не меш, а 3 независимых иконки? тогда понятно от чего баг, надо чтоб была интерполяция в меше

[black_list_man]

AlexHell,
В данном случае это не артефакт. Просто геометрия закончилась в этом месте и паттерн был как бы обрезан. "Конкурент" в этом плане работает точно также. Просто скриншот получился более удачным.

Да, это не меш. Это независимые иконки. Это как раз таки способ без триангуляции. А как иначе? Если бы я использовал меш, то пришлось бы вернуться в самое начало к вопросу о верных текстурных координатах, и как их растягивать на углах.

[AlexHell]

black_list_man, раз это много независимых иконок, то имхо лучше было бы сделать как я предлагал с ними - целиковые иконки делать, а не нарезку, и таких артефактов у вас бы не было.. да не было бы и скругления, но от него толку имхо тоже нету, просто ровные иконки пиксель-в-пиксель как в исходном файле - выводить в нужных точках с нужным поворотом, аппроксимируя кривую\ломаную

[AlexHell]

В данном случае это не артефакт.

в данном случае это Артефакт :) То что вы нашли этому объяснение - так оно всегда есть. Важно что юзеру будет казаться что это не красиво