Делаю мебельщикам 3D-демо: кухню можно открыть и поставить на фото комнаты

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

От каталога столов к примерке в комнате

В моём кухонном демо можно нажать на дверцу, заглянуть внутрь шкафа, разобрать гарнитур на части. А потом загрузить фотографию комнаты и поставить кухню поверх неё. Но даже если на экране всё сошлось, я бы не советовал по этой картинке заказывать мебель. Пропорции там приблизительные. С этой оговорки и начну рассказ о своей работе. До кухни были столы. Я помогал мебельщице с каталогом: переводил текст, убирал иероглифы, добавлял новые модели из таблицы. Столы похожей формы нужно было расположить рядом, фотографии привести к общему виду. Параллельно по её просьбе я собрал демо с тремя столами из каталога. Это пробная версия для проверки идеи. Стол в ней можно вращать, менять отделку и ставить на фотографию своей комнаты. Всё это работает с телефона. Для такой пробы у меня уже были конкретные столы, их фотографии и характеристики. Итог по этому демо ещё не определён, поэтому говорить об удачном внедрении пока рано. Для кухни я взял один реальный гарнитур С продавцом модульных кухонь я раньше работал над оформлением профиля в соцсети. Кухонное демо сделал по собственной инициативе: выбрал один гарнитур из его каталога и написал для себя, что хочу показать. Взял угловую кухню размером 2,4 × 2,15 метра. В карточке были указаны семь нижних шкафов, два верхних и два пенала. Пеналы — это высокие шкафы. Фасады матовые, тёплого бежевого цвета. По этим сведениям и фотографиям я собрал объёмную модель, которую можно рассматривать с разных сторон.

Уже при сборке нашлось расхождение: на фото видно три верхних фасада, а в описании указаны два верхних шкафа. Я показал кухню как на фотографии и записал это в ограничения. Мойку, смеситель и технику тоже пришлось учитывать. На фото они есть, хотя в комплект кухни не входят. Я изобразил их упрощённо, чтобы гарнитур можно было узнать. Если такую модель показывать покупателям, рядом нужно пояснить состав комплекта. Иначе духовка на картинке может выглядеть как часть заказа. Дверцы открываются, шкафы разъезжаются Кухню можно повернуть, приблизить и вернуть к исходному ракурсу. При нажатии на дверцу она открывается. Есть и общая кнопка: она открывает двенадцать дверец и четыре ящика. Так можно заглянуть внутрь, не открывая каждый шкаф по очереди.

Я добавил поэтапную разборку и обратную сборку. Отдельные шкафы, из которых состоит гарнитур, называют модулями. При разборке они расходятся, и видно, из каких частей собрана кухня. Для меня в этом есть смысл: человеку проще рассмотреть отдельный шкаф, когда он не сливается с соседними.

У смесителя можно включить струю воды. Это уже деталь для демонстрации. Я бы оценивал пользу такого демо по тому, помогает ли оно понять устройство мебели: где дверцы, где ящики, как выглядит гарнитур целиком. Механика здесь условная. Модель не рассчитывает, заденет ли открытая дверца соседний шкаф. Угловая дверца вообще закрыта соседним модулем: отдельно нажать на неё нельзя, она открывается только общей кнопкой. Эту особенность я тоже записал. Скрывать её за красивым общим видом было бы странно. Как кухня попадает на фотографию В следующей версии я добавил режим «Кухня в вашей комнате». Человек загружает фото, а поверх появляется модель. Под ней четыре ползунка: «Поворот», «Размер», «Высота», «Наклон». Ими можно вручную подогнать положение кухни под снимок. Затем нажать «Сохранить картинку».

Фотография остаётся в браузере и никуда не отправляется. Для такой примерки мне не нужно получать снимок чужой квартиры: работа с ним происходит на устройстве человека. При этом программа не обмеряет комнату. Размер кухни на фотографии человек регулирует сам. Можно уменьшить модель до тех пор, пока она визуально не поместится между стенами, но в настоящей комнате от этого места не прибавится. Поэтому я называю результат приблизительным эскизом. По нему можно прикинуть общий вид кухни в интерьере. Проверять, войдёт ли она по размерам, придётся отдельно. Часть размеров я взял из описания гарнитура и таблицы модулей. Но ширины отдельных шкафов, глубины, высоту смесителя и расположение техники определял на глаз по фото. Наличие нескольких точных чисел не делает точной всю модель. Подпись «пропорции приблизительные» здесь нужна прямо возле примерки, чтобы человек видел её до сохранения картинки. На айфоне пришлось чинить обычные кнопки Отдельная часть работы оказалась связана с телефоном. В браузере Safari на айфоне не открывался выбор фотографии и не сохранялась готовая картинка. Для режима примерки это существенная поломка: без своего снимка и сохранения пользоваться им толком не получится. Я исправил выбор фото и переделал сохранение через системное меню «Поделиться». Оставил и запасной путь: картинка открывается в новой вкладке, рядом есть подсказка нажать на неё и удерживать палец, чтобы сохранить.

После исправлений я проверил демо на экранах разной ширины: от большого компьютерного до узкого телефонного. Проверял открытие страницы разными способами и быстрые повторные нажатия. В этих проверках ошибок не было. За работу на любом телефоне я бы не поручился. Демо открывается как веб-страница. Браузер должен поддерживать WebGL — технологию для показа объёмных объектов на странице. Для посетителя за этим стоят обычные действия: выбрать фотографию, повернуть кухню и сохранить результат. Что я советую проверить на одном гарнитуре Я бы начинал с одной кухни, которую мебельщик хорошо знает. На ней можно сверить модель с реальным изделием: какие шкафы входят в набор, что открывается, где есть условности. В моём случае даже для одного гарнитура понадобилось разобраться с расхождением между фотографией и описанием. До сборки стоит собрать сведения об отдельных шкафах. Одних общих габаритов кухни мало, если хочется показать её точно. Я бы отдельно уточнил размеры модулей, расположение техники и состав комплекта. Если сведений не хватает, стоит сразу обозначить, что в модели приблизительно. Затем я бы прошёл путь покупателя на телефоне: открыл демо, загрузил фото, подвигал кухню, сохранил картинку. Мой случай с айфоном показал, почему просмотр готовой модели не заменяет такую проверку. Кухня может вращаться, а нужная человеку кнопка при этом не работать. И только после этого я бы обсуждал другие гарнитуры. На одном примере уже видно, какие данные нужны и что предстоит исправить. Размножать недочёты на весь каталог мне не хочется. Кухонное демо пока существует отдельно. На сайте продавца я ничего не менял. Ответа по кухонному демо пока нет, решение за продавцом. Данных о влиянии на продажи или посещаемость тоже нет. Сейчас я могу показать работающую пробную версию и назвать её ограничения. Для меня смысл такой работы в том, чтобы мебель можно было рассмотреть и примерить к своей комнате хотя бы визуально. Один гарнитур позволяет проверить эту идею на практике. А точные размеры, состав заказа и то, как мебель встанет в комнате, нужно сверять отдельно от картинки.