Создание бесконечного ткацкого станка: разделение изображений на потоки с помощью Three.js | Кодропс

Примечание редактора: Празднование конференции Three.js сегодня принимает красивый тактильный оборот. «Несплетенный» Клемана Грелье превращает простую полосу изображений в нечто удивительно живое: фотографии мягко сплетаются вместе и распутываются в нити, перемещаясь по экрану. Великолепный пример того, как немного магии Three.js может сделать знакомый пользовательский интерфейс совершенно неожиданным.

Большинство слайдеров изображений перемещают изображения. Этот их разбирает.

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

Three.js, GSAP, два шейдера, один HTML-файл, без этапа сборки.

Ментальная модель

Каждая из 26 полос представляет собой лента: независимая часть геометрии, две вершины в высоту и 21 в ширину, текстурированная собственным горизонтальным фрагментом изображения. Сложенные друг на друга без пробелов, они образуют цельную картину.

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

Шаг 1. Дайте каждому потоку собственные вершины.

Очевидный подход — использовать одну большую плоскость с множеством горизонтальных подразделений. Не. Соседние полосы в плоскости имеют общие вершины, а общая вершина может одновременно находиться только в одном месте. Если полоса 4 сдвинулась на 300 пикселей, а полоса 5 — на 80 пикселей, вершина между ними должна выбрать одну позицию, растягивая геометрию, чтобы покрыть разницу. Вместо щели вы получаете резиновую мембрану.

Итак, строим потоки отдельно, каждый со своими вершинами:

for (let t = 0; t 

Шаг 2. Продвигайте каждую нить с произвольной скоростью.

Во-первых, одно число, сообщающее шейдеру, насколько близко карта находится к краю. Назови это tear: 0 в середине экрана, 1 по краю.

float tear = max(
  1.0 - smoothstep(-halfWidth, -halfWidth + zone, x),
  smoothstep(halfWidth - zone, halfWidth, x)
);

Затем слайд:

float rnd = hash(threadId + seed);
world.x += direction * pow(tear, 1.4) * (60.0 + rnd * 420.0);

Вот и весь эффект. rnd различается в зависимости от нити, поэтому все они преодолевают разные расстояния. Расширить 60.0 + rnd * 420.0 и читается как расческа; сузьте его, и это будет восприниматься как размытие в движении.

Шаг 3. Откройте пробелы и затемните их.

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

float edge  = abs(rim);                  // 0 at the thread's middle, 1 at its edge
float width = mix(0.8, 0.2, tear);       // visible width: nearly all, then a core
float alpha = 1.0 - smoothstep(width, width + 0.06, edge);

alpha = mix(1.0, alpha, smoothstep(0.03, 0.30, tear));   // no gaps until they move

color = mix(color, vec3(1.0), smoothstep(0.55, 1.0, tear) * 0.8);   // whiten
alpha *= 1.0 - smoothstep(0.75, 1.0, tear) * 0.65;                  // then vanish

Здесь стоит знать две вещи. mix(1.0, alpha, ...) line приводит к значению альфа ровно 1, пока карта находится в середине экрана, поэтому плетеная карта выглядит идентично простой фотографии. И отбеливание перед исчезновением имеет значение: только исчезновение альфа-канала оставляет прозрачные цветные линии, тогда как предварительное отбеливание означает, что нити почти становятся страницей, прежде чем они исчезнут.

Вещи, с которыми стоит поиграть

60.0 + rnd * 420.0: контролирует, насколько смещены потоки. Это самый большой рычаг.

26 нитки: около 8 похоже на рваную бумагу, а 60 — на волосы.

pow(tear, 1.4): увеличьте значение, чтобы фотография дольше сохранялась.

Размер зоны отрыва: определяет, какая часть экрана разворачивается одновременно.