Shopify 3D-модели продуктов: GLB, AR и руководство по рабочему процессу средства просмотра

“

TL;DR

— Shopify изначально поддерживает 3D-модели продуктов: для их отображения или включения AR не требуется никакого приложения. – Shopify принимает модели GLB и USDZ. Рабочий процесс с использованием GLB удобен, поскольку Shopify создает сопутствующий формат, необходимый для совместимых устройств. — Настоящим узким местом часто является не производительность, а получение 3D-модели. Вы можете создать, сгенерировать или передать его на аутсорсинг. – Оптимизируйте перед загрузкой: учитывайте количество полигонов и размеры текстур, чтобы мобильность оставалась быстрой. — выберите свой путь: нативные 3D-медиа (бесплатно) для большинства магазинов; стороннее приложение или специальный просмотрщик/конфигуратор Liquid для расширенных потребностей.

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

Как 3D-модели продуктов работают на Shopify

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

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

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

Откуда берутся ваши 3D-модели?

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

Сделайте их сами: Blender или CAD

Инструменты Blender и CAD обеспечивают максимальный контроль над размерами, топологией, UV-развертками и материалами. Этот путь подходит для инженерно-технических продуктов и изделий, которые должны соответствовать точным размерам, но требует опыта моделирования и большего времени на производство.

Создать с помощью AI

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

Типичный рабочий процесс прост:

1. Загрузите фотографию продукта (или введите текстовую подсказку).
2. Создайте 3D-модель с помощью AI.
3. Просмотрите и при необходимости уточните результат.
4. Экспортируйте модель как GLB и загрузите ее в Shopify.

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

Купить или передать на аутсорсинг

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

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

Оптимизируйте модель перед загрузкой

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

Полигоны и размер файла

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

Для сгенерированных AI или плотных сеток Tripo Smart Mesh может создать более чистую топологию с меньшим количеством полигонов для Web3D и рабочих процессов в реальном времени. Сжимайте текстуры и используйте Draco только в том случае, если его поддерживает полный конвейер экспорта и просмотра.

Shopify в настоящее время принимает загрузку 3D-моделей размером до 500 МБ и автоматически оптимизирует файлы размером более 15 МБ. Считайте 15 МБ порогом оптимизации, а не пределом загрузки, и проверьте текущие требования в медиа-документации продукта Shopify.

Реальный масштаб и ориентация

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

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

Текстуры и PBR

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

Используйте стандартные материалы PBR и проверьте их внешний вид в средстве просмотра Shopify. Материалы с высокой отражающей способностью, прозрачные или многослойные материалы могут потребовать дополнительной настройки в разных браузерах и устройствах.

Добавьте 3D-модель к продукту Shopify (шаг за шагом)

После оптимизации загрузите модель как носитель продукта и настройте ее исходное представление перед публикацией.

1. Откройте Shopify Администратор и перейдите в раздел Продукты, затем выберите продукт, который хотите обновить.
2. В разделе Медиа нажмите Добавить медиа и загрузите поддерживаемый файл GLB или USDZ. Shopify обрабатывает его и добавляет в медиагалерею.
3. Выберите загруженную 3D-модель, нажмите Редактировать файл и воспользуйтесь редактором без кода Shopify, чтобы настроить среду или освещение, фон, а также начальное вращение и масштабирование модели.
4. Предварительный просмотр страницы продукта. Проверьте вращение и масштабирование на рабочем столе, а затем протестируйте функцию "Просмотр в своем пространстве" на поддерживаемых устройствах iOS и Android.

Текущий путь к редактору и доступные элементы управления см. в документации по редактору 3D-моделей Shopify.

Включите AR: «Просмотр в своем пространстве»

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

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

Совместимые устройства Apple используют USDZ с Apple Quick Look; поддерживаемые устройства Android могут использовать Google Scene Viewer. Shopify подготавливает совместимые форматы моделей, а тема отвечает за рендеринг медиа продукта и элементов управления AR.

Прежде чем публиковать свой продукт, протестируйте его на реальном мобильном устройстве:

1. Откройте страницу продукта на поддерживаемом смартфоне.
2. Убедитесь, что появилась кнопка "Просмотр в вашем пространстве".
3. Нажмите кнопку AR и поместите изделие на пол или стол.
4. Убедитесь, что размер, ориентация и освещение модели выглядят естественно.

Нативное 3D, сторонние приложения и пользовательское средство просмотра

Выбирайте собственный носитель продукта, сторонний конфигуратор или реализацию пользовательской темы в зависимости от взаимодействия, требуемого продуктом.

Собственный 3D-медиа

Собственный 3D-медиа — это самый простой способ вращения, масштабирования и поддерживаемый AR. Лучше всего это работает, когда тема уже правильно обрабатывает Shopify носитель продукта.

Сторонние приложения и конфигураторы

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

• Переключение цвета и материала
• Конфигурация продукта
• Выбор компонента
• Интерактивные точки доступа
• Пошаговые рекомендации по использованию продукта

Пользовательский просмотрщик жидкостей

Для пользовательских тем начните с поддерживаемого Shopify пути Liquid: визуализируйте медиафайлы модели продукта с помощью model_viewer_tag и следуйте медиафайлам продукта Shopify и руководству Shopify-XR для AR для конкретного устройства.

