Соевое молоко в 3D: один из наших опытов в креативной веб-разработке

Кейс амбициозного проекта c использованием технологии WebGL.

«Привет!» — этой простой и непринужденной фразой мы встречаем посетителя на новом сайте More!milk, и именно этой же фразой приветствуем вас. Мы — это Chipsa, создаём сайты и приложения не как у всех.

More!milk — производитель соевого молока, яркий eco-friendly бренд, коммуникация которого продумана до мелочей. Наша задача — сделать сайт с запоминающимся дизайном, который поможет компании найти отклик в сердцах потребителей и завоевать их интерес.

Мы расскажем о технологиях, которые применили в этой работе, встреченных трудностях и их решениях. Выясним, почему проект стал нерентабельным и стоила ли игра свеч? Дадим советы по работе с WebGL и узнаем, в чём польза от участия в международных конкурсах для веб-дизайнеров и разработчиков (по крайней мере для нашей студии).

More!milk — это производитель растительного напитка на основе сои. Продукт экологически чистый, подходит для тех, кто отказался от коровьего молока и ищет ему вкусную замену. More!milk по своей сущности eco-friendly бренд, делающий большой упор на коммуникацию с клиентом.

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

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

Нам нужно дать понять пользователю, что натуральность продуктов и забота о будущем — важные ценности, которые More!milk разделяет с ним. Весь путь продукта экологичен, начиная от заготовки сырья и заканчивая упаковкой готовой продукции.

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

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

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

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

Мы решили сделать ставку на WebGL — одну из передовых технологий frontend-разработки, которую мы используем в студии. Первая версия этой технологии вышла в 2011 году, но она, на наш взгляд, только сейчас начинает набирать обороты.

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

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

Применительно к этому сайту есть три особенности, которые сильно повлияли на сроки проекта. Кстати, если вам интересно, мы сделали ролик, в котором раскрыли пять принципов создания сайтов не как у всех. Это главные постулаты нашей студии, на которые мы опираемся при разработке дизайна. В конце статьи будет ссылка.

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

В данном случае компоновка объектов разная на всех страницах, по этой причине время вёрстки заметно увеличилось.

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

Видео должно быть небольшим по весу (это же прелоадер, в конце концов), и должно воспроизводиться плавно — ведь на нем сфокусировано внимание пользователя, когда грузятся ассеты.

Самая интересная часть. Мы решили сделать не просто статичные изображения продукции, а объемные, более реалистичные бутылки, которые реагируют на действия пользователя. На этом этапе было много времени потрачено на изучение опыта других разработчиков использования GLTF-моделей в вебе, а также их оптимизации. 3D контент, как правило, самая «тяжелая» для браузера часть сайта (как в плане загрузки, так и в плане производительности в рантайме).

Основные трудности мы встретили на вёрстке сайта. Павел Мажуга, front-end разработчик проекта, расскажет в чём было дело.

1. «Тяжелые» бутылки. Когда дизайнер передает тебе в работу модель размером в 25 мегабайт (в среднем), первая реакция — ужас. На главной странице должно быть 4 разных модели, не говоря о плавном скролле, lottie-анимациях (svg-анимации, экспортированные из Adobe After Effects), и прочем. 100 мегабайт только 3D-объектов? Не вариант.

Я был знаком с технологией компрессии/декомпрессии трехмерных данных Draco от Google, поэтому первой мыслью стало ее применение. За счет нее я смог сократить объем модели с 25 мегабайт до 1,5 мегабайт, что весьма круто. Но этого было недостаточно.

Чуть позже я понял, что геометрию модели можно переиспользовать, а материалы мешей (цельных готовых объектов — этикеток) можно менять в JS. После удаления текстур из модели и реализации их загрузки в рантайме, скорость загрузки значительно возросла и появилась большая гибкость — теперь можно создавать бутылки с любыми этикетками, не жертвуя производительностью.

Итоговый размер бутылки сейчас — 156 Кб для большой бутылки и 306 Кб для маленькой плюс текстура этикетки. Странно вышло, что после сжатия маленькая бутылка вышла тяжелее большой. Видимо в мире бутылок размер не имеет значения...

К сожалению, в мобильной версии нам пришлось отказаться от 3D и заменить модели картинками, так как телефоны дешевле сорока тысяч рублей начинали «кипеть» при запуске сайта.

2. Сторителлинг на главной странице. При пролистывании страниц на сайте постоянно что-то происходит, и это «что-то» привязано к позиции скролла. При неправильной реализации — гарантированные лаги (т.к. в браузере происходит много перерисовок). Я решил воспользоваться готовым решением для реализации данного функционала.

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

3. Использование lottie-анимаций на сайте. Чем их меньше, тем лучше, если вы хотите сохранить производительность работы сайта. При скролле страницу страшно фризило. Когда работали такие анимации, fps проседал до 20. Чтобы сохранить адекватный перфоманс при скролле сайта, lottie-анимации ставятся на паузу, а когда скроллинг заканчивается, снова воспроизводятся.

Чтобы не расходовать ресурсы браузера впустую, анимации, которые находятся вне вьюпорта браузера (которые не видны в данный момент пользователю) не воспроизводятся.

Если вы столкнулись с проблемами, которые не можете решить, и они описаны ниже — надеюсь, я вам помог:

• Всегда сжимайте GLTF-модели с помощью draco (файлы сжимаются до 90% от исходного размера).
• Уменьшайте количество вызовов отрисовки (draw calls) — чем их меньше, тем выше FPS.
• (очевидно) Старайтесь переиспользовать все, что только можно, не создавайте ненужные объекты в JS и на GPU — экономьте ресурсы процессора и память.
• Вообще следите за памятью при работе с моделями и WebGL в целом — очень легко допустить утечку.
• Старайтесь избегать включения сглаживания (antialiasing) при создании WebGLRenderer — это сильно повышает производительность.
• Выносите вычисления, которые не привязаны к DOM, в веб-воркеры — это действительно повышает производительность главного потока выполнения программы в браузере.
  

В общем и целом, большая часть времени ушла на два процесса:

1. Поиск баланса качественной работоспособности сайта на любом устройстве и сохранение технологий, которые закладывались при создании.

2. Достижение максимально естественного вида бутылок и их содержимого без потери производительности.

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

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

Наш проект MoreMilk уже получил 3 ленточки на Behance: Interaction, AIGA, AdobeXD, Website of The Day на CSS Design Awards и honorable mention на Awwwards. Как думаете, российские награды вроде Tagline и Золотого сайта получится взять с этим проектом?

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

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

На новый год наша команда получила от More!milk подарок под ёлку — целый ящик соевого молока. Получается уже не зря старались! В знак благодарности мы устроили небольшую фотосессию и оставили отзывы о полезном продукте.

Наша студия вышла на новый уровень в работе с технологией WebGL. Полученный опыт и набитые «шишки» говорят о том, что следующие шаги будут начаты с уже более высокой планки, и мы будем делать проекты с 3D-графикой ещё круче, быстрее и интереснее.

Дизайн, 3D, motion — Кирилл Ким
3D — Александр Педченко
Анимация — Эйнар Хамидуллин
Front-end — Павел Мажуга
Back-end — Сергей Шуть
Копирайтинг — Елена Гладышева
Менеджмент проекта — Евгений Сотников

Подпишитесь на наши:

Instagram

Dribbble

Behance

Видео про пять принципов сайтов не как у всех

Для сотрудничества свяжитесь с нами: [email protected]