Визуализатор плитки: реальные фото вместо цвета и 3D, которое наконец не раздражает

Всем привет! На связи третья часть заметок о разработке онлайн-калькулятора плитки — tilely.ru. Этот патч получился довольно масштабным и затронул преимущественно трехмерный режим, в котором обнаружилось немало скрытых дефектов. Некоторые решения, казавшиеся очевидными на бумаге, на практике оказалось необходимо перерабатывать с нуля.

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

Хочу выразить отдельную благодарность пользователям за ценные замечания. Удалось устранить неприятный баг в схеме «ёлочка»: при использовании узких элементов (например, формата 10×60) раскладка иногда обрастала визуальными пустотами. Блокировать реальные строительные габариты было бы неправильно, поэтому полностью избавиться от артефактов на предельных значениях не вышло, однако при стандартных пропорциях проблема решена. Если же задать заведомо нереалистичные параметры вроде 11×60, система теперь не станет молча генерировать дыры, а заблаговременно предупредит о возможных несостыковках.

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

Главной головной болью было управление камерой. Случайное движение правой кнопкой мыши могло отправить комнату далеко за пределы видимости, а вернуть ее обратно удавалось только перезагрузкой вкладки из-за отсутствия кнопки возврата. Обычная точечная заплатка здесь не помогла бы, поэтому была спроектирована полноценная панель управления видами. Она расположилась в правом нижнем углу, зеркально повторяя интерфейс двумерного режима, что избавляет от необходимости привыкать заново. Теперь под рукой всегда есть изометрия, вид сверху, сетка, ортографическая проекция и сброс настроек.

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

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

Еще один раздражавший фактор: при переходе из трехмерного пространства в двухмерное для корректировки короба и обратно камера постоянно сбрасывалась к значениям по умолчанию. Теперь ракурс стабильно сохраняется. Более того, при переходе от просторных помещений к компактным масштаб подстраивается автоматически. Раньше после кухни ванная комната казалась крошечной точкой вдали, поскольку сохранялось прежнее удаление камеры.

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

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

Аудит производительности через Lighthouse заставил меня понервничать: показатели оказались удручающими. Раньше 3D-сцена рендерилась стабильно на скорости 60 кадров в секунду даже в статичном состоянии. Теперь отрисовка происходит исключительно в моменты активных действий — вращения камеры, изменения параметров или перемещения объектов. В режиме покоя нагрузка на процессор равна нулю. Итог: Performance — 90, Accessibility — 89, Best Practices — 100.

Далее по плану стоит проработка вертикальных поверхностей, ведь отделка не ограничивается одним лишь полом. Предстоит решить, как корректно моделировать ниши под полотенца или полочки в ванной, а также дверные и оконные проемы. Анализ аналогичных сервисов показал, что обычно там либо вся стена закатывается единым материалом, либо предлагаются жесткие готовые каталоги без возможности кастомизации. Создание акцентных зон и декоративных бордюров при таком подходе невозможно. Как именно реализовать этот функционал для редактирования — вопрос открытый. Скорее всего, логику придется закладывать в двумерном интерфейсе, хотя передать глубину и объем там сложно, так что впереди ждут эксперименты.

Напомню, ради чего затевался этот проект. Во время собственного ремонта мне до смерти надоело раскладывать плитку по всей квартире вручную в попытках понять, сойдется ли рисунок. В процессе тех экспериментов я даже случайно уронил и расколол ценный элемент — настоящий стресс, на какое-то время полностью отбивающий желание продолжать ремонт. Собственно, этот калькулятор создан как раз для того, чтобы подобные манипуляции происходили на экране монитора, а не на реальном полу. Буду признателен за любые отзывы, критику обнаруженных багов и идеи по улучшению сервиса. Прошлые комментарии уже не раз помогали в деле, так что это не пустые слова. Если вы сами планируете ремонт или знаете людей, занятых выбором материалов, протестируйте свои помещения в калькуляторе. Это займет минимум времени, но сильно поможет мне выявить скрытые ошибки и слабые места на реальных планировках, а не только на моей собственной ванной.

Если что-то пойдет не так, воспользуйтесь кнопкой «сообщить о проблеме» в интерфейсе и прикрепите ссылку на свой проект — это поможет быстрее локализовать и устранить сбой.

tilely.ru — абсолютно бесплатно и без обязательной регистрации.

Источник