Повторяющаяся текстура в строке

Question

У меня проблема с повторением текстуры над моими треугольниками.

Мой взгляд простой 2D орфографической проекции.

У меня есть полилиния - для этого примера - 3 балла выглядит как зеркальный Л.

Для того, чтобы нарисовать эту ломаную линию с шириной друга, чем 1 (пределом WebGL сейчас) Я вычисление для каждой точки необходимо смещение и создание треугольников в конце.

1. Добавления каждой вершины в два раза
2. добавления для каждой вершины вычисленного смещения
3. В vshader, в соответствии с разрешением я компенсируя вершины.

Зеленый мой полилинии, и синий являются значения Коррекции в пикселях

После обработки шейдеров расширяет вершины, которые он создает свои треугольники.

Теперь для моей проблемы

Я пытаюсь повторить свою текстуру над этими треугольниками вдоль оси X.

Моя текстура

и мой разыскиваемый результат

То, что я успел сделать это результат, и я понимаю, почему это происходит .. я просто дон «т знаю, как решить это

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

Это мой Vexel вычисления позиции:

// vTexCoords.s is the repeat count, and due to i'm working with my world units i need to divide by it scale. 
// vTexCoords.t is 0 or 1 according to the vertex Y Position 
vec2 vexelPos = fract(vec2(vTexCoords.s/(uPixelWolrdScale.x), vTexCoords.t)); 

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

но мои клиенты не нравится.

Answer 1

Неполный ответ см редактировать ниже

Для достижения эффекта вы хотите, пункты 2 и 3 должны иметь различную текстуру координат, когда часть треугольников (132) и (234). Для этого вам необходимо дублировать эти точки, как показано на рисунке ниже.

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

Если вы хотите придерживаться треугольных полос, хотя, учитывая, сколько у вас треугольников оно может не стоить усилий, вы можете использовать такой порядок, как'3'45.

Редактировать

Мой ответ был действительно неполным. Но ваше замечание заставило меня найти возможное решение. Ваша черепица симметрична относительно оси (23). Поэтому вам даже не нужно дублировать точки 2 и 3.

vTexCoords.s должно быть разным для сегментов [02] и [13]. Это даст вам 2 и 3 координаты vexel с тем же самым уравнением, которое у вас есть. Затем, как и раньше, чтобы вычислить 4 и 5, вы начинаете с того места, где вы были на 2 и 3 в пространстве текселя. Разница в том, что вам нужно вычитать количество повторов повтора (из-за симметрии) и не добавлять его. Для вертикальной части, это приводит к чему-то вроде этого:

vec2 vexelPos = fract(vec2(lastPos - vTexCoords.s/(uPixelWolrdScale.x), vTexCoords.t)); 

второй редактировать

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

С другой стороны, если вам нужно только поместить точку 2, а не обязательно в точку 3, то просто вернитесь к дублирующимся точкам: идея 2 'и 3'. Затем дайте координаты текстуры относительно длины каждого сегмента, как объяснено в моем первом редактировании.