Не создаём, а разрушаем: как мы оптимизировали тонны контента и высекли логотип из камня

Несмотря на то, что много идей осталось «на потом», в плане технической реализации проект получился сложным. Но классным и нетипичным — за всё время над ним успели поработать три фронтенд-разработчика, которые проделали титанический труд.

Работа проходила на стеках Next.js (React) и React-three-fiber (Three.js). Коротко перечислим основные моменты, с которыми возникли сложности, а после — остановимся подробнее на самых интересных. Итак:

• Большое количество медиаконтента, который сложно сложно оптимизировать.
• Синхронизация HTML и WebGL (в основном, при скролле).
• Плавный переход между страницами и при ховер-эффекте.
• Форма в виде чат-бота, так как в ней необходимо учитывать множество состояний одновременно.

На сайте очень много тяжёлых видео, которые должны загружаться быстро и без лагов. Возникло несколько идей, как это можно сделать — оптимизировать вес файлов, конвертировать их в более современный формат или использовать CDN.

Первый пункт понятен: чем меньше вес, тем быстрее грузится файл. С конвертацией сложнее, ведь необходимо выяснить, какие форматы для веба подходят лучше, чем классический .mp4. Для себя мы выстроили такую приоритетную цепочку: .av1 > .hevc > .mp4.

Ну, а для CDN требовалось использовать самый близкий к пользователю сервер, который раздаёт статические файлы, так как чем короче путь до сервера, тем быстрее они грузятся.

Что сделали

Для оптимизации использовали ffmpeg — своеобразный «швейцарский нож» для работы с видео. Чтобы понять, как он работает, представим некий исходник «input.mp4».

Как выглядит команда для генерации HEVC:

ffmpeg -i input.mp4 -c: v libx265 -crf 30 -vf scale=1920:-2 -tag: v hvc1 -movflags faststart output-opt.hevc.mp4

Как выглядит команда для генерации AV1:

ffmpeg -i input.mp4-c: v libsvtav1 -crf 40 -movflags faststart -vf scale=1920:-2 output-opt.av1.mp4

Как выглядит команда для оптимизации MP4:

ffmpeg -i input.mp4 -c: v libx264 -pix_fmt yuv420p -crf 20 -vf scale=1920:-2 -movflags +faststart output-opt.mp4

Это помогло «ужать» файлы без потери качества — результат можете увидеть на нашем сайте. Видео не тормозит. Вообще.

После того, как мы перебрали кучу вариантов, из какого материала должна быть сделана наша чипсинка, и остановились на камне, пришло время создать крутую ховер-анимацию, которая отражала бы новую концепцию. При наведении курсора на «цельный» логотип его должна расталкивать некая сила, после чего он снова собирается в единый элемент.

Очевидно, что это WebGL, потому что тут нужен интерактив. Удобнее всего просто разбить модель на куски в 3D-софте, после чего поработать с событием pointermove, чтобы рассчитать ту самую «силу».

Что сделали

Для реализации использовали библиотеку Three.js с форматом модели GLB, который является стандартом для веба. Анимации появления и исчезновения 3D-дизайнер отрисовал в блендере, а на фронтенде они проигрываются с помощью THREE.AnimationMixer.

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

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

Что сделали

Снова использовали WebGL — растянули канвас на весь экран, скрыли HTML с нужными изображениями и видео, а на их позицию поставили PlaneGeometry. После чего подогнали размер чётко по размеру HTML-элементов и синхронизировали позиции в 3D-мире с HTML, которые сохранялись бы при скролле.

Рассказали о самом интересном и сложном, но далеко не обо всём. Это, скорее, иллюстрация работы нашего мышления — как мы подходим к решению задач и что нас это действительно увлекает. Уже говорили, но повторимся: за время работы над сайтом проделан огромный труд — это не только новый опыт, но и прокачка имеющихся навыков. Главное, мы достигли основной цели «чтобы заказчику понравилось», ведь наш новый сайт безумно нравится нам самим.

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