Необработанная интеграция с Google <model-viewer> по-прежнему может быть расширенным вариантом, когда теме нужны настраиваемые элементы управления, активные точки, анимация или поведение загрузки, но она требует от разработчика управлять доступностью, состоянием мультимедиа, резервными вариантами и конфигурацией AR.

Что выбрать?

• Нужно что-то простое? Используйте родные 3D-медиа от Shopify.
• Нужны настройки продукта или конфигураторы? Выберите стороннюю 3D-платформу.
• Нужен полный контроль? Расширьте встроенную интеграцию мультимедиа Shopify или создайте расширенную пользовательскую программу просмотра.

Действительно ли 3D-модели помогают? Производительность и конверсия

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

Производительность: миф против реальности

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

Конверсия и возврат

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

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

Когда 3D того стоит

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

3D-модели особенно полезны для:

• Мебель и декор для дома
• Обувь и модные аксессуары
• Ювелирные изделия и предметы роскоши
• Бытовая электроника
• Промышленное оборудование и технические изделия
• Продукты с настраиваемыми параметрами

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

Распространенные ошибки и устранение неполадок

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

Модель загружается медленно или не загружается на мобильном устройстве

Если загрузка идет медленно, проверьте геометрию, разрешение текстур, количество материалов и общий размер файла. Shopify принимает файлы размером до 500 МБ и оптимизирует файлы размером более 15 МБ, но для мобильной доставки по-прежнему предпочтительнее использовать меньшие и эффективные ресурсы.

Контрольный список:

• Уменьшите количество полигонов.
• Сжатие текстур.
• Экспортируйте оптимизированный GLB.
• Проверьте Wi-Fi и мобильные данные.

Товар выглядит неправильного размера в AR

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

Контрольный список:

• Проверьте единицы измерения (реальный масштаб).
• Проверьте ориентацию модели.
• Убедитесь, что начало координат/ось точки расположены правильно.
• Проверьте еще раз на реальном мобильном устройстве.

Кнопка «Просмотр в вашем пространстве» не отображается

Если модель вращается, но AR недоступна, убедитесь, что загружаемая модель является поддерживаемой GLB или USDZ, протестируйте ее на совместимом физическом устройстве и убедитесь, что тема отображает элементы управления AR Shopify.

Контрольный список:

• Убедитесь, что модель поддерживает формат.
• Протестируйте на физическом устройстве iPhone или Android.
• Убедитесь, что операционная система и браузер поддерживают AR.
• Опубликуйте продукт повторно, если вы недавно заменили модель.

AR не работает на iPhone

На iOS выполните тестирование в Safari на Quick Look-совместимом устройстве. Если AR по-прежнему не работает, дождитесь завершения обработки Shopify, еще раз проверьте масштаб и материалы и убедитесь, что тема использует поддерживаемую Shopify интеграцию продукта и мультимедиа.

Контрольный список:

• Протестируйте в Safari на поддерживаемом iPhone или iPad.
• Убедитесь, что Apple Quick Look доступен на устройстве.
• Если проблема не устранена, обратитесь к последней версии документации Shopify.

Несколько минут тестирования на реальных мобильных устройствах перед публикацией помогут выявить большинство проблем на ранней стадии, гарантируя клиентам бесперебойную работу с 3D и AR.

Часто задаваемые вопросы

Какой формат файла Shopify использует для 3D-моделей?

Shopify поддерживает модели продуктов GLB и USDZ. Рабочий процесс GLB-first удобен для доставки через Интернет, поскольку он упаковывает модель и текстуры в один файл, а USDZ используется Apple Quick Look. Shopify обрабатывает загрузки, обеспечивая совместимость форматов на поддерживаемых устройствах.

Как добавить 3D-модель к продукту Shopify?

Откройте Shopify Администратор → Продукты, выберите продукт и загрузите поддерживаемый файл GLB или USDZ в Медиа. Выберите загруженную модель и используйте Редактировать файл, чтобы настроить ее исходное представление. Перед публикацией просмотрите витрину и протестируйте AR на физических мобильных устройствах.

3D-модели продуктов бесплатны на Shopify или мне нужно приложение?

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

Как включить AR для моих продуктов Shopify?

Загрузите поддерживаемую 3D-модель и используйте тему, которая отображает Shopify медиафайлы продукта и AR элементы управления. Shopify подготавливает совместимые активы GLB и USDZ; поддерживаемые устройства Apple используют Quick Look, а совместимые устройства Android могут использовать Scene Viewer. Подтвердите результат на реальных устройствах.

Замедляют ли 3D-модели работу моего магазина Shopify?

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

Где я могу получить 3D-модели для моих продуктов Shopify?

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

В чем разница между GLB и USDZ на Shopify?

GLB — это компактный веб-ориентированный формат, который может включать геометрию, материалы и текстуры в одном файле. USDZ используется для Apple Quick Look AR. Shopify принимает оба формата и обрабатывает загрузку для совместимости с витриной магазина и устройством.

Заключение

Shopify обеспечивает основу для интерактивного 3D и поддерживается AR; качество опыта зависит от модели, темы и тестирования. Создайте или получите точный ресурс, оптимизируйте его, загрузите поддерживаемый формат и проверьте результат на реальных устройствах. Чтобы создать стартовую модель из изображения продукта, попробуйте Tripo AI Studio.