3D в веб-дизайне: что нужно знать

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

Разбираемся с Head of Digital Максом Зайцевым, что такое 3D, как работать с этой технологией в вебе и почему даже маленький интерактив способен оживить ваш проект и выделить его среди тысяч одинаковых решений.

3D-модель — это объемное изображение объекта в цифровом пространстве. Любая 3D-модель состоит из полигонов — плоских многоугольников. Чаще всего это четырехугольники.

Полигоны формируют полигональную сетку, а она определяет форму объекта. Ее еще называют топологией — то, как именно полигоны формируют 3D-объект.

Если топология правильная, объект будет смотреться реалистично при анимации. Простой пример: мы хотим согнуть модель человека в локте или колене. Если топология сделана неправильно, сгиб будет выглядеть неестественно.

Чтобы 3D-модель стала реалистичной, нужны текстуры и освещение.

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

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

Освещение — один из факторов, почему 3D-объект выглядит реалистичным. Если правильно подобрать освещение, оно создаст контрасты между объектами, сделает материалы более яркими и выразительными и позволит настраивать тени объектов.

Это был совсем краткий экскурс в мир 3D, более подробно расскажем в следующем материале. А пока переходим к использованию.

3D используют в веб- и мобильных интерфейсах, играх, видеороликах, анимациях, иллюстрациях. В отличие от плоского двухмерного дизайна 3D-модели объемные и интересные. Пользователю хочется взаимодействовать с ними: изучать, приближать, вращать на 360°. Например, как тут.

В 3D можно показать то, чего еще не существует. Без этой технологии не обходится ни один застройщик. Она создает спрос на объект еще до его реализации и демонстрирует пространство, внешний вид здания, его территорию (например, так). Иногда дизайнеры создают в 3D интерактивные интерьеры — настолько крутые, что в них можно открыть каждую дверь и даже каждый ящичек.

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

А вот варианты реализации на примере наших кейсов.

Интерактивные игры. Эту мы сделали для автосервиса РОЛЬФ. Вы — мастер сервиса, клиенты дают задания: заменить масло, лампочки, перекрасить кузов. Чем быстрее справитесь с работой и меньше повредите машину, тем больше баллов заработаете.

Интерактивные карты. Для саита промышленно-продовольственного кластера «Максимиха» мы создали такую карту. Если кликать на помещения, можно рассмотреть их в деталях и узнать подробности о каждом.

3D-дизайн. Мы доказали, что даже сайт зернового холдинга может быть интерактивным и интересным. Карусель из 3D-объектов и интерактивная модель планеты с географией бизнеса — такой дизайн мы сделали для “Деметра Холдинг».

Кажется, что дизайн россииского саита Actimel — тоже в 3D. Но перед нами секвенция: покадрово разложенная анимация, где каждый кадр — это отдельная картинка. Секвенция — тоже классный вариант для дизайна сайта.

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

Как использовать 3D в дополненной реальности (или AR) и какие там ограничения, мы уже рассказали тут. А сегодня покажем классные примеры webAR:

Victoria: День мертвых. В честь праздника бренд пива Victoria заколлабился с художником Грувом Джонсом. Результат — атмосферные 3D-работы художника в AR, которые пользователи могли увидеть, наведя камеру смартфона на этикетку бутылки.

AR-примерка с Samsung. Бренд дал пользователям возможность «примерить» виртуальную технику прямо в интерьере. Нужно было просто отсканировать QR-код во время прямой трансляции — и техника из новой коллекции Samsung появлялась у вас дома.

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

При создании 3D-модели важно помнить об оптимизации. Чем меньше и «легче» 3D-визуализация, тем лучше она будет воспроизводиться. Рассмотрим, какие есть ограничения.

Количество полигонов. Оно может быть разным, но здесь работает принцип «чем меньше, тем лучше». Очень важен баланс. Баланс между внешним видом модели и оптимизацией — это когда модель все еще выглядит круто, но при этом еще не тормозит.

Текстуры. Здесь та же история. Нужно соблюдать баланс между качеством текстуры и тем, сколько она «весит». Текстура должна быть качественной и при этом не «тяжелой», чтобы нормально загружаться.

Освещение. Если вращать объект вокруг источника света, его освещение и тени будут меняться. Но если объектов много — например, как в игре для РОЛЬФ, — процесс будет тормозить. Поэтому освещение в таких сценах обычно «запекают»: делают статичным.

«Железо». Представьте, что вы сделали «тяжелую» игру с 3D-элементами. Если пользователь установит игру на компьютер, она обратится к видеокарте через «мостик» — драйвер. Драйвер передаст информацию на видеокарту, «железо» задействуется на полную, и игра будет «летать».

Но в браузере эта игра будет зависать: там такого «мостика» нет. Один и тот же 3D-объект или сцена могут быстро загружаться на компьютере, но тормозить в браузере. Поэтому 3D-объекты важно оптимизировать и по возможности делать «легче».

3D в веб-дизайне — не такое уж дорогое и энергозатратное удовольствие. Оно может обойтись не космически дороже обычных блочных сайтов, за которые заказчики отдают сотни тысяч. Но у 3D есть огромный плюс: объемная графика и интерактив привлекут внимание пользователя, он запомнит вас и расскажет другим.

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

Если вам было полезно и интересно, то приглашаем присоединиться к нашему телеграм-каналу: https://t.me/digitallabchannel.

Пишем о мире digital: новости, российские и зарубежные кейсы, экспертные материалы. Без рекламы, спама и непроверенной информации.