Примерка картины на стене в дополненной реальности
Покупатель оригинала прежде всего прикидывает, как работа будет смотреться у него и подойдёт ли по размеру. На фото в каталоге лист 18 × 18 см и холст метр на метр выглядят одинаково.
Примерку я сделал для интернет-магазина оригиналов акварели на 1С-Битрикс. Листы там небольшие, чаще всего от 14 × 20,5 до 29,7 × 21 см. На телефоне плитка «На стене» открывает 3D-модель работы, а кнопка «Примерить на стене» — камеру: акварель появляется на стене в натуральную величину. Пример использования
Попробуйте: лист 18 × 18 см на вашей стене
Здесь та же примерка, что на сайте, только для одной работы. На компьютере наведите камеру телефона на QR-код рядом с моделью.
Размер не на глаз
Привычная альтернатива — загрузить фото своей стены и подвинуть на нём картинку. Но масштаб там подбирается вручную, на глаз, и ошибиться в размере легко. Здесь размер задаёт сама модель. Она строится в метрах: ширина берётся из карточки работы, высота — из пропорций скана.
Масштаб в AR зафиксирован: увеличить работу пальцами нельзя, поэтому на стене она в натуральную величину — с той точностью, с какой телефон определил стену. Для небольших акварелей это главное: человек сразу видит, нужна ли ему работа побольше или эта займёт пустое место над столом.
Решение в интерфейсе. Окно примерки открывается с вариантом в рамке: так работу обычно и вешают. Рядом — паспарту и лист без оформления, у каждого внешний размер в сантиметрах. Под рамкой и паспарту стоит подпись «Пример оформления: работа продаётся без паспарту и рамы», чтобы покупатель не решил, что рама входит в цену.
Что видит покупатель
Плитка второй в лентеСразу после основного фото, перед интерьерами. Иконка поверх миниатюры работы и подпись «На стене».
Только там, где сработаетiPhone и iPad открывают примерку через AR Quick Look, Android — через ARCore. Где ARCore нет, а это бывает и у недорогих новых моделей, плитка не показывается: кнопка, которая ничего не делает, хуже её отсутствия.
Компьютер — через QRПлитка открывает QR-код. Страница на телефоне сразу показывает окно примерки, искать плитку второй раз не нужно.
Откуда берутся модели
Картина плоская, поэтому её 3D-модель — несколько прямоугольников: лист с изображением, паспарту, рама. Такую модель не нужно заказывать у 3D-моделлера или сканировать — её собирает код из того, что уже есть в карточке.
- Скан и размерДетальная картинка работы и поле «Размер», например 180 × 180 мм.
- Кнопка в панели«Собрать 3D» в панели работ. Сразу три варианта: без оформления, с паспарту 5 см и с паспарту в чёрной раме 2 см.
- Файл .glbОколо 0,3–0,6 МБ на вариант. Основная модель записывается в свойство товара.
- Страница работыПлитка «На стене» появляется на странице работы сама.
В панели есть фильтр «Без 3D» и кнопка, которая собирает модели у всех отфильтрованных работ за один проход.
Как это устроено на 1С-Битрикс
Генератор написан на PHP без внешних библиотек и пишет файл glTF 2.0 напрямую. Модель повёрнута лицевой стороной к зрителю, задней — к стене. Валидатор glTF ошибок в моделях не находит.
У товара два свойства: «3D-модель» (.glb) и «Размещение в AR» — стена или пол. Плитка выводится, только если модель есть. На странице модель показывает Google model-viewer. Он лежит на самом сайте, весит около 0,9 МБ и загружается только после нажатия на плитку, поэтому скорость страницы работы не меняется. Для iPhone отдельный файл не нужен: версия для AR Quick Look собирается из того же .glb прямо в браузере.
Страница отправляет в Метрику три цели: открыли окно примерки, открыли QR-код, запустили AR. По ним видно, пользуются ли примеркой.
Где это не сработает
Однотонные светлые стеныТелефон находит их не сразу: нужно немного поводить камерой, пока он «зацепится» за поверхность.
Цвет и оформление условныеЦвет зависит от экрана и освещения, а рама и паспарту в модели — пример, а не точный багет.
Скан должен быть обрезан по листуМодель берёт ширину из карточки и растягивает на неё весь скан. Если на скане остались поля стола или фон, лист на стене получится меньше настоящего.
Модель не следит за изменениямиПосле замены скана или размера её нужно собрать заново — той же кнопкой в панели.
Не только картины
Больше всего пользы там, где размер на фото не считывается, а ошибка с ним стоит дорого. Показ на странице одинаковый для всех товаров. Различаются только источник модели и место установки.
| Какой сайт | Куда ставится | Откуда модель |
|---|---|---|
| Картины, постеры, фотопечать, панно | Стена | Собирается автоматически из фото и размера, как здесь |
| Ковры и напольные покрытия | Пол | Так же из фото и размера, только модель кладётся на пол |
| Мебель: диваны, столы, стулья, шкафы | Пол | Модель от фабрики, сканирование телефоном или моделирование |
| Светильники, вазы, декор | Пол или стол | Сканирование или моделирование; для простых форм — нейросеть по фото |
| Зеркала, полки, настенные часы | Стена | Объёмная модель; отражение вашей комнаты в зеркале она не покажет |
| Сантехника и бытовая техника | Пол или стена | Часто есть готовые модели производителя |
Нейросети, которые строят 3D по одной фотографии, ускоряют работу, но обратную сторону предмета они додумывают, а масштаб приходится выставлять вручную. Такую модель перед публикацией нужно проверить на телефоне.
Для подключения нужны два свойства товара, генератор или загрузка готовых моделей и доработка шаблона карточки. Если модели у товара нет, карточка работает как раньше. Подключаю примерку к каталогам на 1С-Битрикс. Контакты внизу страницы.