Контакты
Москва
Серебряническая наб., 29
+7 (495) 108-24-49
Кемерово
Ноградская, 5, офис 404
+7 (3842) 65-04-90
Digital-агентство
Мэйк

Как делать сайты с 3D

Подпишись на наш telegram-канал

Не пропусти новые полезные статьи и держи под рукой старые.

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

Текст заставляет формировать свое представление о написанном в голове, опираясь на любезно предоставленную груду букв. Готовый образ с изображениями, видео, 3D и другими средствами — это гораздо более гуманно и удобно для пользователя.

 

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

Суть 3D не в пиаре, а в донесении идеи и смысла

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

Только на подготовительном этапе необходимо будет выполнить целый ряд действий:

  • Привести концепт в такое состояние, в котором будет все, кроме самого 3D;
  • Собрать макеты страниц, для которых потребуется 3D-модель;
  • Подготовить файлы с пустым альфа-каналом, на основе которого можно будет сделать видеорендер и примерить его на сайте;
  • Определиться с внешними параметрами объекта, предварительно узнав у фронтендеров, какую максимальную нагрузку выдержит будущий сайт;
  • Отдать все это 3D-шнику. Он подготовит модели, с которыми можно будет идти и обсуждать анимации.

 

На том же этапе необходимо учитывать два основных ограничения:

  • В чем заключается коммyникационная задача сайта в целом и 3D в частности;
  • Как будет выглядеть процесс реализации и из каких этапов он будет состоять.

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

Встраивание фейковых моделей происходит по той же схеме, что и встраивание видео: 3D-специалист готовит модели и сцены с ними, рендерит их в видео, которое встраивают в сайт. Более подробно об этом процессе вы можете прочитать в другой статье в нашем блоге.

Отдельно отметим, что количество цветов и перерисовок экрана влияет на оптимизацию видорендера для встраивания: чем их меньше, тем лучше получится результат. С 3D-визуализациями гораздо легче этого достичь, чем с реальными съемками. На выбор предоставляется монохромная цветовая гамма, статичность части кадра, которая сокращает площадь перерисовок, и ряд других рабочих вариантов. Тем более, так видеорендер получается легче.

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

Реальные 3D-модели в интерфейсе

Встраивать 3D-модели реальных объектов в сайты и вообще делать с ними что угодно позволяет технология WebGL. Для работы нужны специальные библиотеки:

  • three.js — объемная и красивая, но начинающим сложно в ней ориентироваться.
  • regl — не такая обширная, зато ее легче освоить.

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

Пример интерактивного повествования — сайт НИИ ТП Роскосмоса. Ряд сцен рассказывает об услугах компании, якорных проектах и принципах работы некоторых систем. Никаких текстов и минимум напряжения для пользователя.

 

 

У WebGL есть особенности:

  • Модели будут смотреться иначе, чем на рендере, а поместить в интерфейс хайполи будет сложно;
  • Настоящие модели нужно правильно проектировать, моделировать и анимировать, опираясь на интерфейс. При этом не стоит забывать, что далеко не все из них будут работать в вебе;
  • С помощью WebGL можно создавать реалистичную физику, например, чтобы привязать ее к курсору или другим элементам сайта, а также 3D-эффекты: шейдерные переходы, искажения, передавать глубину и много чего еще.

Главное — получить разрешение от фронтендеров до того, как дизайнер всех загрузит и презентует концепт заказчику.

Оптимизация 3D-моделей

Все изменения в WebGL — заслуга JavaScript, который исполняется на устройстве пользователя в браузерах. Трехмерным моделям оптимизация нужна еще на этапе дизайна. Дизайнеру придется учесть возможный объем файла, количество сцен, сложность освещения. С хорошо продуманными сценой и объектами, технически, всё можно сделать проще, ведь не во всех ракурсах нужна стопроцентная детализация, не все элементы нужно прорабатывать и анимировать.

 

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

Во время оптимизации приходится биться за каждый кБ, и 2 мБ — уже очень большой объем, ведь на одной странице поместится несколько моделей.

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

Помимо этого, на вес модели в интерфейсе влияет вот что:

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

Как общаться с клиентом

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

— Опирайтесь на референсы собственного производства

— Графику рассматривайте и показывайте только вместе с дизайном всего сайта

— Примеряйте 3D на готовый сайт

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

Кейс с подводными камнями

Расскажем чуть подробнее про сайт, о котором мы уже рассказывали в статье про создание интерфейсных видео.

 

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

Зря надеялись, пришлось заменить реальные 3D-модели видеорендерами, но и они вышли слишком большими. При наведении курсора они активировались, а в обратном направлении не запускались — пришлось пожертвовать частью интерактивности ради оптимизации. В итоге на каждую сцену нам было нужно по два видео и по одному — на анимацию появления.

В сумме получилось восемнадцать роликов на 6 сцен, что тоже слишком много, поэтому нам пришлось решать, как это всё сжимать. Мы попробовали кодеки H.264, H.265 и Vp9. Выяснилось, что Vp9 искажает цвета, зато видео получались легкие. А H.264 и H.265 цвета отлично передавали, хоть ролики и выходили тяжелее.

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

По работе с WebGL у нас есть отдельная лекция, но она понадобится скорее программистам, чем тем, кто с ними работает.

Иван 
Тельтевский

Отвечает за пиар и контент-маркетинг для клиентов. Всегда старается знать всё наверняка и ни во что не верит.

Почитать еще на эту тему

Обсудить