Shaqyrtu-дың Floral дизайнындағы гүлдер — сурет немесе 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 бірлігімен есептеледі (in-app браузердегі қателіктерді болдырмау үшін).

Неге бұл маңызды?

Қонақ шақыруды ашқанда статикалық қағаз емес, тірі, сезімтал бет көреді — гүлдер өседі, басуға жауап береді, скроллмен жабылады. Бұл шақыруды есте қаларлық етеді әрі брендтің сапасын көрсетеді.

Floral дизайны Ksenia K-ның ашық WebGL гүл этюдінен шабыт алып, Shaqyrtu шақыру форматына бейімделді.

Floral дизайнын байқап көр — гүлдерді өзің «отырғызып», қалай тірі екенін сез.

WebGL гүлдер — шақырудағы тірі гүл анимациясы қалай жасалады