Как с помощью смартфона сделать 3D модель для карточки товара

Рассмотрим как без «ручного» моделирования сделать 3D модель товара и разместить ее на сайте в виджете 3D визуализации и виртуальной примерки (с помощью технологии дополненной реальности) .

Как с помощью смартфона сделать 3D модель для карточки товара

Это эксперимент по использованию приложения для смартфона — Luma, позволяющего создавать очень классные NeRF модели, а с октября 2023 полноценные Gaussian Splat сцены.

Примечание: Погружаться в тему NeRF/Gaussian Splat не будем, это сильно за рамками темы статьи.

В итоге мы придем вот к такому результату:

План

  1. Зачем вообще нужна 3D модель.
  2. Что использовалось для создания модели.
  3. Сканируем.
  4. Получаем, изучаем и немного редактируем 3D модель.
  5. Делаем 3D виджет для карточки товара.
  6. Результаты.
  7. Вывод.

Зачем вообще нужна 3D модель

Это единственная возможность показать реальный размер товара, дать возможность рассмотреть его со всех сторон, не предоставляя сам объект. А еще из 3D модели можно сделать (не привлекая внимание фотографа и ребят из логистики) : фото-рендеры, 360 фото (альтернативные названия: псевдо 3D или 2.5D) , видеообложки и другой контент для карточки товара на своем сайте или маркетплейсе.

Что использовалось для создания модели

  1. iPhone 12 Pro.
  2. Приложение Luma v0.9.9
  3. Объект сканирования: багги WL Toys 12427
<p>WL Toys 12427. Модель в масшатбе 1:12</p>

WL Toys 12427. Модель в масшатбе 1:12

Сканируем

Объект сканирования готов, приложение Luma запущено. Задаем габариты сканирования:

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

В порядке следования: снизу, центральная часть, сверху. 

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

После завершения сканирования, нажимаем Upload — снятый контент загружается на сервера Luma и следом же пойдет работа по созданию модели c помощью нейронной сети NeRF.

На финальной стадии Luma создает вот такое обзорное рендер-видео:

Видео можно сделать свое: задать произвольные точки перемещения камеры, фокусное расстояние, скорость перемещения. 

Получаем, изучаем и немного редактируем 3D модель

Открываем карточку нашего проекта, сдвигаем вверх шторку и видим вот такую форму:

<p>В разделе Assets располагается нам нужное - файлы 3D модели в разных форматах. </p><p>В текущей задаче его нам будет достаточно формата Obj. Lumа предлагает скачать модель в трех исполнениях качества (скачиваем их все). </p>

В разделе Assets располагается нам нужное - файлы 3D модели в разных форматах.

В текущей задаче его нам будет достаточно формата Obj. Lumа предлагает скачать модель в трех исполнениях качества (скачиваем их все). 

На нашем скане есть лишнее — барный стул. Не совсем понятно почему Luma его захватила, ведь был задан габаритный контейнер на первом шаге. Нужно удалить. Подойдет, полагаю, любой 3D редактор. Есть очень классный сервис для online редактирования модели — https://vectary. com/ (он же умеет AR), но я воспользуюсь открытым программным обеспечением — Blender. Никаких оптимизаций, исправлений, ретопологии, текстурирования — не делалось, только удален стул.

Потребуется импортировать в Blender файлы Obj и выполнить действия:

  1. Включить режим редактирования вершин.
  2. Включить режим отображения ребер.
  3. Выбрать инструмент выделения и выбрать вершины стула.
  4. Удалить их (нажать на клавишу X) .
Как с помощью смартфона сделать 3D модель для карточки товара

Далее экспортируем результат в формат GLB.

Как с помощью смартфона сделать 3D модель для карточки товара

Делаем 3D виджет для карточки товара

Чтобы показать модель в 3D нам потребуется специальный компонент: zarbo-виджет (так он называется в сервисе https://zarbo. tech/).

Сильно ничего сложного нет:

1. Регистрируемся в сервисе https://app. zarbo. tech/

2. После входа нужно создать новую коллекцию (непонятно, зачем так сделали, не очень удобно) .

3. Создаем новый продукт и загружаем GLB модель (и несколько раз потребуется нажать кнопку Далее, т. к. никаких настроек материалов и виджета не потребовалось) .

4. Почти готово. Модель уже можно просматривать в виджете в личном кабинете (клик на строчке в таблице) , но виджет еще не готов к интеграции в внешнем сайте. Техническая поддержка сообщила, что требуется от 3 до 15 мин. на оптимизацию модели и публикацию ее в сети “дистрибуции”. В общем, пришлось немного подождать.

5. Готово. Через контекстное меню «интеграция” можно получить интеграционный код для размещения на внешнем сайте. Можно скачать графическую ссылку через пункт меню »Скачать QR код” и разместить ее в оффлайне или так же в карточке товара.

Результаты

Вы можете рассмотреть созданные 3D модели по ссылкам на виджеты. Вы так же можете разместить машинку у себя, посмотреть ее реальный размер. Это гораздо информативнее чем «модель 1 к 12» (телефон должен поддерживать функцию дополненной реальности):

Вывод

3D модель с помощью Luma сделать можно, но ее качество позволяет донести лишь размеры объекта, но не мелкие детали, и до реалистичности, которую мог бы обеспечить 3D моделлер еще пока далеко. Далеко, но не долго! , беря во внимание скорость развития технологий. Предполагаю, что в скором будущем (до 2-3х лет) , 3D модели товара будут создаваться не сложнее чем сделать “фото на смартфон”.

В общем, ждем замены 2D на 3D в контент, и готовимся)

4040
2 комментария

А есть гайд как сделать 3д визуализацию помещения?

Под "3D визуализация" понимаете 3D модель, которую можно посмотреть online или рендеры/видео из 3D модели? Luma может помочь сделать обе вещи, но качество такой визуализации будет не "фотографично", т.е. все-таки потребуется доработка ручками.