Анимировали песок для прелоадера: как креативная разработка помогла решить задачу клиента
Привет, на связи Ваня — разработчик в «Лиге А.»! На одном из проектов мы анимировали песок для прелоадера. Подобного ещё не делали, поэтому загорелись идеей и пошли изучать документации. В статье рассказываем, почему выбрали шейдеры для реализации, для чего использовали GPT и как учили частицы песка двигаться.
Мы с редактором Лерой немного перехватил аккаунт СEO Лизы, чтобы поделиться с вами необычной задачей от клиента. Проект под NDA, поэтому не смогу показать, как круто прелоадер смотрится на сайте. Зато расскажу, как работал над анимацией. Будет немного технических деталей и несколько красивых гифок с песком.
Эта статья — мой опыт в креативной разработке. Чтобы его передать, я выдал Лере все факты и детали, а она собрала их в простую и понятную статью.
Клиент пришёл с задачей реализовать на сайте прелоадер с анимацией песка
Обычно пользователя встречают типичные прелоадеры — спиннер или прогресс-бар. Технически сделать такой несложно с помощью CSS или изображений.
В нашем же случае, частицы песка должны двигаться и закрывать собой весь экран. То есть, их должно быть очень-очень много, иначе останется пустое место.
Чтобы это реализовать, я наметил план действий:
- Найти информацию про анимацию частиц. Неважно видео или статьи. Спойлер, нашёл парочку классных статей, которыми поделюсь в конце.
- Работать выбрал с шейдерами, поэтому нужно было глубже изучить Webgl и GLSL, чтобы написать нужные шейдеры.
- Попробовать сгенерировать частицы разного оттенка, чтобы они не выглядели, как оранжевое пятно.
- Научить частицы песка двигаться.
- Вспомнить математику, чтобы задать частицам нужное движение.
Прошлый опыт подсказал мне, что работать с частицами через JS — плохая затея
Как я уже писал выше, для решения задачи нужно очень много частиц. Это значит, что нужно создать много объектов и как-то с ними взаимодействовать. Проблема в том, что примерно ни один компьютер не выдержит сотни тысяч частиц, каждая из которых должна обновлять своё состояние минимум 60 раз в секунд.
В общем, делать через JS — не выход. Поэтому я присмотрелся к шейдерам. Они буквально позволяют создавать реалистичное освещение и тени. Как раз для того, чтобы в будущем частицы отличались по оттенкам. А ещё шейдеры напрямую взаимодействуют с видеокартой, которая лучше справляется с большим количеством операций.
Для реализации оставалось только чуть глубже изучить Webgl и GLSL, чтобы написать нужные.
Это достаточно узкая и сложная сфера во фронтенде. При этом, очень эффектная и эффективная. С шейдерами можно делать реалистичные сцены и красивые анимации. Как мне кажется, у японцев это получается лучше всего
У меня было три пути, от которых я бы мог начать:
- Сделать на Pixijs — я знаю эту библиотеку и могу в ней разобраться.
- Сделать на Three.js — потому что есть очень много референсов с анимацией частиц.
- Использовать чистый Webgl и изучить что-то новенькое.
Как вы уже догадались, я выбрал 3 вариант. Во-первых, для анимации частиц через Pixijs нужно было бы исхитрится и потратить время на изучение документации. И всё равно пришлось бы разбираться с тем, как работает Webgl. Во-вторых, в Three.js я не сильно уверен — непонятно, сколько времени бы потратил и какой эффект получил.
В процессе нашёл следующую демку и код к ней. Тогда-то я понял, что лучше разобраться с базой.
Решил для начала отрисовать сам песок
Я занялся так называемым «генеративным искусством» — когда человек объединяется с компьютерными алгоритмами и создаёт что-то уникальное. Если верить этой статье с Хабра, то это искусство, созданное с помощью кода.
В общем, у меня появилась идея сгенерировать частицы разного оттенка. С этим я обратился к ChatGPT и составил начальную палитру.
Потом использовал симплексный шум — это градиентный шум, который состоит из набора будто бы случайных направлений. С его помощью сгенерировал саму текстуру песка. Вот, что получилось.
Как оказалось позже, это была самая простая задача.... Дальше пошло сложней
Теперь нужно было научить частицы двигаться
При этом, все расчёты перенести на видеокарту, а на JS оставить только первичную генерацию буферов. С её помощью все частицы занимают свою позу. Так я узнал о волшебной штуке — Transform Feedback. Если говорить просто, он помогает повторно использовать результаты вычислений без необходимости начинать всё заново. В моём случае, не считать все созданные частицы.
Чтобы всё двигалось, я создал 2 буфера для хранения частиц и поочерёдно передавал их видеокарте, чтобы та проводила операции и делала магию на экране.
Звучит просто, но для первого раза это совсем не тривиальная задача
Когда всё вроде как заработало, пришлось вспоминать математику
Буду гуманитарием и скажу, что пришлось привыкнуть к синтаксису GLSL, который позволяет управлять процессом обработки графики и создавать всякие визуальные эффекты. Например, освещение, тень или текстуры.
В общем, чтобы не томить вас терминами и ожиданием — показываю эффект, который у меня получился.
Как работает анимация песка: у меня есть область, от которой отталкиваются частицы. И со временем она увеличивается. Чтобы всё смотрелось хаотично и разбросано, я добавил немного рандома к моменту движения.
Ну вот и всё. Анимация готова и примерно также выглядит на сайте клиента. Мы все довольны результатом — компьютер не сгорел, частицы двигаются и выглядят, как настоящий песок.
Как и обещал, оставляю полезные материалы:
Как вам результат? Сделали бы у себя на сайте такой прелоадер? Пишите в комментариях
И приходите к нам за креативной разработкой. Мы сейчас активно развиваемся в этом направлении и можем сделать физику любых объектов — для сайта, лендинга или игры.
Пишите нам на почту или Лизе в телеграм: @gingerliza. Посмотрим на задачу и макет, прикинем сроки и стоимость. Если нужно, запишем лум и расскажем о технических деталях.
🔗 Ищите проекты Лиги на сайте
🔗 Подписывайтесь на наш телеграм канал