3D для интернет-магазинов — тренд или нет?

Сколько стоит, как сделать и нужно ли вам это вообще?

С бурным развитием e-commerce потребители все реже и реже хотят выходить в офлайн-магазины за покупками. В свою очередь, продавцы стараются сделать свои виртуальные витрины как можно более приближенными к реальности. И один из способов для этого — использование 3D.

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

Как создаются 3D-визуализации

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

Итак, какие бывают варианты:

С помощью 3D-панорамы

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

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

3D-визуализация квартиры на сайте застройщика «ПИК» — выбрав зону на схеме в правом нижнем углу, пользователь может «осматриваться» в квартире

С помощью фотографий

Самый простой способ показать товар с разных сторон — это визуализация при помощи набора изображений, которые можно просматривать на сайте как цикличное видео. По-другому этот способ называют «фото 360°». При этом делается очень много фотографий объекта со всех ракурсов. Расстояние между расположенными рядом ракурсами в этом случае очень мало, объектив смещается буквально на 1−2 мм. Таким образом, при склейке фото создается иллюзия трехмерного изображения.

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

Этот способ — самый простой и дешевый, но у него есть свои недостатки:

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

Фото 360° на сайте DNS

С помощью 3D-моделирования

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

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

Ссылка на скачивание 3D-модели на сайте дизайнерской мебели loftdesigne.ru

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

Трудозатраты для магазина здесь тоже зачастую меньше — вместо того, чтобы везти товар в фото-студию, нанимать фотографа и ждать, пока он обработает все фото, можно нанять одного 3D-художника. Но, как правило, 3D-визуализация стоит дороже, чем фото. Так, в 2023 году, фрилансеры в среднем берут за фото 360° от 1500 руб/шт, а за 3D-визуализацию — от 30 тыс руб/шт. Но она отлично подойдет для магазинов с однотипным товаром, где в моделях нужно менять только цвет и пару деталей, а также для сложных, громоздких товаров.

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

С помощью 3D-обзора

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

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

3D-обзор на телефон Vivo — двигая слайдер, можно посмотреть, как меняется цвет корпуса в разных световых условиях. А при наведении на функциональные элементы появляется подсказка.

С помощью 3D-конфигуратора

Это особое ПО, которое устанавливается на ваш сайт и позволяет пользователям самостоятельно «собрать» товар с нужными параметрами — например, мебель, автомобиль или сумку. Существуют готовые решения, где уже есть база необходимых деталей, у которых можно менять текстуру и цвет — например, BPlanner. Также туда можно загружать свои 3D-детали и текстуры, собранные в программах для моделирования. Распространяются такие конфигураторы, обычно, по подписке.

Конфигуратор на сайте Mini Cooper

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

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

Как использовать 3D-модели в интернет-магазинах

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

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

В каких сферах целесообразно использовать 3D-модели

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

Автомобили
Покупателю важно рассмотреть авто со всех сторон (и внутри, и снаружи) перед покупкой. Лучше всего — использовать конфигуратор, чтобы пользователь сравнил разные модели и сделал свой выбор.
Мебель
Здесь тоже пригодится конфигуратор, а ещё — важно показывать габариты мебели. Это один из главных критериев покупки. Некоторые магазины используют технологии AR, чтобы потенциальный покупатель мог «примерить» новый стол к своей кухне, а диван — к гостиной. Также хорошее решение — делать модели, доступные для скачивания, чтобы их могли использовать дизайнеры в своих проектах.
Техника
3D-модель поможет понять, где у техники находятся функциональные части — как, например, телевизор крепится на стену, и где у смартфона кнопка блокировки. Здесь тоже можно сочетать использование 3D-модели с дополненной реальностью.
Премиум-аксессуары
Создание 3D-моделей аксессуаров позволяет подчеркнуть их статусность. Да, для покупки аксессуаров обычно достаточно фото, но 3D-каталог покажет люксовость. А для ювелирных украшений по индивидуальному заказу идеальным будет использование конфигураторов.

Простой конфигуратор для создания кольца на заказ на сайте «Линии любви»

Конфигуратор сумок компании Arny Praht

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

Преимущества 3D-визуализации для интернет-магазинов

Наглядность. Конечно, это главное преимущество. Только 3D-модель даст наиболее точную визуальную характеристику товару, а при помощи AR-технологий можно поместить его в реальные условия.
Премиальность. Наличие 3D выгодно выделяет вас среди конкурентов. Визуализация показывает, что вы действительно тщательно работали над сайтом, чтобы привлечь клиентов — это подкупает.
Запоминаемость. Когда пользователь смог со всех сторон рассмотреть и как будто бы «пощупать» товар, то он с большей вероятностью запомнит его и вернется к вам за покупкой.
Минимум вопросов о товаре. Визуализация снимает большинство вопросов о товаре, и пользователь сам составляет представление о нем. Вам остается только грамотно подвести его к покупке.

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

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

На что нужно обратить внимание при внедрении 3D-визуализации

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

Постараться максимально снизить вес моделей и текстур;
Разработать отдельную версию сайта для мобильных устройств, либо отключить блок с 3D в адаптивной версии;
Заменить 3D-визуализацию видеороликом.

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

Как сделать качественную 3D-визуализацию

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

Используйте возможности освещения. В реальной жизни объекты никогда не помещены в вакуум с направленным на них источником света. Они отбрасывают тени, разные их части по-разному освещаются. Используйте это при создании визуализации.
Уделите внимание текстурам. То, что отличает дешевую модель — это непроработанные текстуры. А ведь именно они вызывают тактильные ощущения. Дерево, металл, кожа — все это должно быть хорошо проработано и по цвету, и текстурно.

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

Здесь видны и трещинки, и несовершенства текстуры. Изображение приближено к оригиналу

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

Например, для сайта кофе Жокей, мы потратили десятки часов, чтобы 3D-модели всех упаковок кофе выглядели действительно настоящими и аппетитными

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

Вместо заключения

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

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