Калькулятор плитки: фото вместо цвета и 3D, который наконец не бесит

Всем привет, это третья часть, в которой пилю калькулятор плитки - tilely.ru. Получился довольно крупный патч, в основном вокруг 3D-режима, и там оказалось прилично багов. Многое пришлось переделывать из того, что сначала казалось логичным, а на практике оказалось вообще неудобным.

Перед самим 3D - то, что допилил ещё раньше в очереди. Теперь можно загружать фото плитки, чтобы не смотреть на однотипные прямоугольники одного цвета. Есть кнопка «применить ко всем комнатам». Если у вас, скажем, санузел и кухня одной плиткой идут, не надо грузить фото дважды. Так же теперь можно выбирать цвет швов, а то они были всегда одного цвета, и картинка порой сливалась.

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

Теперь про сам 3D-режим. Тут пришлось переделывать больше всего. Он у меня был с самого начала, но скорее «красивая картинка для галочки». Покрутил комнату, порадовался, закрыл. Работать в нём было неудобно, и я это прекрасно знал, потому что сам же и страдал.

Главная боль была в камере. Крутишь комнату, случайно зажимаешь правую кнопку и комната улетает за экран. Вернуть её можно было только перезагрузкой страницы, потому что кнопки «назад» не было вообще. Чинить это в лоб, одной кнопкой, не хотелось, решил сразу делать нормальную панель видов. Находится она справа внизу, ровно там же, где контролы в 2D, чтобы не переучиваться. Изометрия, вид сверху, сетка, ортографическая проекция, сброс.

Вид сверху сделал отдельной кнопкой не для красоты. Крутить камеру каждый раз, что бы посмотреть четко сверху, то еще удовольствие. Теперь один клик и смотришь на план строго сверху. Заодно прикрутил ортографическую проекцию. Это режим, где параллельные линии остаются параллельными, как на чертеже. В перспективе швы визуально сходятся, и соосность швов у стены и у короба глазом не проверить. Фича может пригодиться в дальнейших этапах, а сейчас пока пусть будет как бонус.

Добавил плавности в переключении видов вместо мгновенного телепорта. Казалось бы мелочь, но с телепортами мозг каждый раз заново собирал картинку «где я», а с перелётом просто следишь глазами.

Ещё одна штука, которая постоянно раздражала - настраиваешь ракурс в 3D, переключаешься в 2D подвинуть короб, возвращаешься, а камера сброшена на дефолт. Теперь ракурс запоминается между переключениями. А при переходе из большой комнаты в маленькую камера сама подгоняет масштаб. Раньше ванная после кухни показывалась точкой вдалеке, потому что камера оставалась на кухонной дистанции.

Плитка в 3D теперь интерактивная. Наводишь курсор на плитку, всплывает её размер. Подрезки тоже показываются, со своими реальными размерами, то есть ту узкую полоску у стены больше не надо идти искать в 2D, чтобы понять, восемь там сантиметров или двенадцать. Добавил когда отлавливал баг, думаю можно будет вынести эту настройку во включаемые опции, как сетку.

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

Ужаснулся когда зашел в Lighthouse, показатели были ужасные. 3D раньше рисовал 60 кадров в секунду постоянно, даже когда на экране ничего не двигается. Теперь кадр рисуется только когда что-то меняется: крутишь камеру, меняешь плитку, двигаешь комнату. В покое ноль кадров. Performance - 90, Accessibility - 89, Best Practices - 100.

Дальше по плану заняться стенами. Не только же плитку на пол кладут. Нужно придумать как делать ниши (например для полочек в ванной), проемы под двери / окна. Посмотрел на других проектах, там либо стена закатывается в одну плитку, либо уже готовые коллекции, где нельзя ничего редактировать. Акцентные стены, декоративные полосы - не сделать. Как это будет редактироваться? Пока не знаю. Как будто бы нужно делать в 2D, но там не передать ни глубину, ни объём, поэтому буду думать, экспериментировать.

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

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