Как «положить» реалистичный болт на сайт
3D и webp-анимация: холивар
Сибирикс
3D и webp-анимация: холивар
Как «положить» реалистичный болт на сайт
Реалистичные анимированные 3D-объекты на сайтах смотрятся впечатляюще: пользователю ничего не нужно представлять, за него уже всё визуализировали. Вот только частая проблема таких штук — неподъёмный «вес» и сложности с восприятием у браузеров. Второе оставим на совести разработчиков самих браузеров (угодить всем браузерам на рынке — непросто), а с первым вполне реально поработать.

Недавно на одном из проектов мы протестировали webp-анимацию. О том, какие есть сложности с 3D-моделированием и самим относительно свежим форматом веб-графики, на холиваре рассказал наш дизайнер Глеб. А мы сделали из этого статью :)

Кратко о проекте

Клиент — krepco.ru, компания занимается крепежом и метизами. Мы создали для них интернет-магазин, и в качестве референса заказчик предоставил сайт, где была классная 3D-заклёпка на главной. Мы решили взять идею, но сделать лучше: запилили крутую концепцию, где в промо-блоке была анимированная модель болта. Должно было выглядеть как-то так:

Этапы создания 3D-анимации

Чтобы создать такую проработанную анимацию, мы погрузились во все тонкости 3D-моделирования. Работу условно поделили на этапы:

  1. моделирование;
  2. текстурирование;
  3. освещение;
  4. настройка камеры;
  5. анимирование;
  6. рендер, подбор формата и создание итогового файла.

Моделирование

Есть два способа:

  • простой — пойти на сайты с бесплатными 3D-моделями,
  • сложный — замоделить болт самим.

Но, как это часто бывает, когда ты ищешь что-то бесплатное, оно выглядит ужасно и отвратительно. А значит, нам пришлось моделить самим — в cinema4D.
Глеб
Дизайнер
Мне повезло — попалось видео с моделингом болта, на основе которого я создал модель для проекта. Работал в cinema4D, потому что этот инструмент мне хорошо знаком.

Текстурирование

Казалось бы, лёгкий этап. Заходишь в библиотеку текстур, выбираешь наиболее похожую на металл, применяешь. Красота: металл, блики, блеск. Но когда мы показали модель заказчику, тот сказал, что болт пластилиновый, и его нужно сделать настоящим: поцарапанным, шероховатым.
лето сочи
Фактуры потертости и шероховатости, которые нужно было добавить к «пластилиновому» болту
Началось веселье: пришлось поработать в Node Editor (редакторе, где можно создавать текстуры) с настройками отражения, диффузии, шероховатости, преломления и прочим-прочим-прочим. Мы долго развлекались, чтобы это всё заработало. Проблема работы с 3D в том, что нет каких-то готовых гайдов, которые можно быстро нагуглить (да ещё и на русском). Приходится долго пересобирать и соединять разные визуальные эффекты, чтобы всё заработало.
лето сочи
Как выглядит настройка текстур в Node Editor
В итоге получился такой вариант (слева на картинке), но клиенту он не понравился — слишком тёмный. Мы увеличили степень отражения поверхности, но получилось слишком светло (в центре). В итоге «скрестили» два предыдущих варианта, чтобы получить идеальный.
лето сочи
Поиск идеального болта
Глеб
Дизайнер
В cinema4D в OctaneRender (OctaneRender — графический движок) есть опция, позволяющая взять два материала и смешать их в нужном процентном соотношении.

Освещение

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

Анимирование

Нам нужно было сделать 4 состояния:

  1. статичное вращение болта,
  2. пользователь тыкнул, и болт начал закручиваться (на 8100 градусов — ровно на 21 оборот: при имеющейся высоте болта это количество даёт наиболее сбалансированную плотность резьбы),
  3. когда гайка закручена,
  4. обратная раскрутка гайки на болте.
лето сочи
Процесс анимирования — установка положения элементов в разные моменты временной шкалы

Настройка камеры

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

Выбор формата

Когда сама модель готова, возникает вопрос: как её выгрузить из cinema4D и в каком формате отдавать разработчикам. Были варианты:

  • gif-анимация (везде работает, но ограничена по цветам и не имеет полупрозрачностей, из-за чего переход от прозрачного к непрозрачному получается резким и зернистым, другой минус — гифки бывают тяжелыми);
  • видео-ролик (работает во всех браузерах и не искажает цвета, но недоступен прозрачный фон, а наш болт на дизайне предполагался на подложке),
  • png-секвенция (1 картинка — 1 кадр, очевидно, что тоже много весит).

Webp-анимация стала выходом: она напоминает gif-анимацию, но не имеет ограничений по спектру цветов, разрешает прозрачность фона и меньше весит. А значит, лучше всего подходит для использования на сайтах. Единственный минус такого формата — поддерживается не всеми браузерами (Safari — нет), но это можно решить, отдавая таким браузерам статичную картинку.

Как сделать webp-анимацию

Для начала нужна готовая сцена в cinema4D, следом нужно всю анимацию выгрузить как png-секвенцию. У нас возникли проблемы с рендерингом: не получалось выгрузить изображения с прозрачным фоном, поэтому пришлось хитрить. Выгружали дважды: исходное изображение с белой подложкой и альфа-канал (черный контур на прозрачном фоне), а потом соединяли в AfterEffects. Там же добавили тени. И только после всех этих манипуляций с помощью сервиса ezgif.com из этих данных удалось собрать полноценную webp-анимацию.
Невероятное количество png-файлов для итоговой анимации
Глеб
Дизайнер
После всех этих экспериментов вывод таков: модель — это модель, поэтому не стоит ждать от неё фотореалистичности, и с заказчиком лучше обговаривать это на берегу, чтобы у того не было завышенных ожиданий.
Любите смотреть видео больше, чем читать? Тогда смотрите, как Глеб рассказывает об опыте моделирования на холиваре.
Тайминг
00:30
Кратко о проекте и его задачах
01:18
Референс от заказчика
01:39
Дизайн-концепция для проекта
02:16
Как выглядит анимация
03:21
Через что пришлось пройти
04:48
Моделирование — какие были варианты и что в итоге сделали
05:57
Моделирование: основание болта
07:30
Моделирование: тело болта
08:12
Почему cinema4D, а не CAD-система?
08:55
Моделирование: резьба
09:39
Моделирование: шайба
10:37
Текстурирование: лёгкий путь
11:43
Текстурирование: правочки заказчика и упорки с Node Editor
13:45
Текстурирование: что получилось и снова правочки
15:46
Освещение: подсветка нижних граней по просьбе заказчика
16:54
Анимирование: 4 состояния
19:06
Настройка камеры: перспектива и изометрия
20:10
Выбор формата: какие были варианты
21:04
GIF-анимация: плюсы и минусы
21:42
Видео-формат: плюсы и минусы
22:13
PNG-секвенция: плюсы и минусы
23:01
Решение проблемы — webp-анимация: плюсы и минусы
25:41
Как делать webp-анимацию — пошаговая инструкция
30:06
Бонусное открытие: анимированные стикеры для Telegram
33:24
Выводы от экспириенса
Не пропустите свежие видео на нашем YouTube-канале :)