От проблем к возможностям. Новый путь в 3D

В предыдущей части я рассказал, как зародилась идея, как мы искали решение, и как мы его реализовывали.

И вот, проект работает, но мы понимаем, что нужно прокачивать знание 3D. Нужно сделать всё так же, но использовать свой код для сцен.

Командный фронтенд плотно засел за новым курсом. Можем смело рекомендовать. Объяснение интересное, проекты интерактивные, комьюнити дружелюбное, как и полагается в настоящей творческой среде.

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

Чего мы не учли, так это того, что в середине октября 2024 года сервис Vectary, без каких-либо баннеров и объявлений, просто заблокирует наши сцены, оставив нас с бесконечно подгружающимися, но так и не появляющимися страницами.

Что нам оставалось делать в этой ситуации? Делать сервис быстрее, выше, сильнее уже здесь и сейчас! Мы с хирургической точностью вычистили из сцен все упоминания Vectary, установили заглушки с самыми глубокими извинениями перед нашими пользователями за доставленные неудобства и пообещали в скорости вернуться с лучшей версией. Наметили план к празднованию 25-летия ЦОДД в декабре — вернуть платформу в онлайн, сразу создавая решение кодом без поиска подмен и альтернатив.

Начало исследования вопроса показало, что нам нужно пересобрать не только код, но и полностью обновить наш виртуальный автопарк, собрав абсолютно с нуля low-poly модели за предстоящие пару месяцев.

Как мы перезагрузили проект и адаптировались к вызовам

В процессе редизайна транспорта мы сделали следующее:

уместили все модели в лимит 50 000 полигонов, полностью пересобрав каждую из них с нуля;
сократили количество текстур до состояния «не более пяти»;
в качестве максимального разрешения для самых объёмных текстур оставили 2048×2048, чтобы сохранить баланс качество-быстродействие (большинство же текстур увели в куда меньшие размеры).

Тут важно отметить, что навязчивое желание некоторых компаний переводить своих пользователей на внутренние стандарты и без того регулярно создает проблемы при разработке даже простых веб-сайтов (уверен, что каждому знакома необходимость детально высматривать каждое свойство CSS и метод JS на предмет корректности отработки в Safari).

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

Model-viewer от Google
Это кроссбраузерное решение прекрасно работает на мейнстримных ОС, чем крайне радует нас и, надеюсь, обрадует каждого, кто только мечтал это сделать.

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

HDR тут означает «High Dynamic Range» (мы часто говорим «HDRI», где «I» = «Image»). Хранимые значения цвета имеют гораздо больший диапазон, чем традиционное изображение, что делает его идеальным для хранения данных о яркости.

HDRI, в свою очередь, мы заготовили, создав заранее сцену в Blender, установив внутри неё камеру с объективом, имитирующим съёмку на 360 градусов, и экспортировав это всё как изображение. Таким образом, всё имеющееся в сцене окружение не тратит наши ресурсы при загрузке страницы и просто раскатывается на окружающее модель пространство для создания 3D-эффекта. Чтобы добиться этой оптимизации, мы подгружали наш 360-градусный JPEG в сцену через HDRJPGLoader и использовали GroundedSkybox, чтобы создать эффект, что модель стоит на земле, а не подвешена в воздухе, как это было бы в случае использования обыкновенного skybox.

Даже имея знания, опыт и все необходимые компетенции, мы столкнулись с неожиданным поведением моделей в сценах. Всё это пришлось, конечно же, преодолеть, но сразу хочется поделиться с потенциальным читателем:

На моделях могли появляться артефакты, напоминающие вмятины, но с помощью инструментов сглаживания и ручной работы эти недостатки удавалось устранить.
Ещё раз повторимся насчёт текстур. Если переборщить и поставить для модели текстуры более чем 2К, то даже в самом современном iPhone забьётся кэш, и сцена перестанет грузиться. Более того, вес текстуры не имеет значения. Нагрузка на рендер идёт в основном по разрешению. Поэтому простым облегчением текстур или использованием формата WEBP здесь не достаточно.
Не обошлось без трудностей с материалами. Стандартный стеклянный материал из Blender корректно отображался в сценах three.js, но в дополненной реальности стекла становились непрозрачными. После экспериментов мы нашли рабочее решение: настройка параметра Opacity на уровне 0.7 и корректировка свойств материала позволили добиться нужного результата как в сцене, так и в AR.
Интересно, что если у модели, используемой в AR, не отключены тени, то на Android-устройствах она начинает левитировать в воздухе, так и не закрепившись на поверхности.
Недостаточно плотно состыкованная модель, имеющая разрывы в геометрии, будет вызывать неожиданную ошибку при выводе в AR на устройствах Android. В сцене работает, на iOS работает, а вот Android это дело упрямо игнорирует. Рекомендуем тут плотно отсмотреть, не отрезан ли какой кусочек для будущей анимации. Тут лучше либо уже совсем запаивать, либо изначально детально моделить нужное пространство без разрубания готового мэша на частицы, которые в дальнейшем можно будет «спрятать» за каким-то целевым объектом анимации. Такое тут не пройдет.

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

Подход к тиражированию и продвижению

Очевидно, что в предыдущей части статьи я несколько преувеличил запоздалость наших намерений по продвижению проекта. Мы давно обратили внимание на огромные экраны, расположенные в павильоне Московского транспорта у станции метро «Киевская» и обратились к ответственным за размещение в павильоне с предложением о продвижении нашего сайта через интерактивные ролики. Как здорово, что в это же время формировался кей-визуал для поздравления ЦОДД с 25-летием. Мы предложили концепцию, в рамках которой для павильона готовилось видео о проекте с последующим предложением узнать о нём больше. Тут лучше не рассказывать, а показывать. Только посмотрите, что у нас получилось:

Видео можно посмотреть по ссылке — Видео можно посмотреть **по ссылке**

Ролик понравился и его вывели даже на Единый диспетчерский центр Московского метрополитена на Дмитровке (далее — ЕДЦ) и на экраны в поездах метро.

Вместо выводов — эмоции

По итогам проекта есть лишь радость от того, что начав с околонулевого понимания буквально за год мы набрали серьёзную компетенцию в web 3D — как в плоскости кода, так и моделирования объектов.

Я искренне благодарю нашего руководителя Тимофея Пенского за то, что он убедил всех, что это не просто «возможно», но ещё и «нужно», подбадривал нас и был с нами плечом к плечу на каждом этапе.

Работа наших 3D-механиков Арсения Л. и Вадима достойна настоящих аплодисментов. Без кудесника фотошопа Арсения Г. не было бы наших кадров интерактивных экскурсий по салону. Вы все – крутые специалисты и невероятные люди, с которыми тепло и приятно общаться, трудиться и смотреть в будущее.

Отдельная благодарность начальнику ИЦ «Безопасный транспорт» Александру Евгеньевичу Афанасьеву, который позволил предложить, продвинуть и плотно работать над этим проектом.

Также хочется отметить всех участников проекта, работавших над ним на различных этапах его жизни:
Артём — web-дизайн
Настя — motion
Рита — web-дизайн

Спасибо всем за участие! Посетить наш сайт и увидеть результаты проделанной работы можно по этой ссылке.

Проект “Гараж ЦОДД”: новый путь в 3D