Перейти к содержимому
Вся база знаний

3D на сайте, в AR и в играх

Товар или дом в дополненной реальности — как работает AR на сайте

Коротко

AR на сайте — это кнопка рядом с 3D-моделью: телефон открывает камеру и ставит модель на пол, стол или участок в натуральную величину, без отдельного приложения. Для iPhone и iPad нужна модель в USDZ, для Android — в GLB; готовые вьюверы вроде model-viewer показывают кнопку сами и выбирают файл. Модель должна быть в реальном масштабе и лёгкой: телефон держит её в памяти вместе с камерой и отслеживанием пространства.

Кому полезно: Заказчикам, Разработчикам

Встанет ли диван в гостиной, поместится ли дом на участке — AR отвечает на это прямо через камеру телефона, без приложения.

Как это выглядит для посетителя

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

Приложение ставить не нужно. На iPhone и iPad это встроенный просмотр AR Quick Look, на Android — Scene Viewer от Google на телефонах с поддержкой ARCore.

Какие файлы нужны

iPhone и iPadпросмотр AR Quick LookUSDZAndroidScene Viewer, нужен ARCoreGLBвьювер на странице выбирает файл сам
Один товар — два файла. Вьювер на странице сам отдаёт телефону нужный.

Для iPhone и iPad — USDZ, для Android — GLB. Готовые вьюверы вроде model-viewer показывают кнопку AR и сами отдают телефону подходящий файл. Подробнее о форматах — в статье Форматы 3D-файлов.

Масштаб 1:1

Метры: дом в натуральную величину1,8 мНе те единицы: дом с коробку1,8 м
Модель должна быть в метрах — иначе дом окажется размером с коробку.

Модель должна быть в реальных единицах — метрах. Если её выгрузили в сантиметрах или в условных единицах, дом окажется размером с коробку, а кресло — размером с дом.

Память и вес

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

Что подготовить

  • 3D-модель в реальном масштабе.
  • GLB и USDZ.
  • Для крупных объектов — решить, что видно внутри: например, интерьеры в окнах дома.
  • Постер для страницы, пока модель грузится.

Как это выглядит на практике

  • Hilbert: посетитель ставит дом в натуральную величину прямо на участок с телефона. Модели в GLB с интерьерами в окнах переведены на Meshopt и KTX2, чтобы дом открывался и крутился плавно даже на среднем телефоне.
  • M1 GROUP: экспорт GLB и USDZ для AR-просмотра на маркетплейсах.

Частые ошибки

  • Модель в неправильных единицах.
  • Только GLB: для AR на iPhone нужен USDZ. Некоторые вьюверы умеют собирать его сами, но надёжнее подготовить отдельно.
  • Тяжёлая модель, которая дёргается вместе с камерой.
  • Проверка только на одном телефоне.

Чек-лист

  1. Реальный масштаб — метры.
  2. GLB и USDZ.
  3. Лёгкая модель.
  4. Кнопка AR во вьювере.
  5. Проверка на iPhone и на Android.

Пример из практики

Есть продукция, которую нужно визуализировать?

Средний бюджет проекта — от 30 000 ₽.

Небольшие отдельные задачи оцениваются индивидуально.