Цветы в дизайне Floral от Shaqyrtu — это не картинка и не GIF. Они рисуются процедурно в реальном времени, прямо на видеокарте вашего устройства, и растут. Нажмите на экран — появится новый цветок. Объясняем, какая технология стоит за этим.

Коротко: что это значит?

Обычная картинка состоит из готовых пикселей. WebGL-цветок — это код. В каждом кадре видеокарта пересчитывает каждый пиксель цветка по формуле. Поэтому цветок:

чёткий в любом размере (как вектор, не размывается),
живой — растёт, набирает бутон, раскрывается,
реагирует на ваши действия (нажатие = новый цветок).

Технологический стек

1. WebGL + Three.js

WebGL — стандарт, позволяющий использовать видеокарту (GPU) прямо в браузере. Мы управляем им через библиотеку Three.js — она упрощает низкоуровневые детали WebGL.

Сцена простая: одна цельная плоскость на весь экран (fullscreen plane) — «холст», на котором рисуются цветы.

2. GLSL-шейдеры

Вся логика отрисовки — в шейдерах, маленьких программах, работающих на GPU:

Вершинный шейдер (flower.vert) — размещает геометрию плоскости.
Фрагментный шейдер (flower.frag) — вычисляет цвет каждого пикселя. Цветок «рисуется» именно здесь: лепестки, стебель, цвет — всё математическими функциями.

Естественный, неровный край цветка создаётся шумом Simplex (snoise) — это даёт органичную, «нарисованную от руки» форму. Цвет настраивается в пространстве HSV, поэтому фоновый и акцентный цвета легко менять.

3. Анимация — время и случайность

Каждый цветок описывается несколькими числами:

u_point — где на экране растёт цветок,
u_time — время, которое ведёт анимацию роста,
u_stop_randomizer — случайные значения, делающие каждый цветок уникальным (размер, степень раскрытия, изгиб).

Благодаря этому не бывает двух одинаковых цветов — как в настоящем саду.

4. Связь со скроллом — «закрытие» цветка

При прокрутке страницы вниз цветы плавно закрываются (эффект iris-close). Это управляется параметром wiltAmount: 0 — полностью открыт, 1 — полностью закрыт. Позиция скролла напрямую передаётся в шейдер, и цветок будто «дышит» вместе с прокруткой.

5. Производительность

«Живая» графика может расходовать батарею, поэтому есть несколько защит:

Ограничена плотность пикселей — на Retina-экранах нет лишних вычислений.
Останавливается вне экрана — если секция с цветами уходит за пределы экрана, анимация и GPU выключаются (pauseWhenOffscreen).
Запускается только при появлении — пока секция не достигнута скроллом, WebGL не загружается.
Адаптирована под браузер Telegram — высота считается в единицах svh (чтобы избежать сбоев во встроенном браузере).

Почему это важно?

Открывая приглашение, гость видит не статичную бумагу, а живую, отзывчивую страницу — цветы растут, реагируют на нажатие, закрываются при скролле. Это делает приглашение запоминающимся и показывает качество бренда.

Дизайн Floral вдохновлён открытым WebGL-этюдом с цветами от Ksenia K и адаптирован под формат приглашений Shaqyrtu.

Попробуйте дизайн Floral — «посадите» цветы сами и почувствуйте, как они живые.

WebGL-цветы — как сделана анимация живых цветов в приглашении