Привет, меня зовут Глеб Любавский, и я руковожу отделом web‑дизайна Инновационного центра «Безопасный транспорт». Сегодня хочу рассказать, как мы впервые столкнулись с web 3D и AR, создали и продвинули несколько интересных проектов совместно с ЦОДД. Путь был не самым простым, но мы остались довольны результатом и зарядились энергией для того, чтобы работать над новыми амбициозными задачами и стать лучше, быстрее, сильнее!
Очень захотелось рассказать обо всем в деталях, поэтому я решил разделить статью на две части. Сегодня о том, как зародилась идея, как мы искали решение и как мы его реализовывали.
Как зародилась идея
Обсуждение проекта началось еще в 2021 году, когда весь наш отдел остро жаждал интерактивности. Как раз тогда появилась задача показать важность и разнообразие функций автопарка ЦОДД в увлекательном и доступном формате. Управление дизайна Инновационного центра «Безопасный транспорт» приступило к работе над классным креативным проектом — созданием интерактивной платформы, которая с помощью 3D и дополненной реальности решит эту задачу.
Всей командой мы устроили мозговой штурм, собрали мысли в рамках единого слайда и защитили наши идеи перед руководством. Питч удался, и было решено запустить проект.
Итак, мы решили разработать виртуальный «Гараж» автопарка ЦОДД, на котором спецтранспорт представлен в формате AR 360 градусов с указанием спецификаций и предназначения каждой модели.
Основными целями в работе над проектом были:
Продемонстрировать современность и технологичность транспорта ЦОДД
Раскрыть для себя новые возможности работы с 3D в онлайн-пространстве
Поиск решения
У нас было интуитивное понимание факта существования очень сложного для первых проектов WebGL и более дружелюбного (как нам тогда ошибочно казалось) three.js. В надежде найти курс «three.js за 2 недели», мы столкнулись с массой авторитетных мнений о нерелевантности запроса и отсутствии гарантированного результата.
Для поиска необходимых нам ответов оставался последний вариант: обратиться к доступному комьюнити отечественных дизайнеров в надежде отыскать специалиста по нужной нам библиотеке. И начался квест. Где мы только не искали. В чатах Telegram: из закрытого чата школы к белорусскому дизайнеру. От него — к новому, удивительно доброжелательному незнакомцу, который, в свою очередь, привёл нас в уютный ламповый чат художников и дизайнеров, занимающихся генеративным искусством.
Наконец, мы нашли нашего героя, который ёмко объяснил, что модель должна быть не из тридцати пяти миллионов полигонов, что просто так взять и написать текст в 3D-среде не получится, шрифт должен быть специальным и что есть ещё много других важных ограничений и особенностей при создании проектов с использованием three.js.
И мы принялись усердно разворачивать тестовую среду на бесплатных моделях из интернета.
Реализация
Модельки из интернета выглядели потрясающе, быстро крутились в собранных на опенсорсных ассетах сценах. Настала пора делать свои и пополнять ими виртуальную парковку. Тогда весной 2023 года мы даже не могли представить, сколько проб и ошибок нам предстоит преодолеть как и любому новичку, желающему добиться результата в незнакомой для него сфере.
Команда в составе арт-директора, фронтенда, моушна и дизайнера отправилась на стоянку ЦОДД, чтобы отфотографировать весь транспорт для дальнейшего переноса его в 3D-среду. Мы понимали, что нужны снимки со всех ракурсов и даже с крыши.
Увлекшись процессом, мы наснимали так много материала, что могли прекрасно представить, какая текстура должна находиться под левой стойкой багажника на крыше службы Дорожный патруль. Для чего? Тогда у нас еще не было ответа на этот вопрос. Но фотографии были получены. Каждая спица велопатруля, каждая кнопочка рации службы помощи на дорогах, каждая полосочка в оклейке и изгиб навесных экранов — у нас было всё.
Более того, уже имея за спиной опыт создания интерактивных экскурсий в дополненной реальности, мы обзавелись собственной камерой для съёмок «купольных» кадров с обзором на 360 градусов. Мы посетили каждый салон и багажник служебного транспорта.
Первая модель была создана путём значительной симплификации модели, найденной в интернете. Она изначально насчитывала более 500 000 полигонов. Нам удалось вогнать её в рамки 200 000, нарисовав фары фломастером и вырезав все возможные детали салона. Но тогда мы столкнулись с производительностью подобных 3D-сцен на мобильных устройствах и результат нам не понравился. Конечно же, мы поставили динамический свет и отражения. Текстуры, и модель чётко прорисовывались на любом удалении от камеры, а мы продолжали щедро намазывать модель 4К-изображениями. Первые результаты, воспроизводимые на мощнейшем из доступных нам ПК, нам очень понравились.
Но все было не так просто: последние модели телефонов попросту отказывались грузить сцену. Framerate приближался к частоте смены кадров в тамагочи. Тут ещё и новые проблемы для iOS-устройств появились (часть модели просто пропадала из сцены). Прекрасно, когда есть выбор. Немного грустно, когда это выбор из миллиарда возможных причин, по которым всё могло погибнуть и не работать.
Тогда мы обратились к трендовой платформе Vectary. Пришли к выводу, что для MVP нашего решения мы сконцентрируемся на процессе разработки, оптимизации и текстурирования моделей, а дальше обязательно разберёмся с пресловутым кодом three.js и наверняка сделаем потом полностью свои сцены.
Мы начали осваивать новую среду, неожиданно для себя обнаружив, что она и текстуры оптимизировать помогает, и анимации позволяет, да ещё и дополненную реальность буквально по щелчку пальцев включает, самостоятельно генерируя .gltf для Android и .usdz для iOS-устройств.
На этом этапе мы уже приобрели определенную экспертизу. Обогащенные знаниями и точным пониманием предметной области мы смогли ускорить производство самих моделей. Вот наши инсайты на тот момент:
-
Низкополигональные модели:
Удерживать сетку в диапазоне от 20 до 40 тысяч треугольников.
Максимально допустимое значение для работы модели в дополненной реальности (AR): 50 тысяч треугольников.
Неравномерная полигональная сетка.
Формат модели: gltf.
Максимальное количество материалов: 6–8 штук (1 материал = 1 Mesh).
На основе собранной модели создается UV-развёртка (проецирование изображения на грани 3D-модели).
Three.js будет создавать уменьшенную вдвое версию текстуры многократно, пока не получит текстуру 1×1, что очень сильно снижает производительность. Поэтому ширина и высота текстуры должны быть кратны 2.
Максимальное количество текстур для одной модели: 10 штук. Чем меньше, тем выше производительность. Необходимо объединить несколько текстур в один текстурный атлас для сокращения итогового количества и, как следствие, увеличения производительности.
-
Форматы текстур:
Для прозрачных текстур: PNG.
Для непрозрачных текстур: JPG.
Можно использовать формат WEBP (он поддерживает все виды — прозрачный и непрозрачный, плюс меньше вес), но могут возникнуть сложности при использовании модели в AR.
Тем не менее, это всё никак не гарантировало, что стёкла в дополненной реальности будут выглядеть идентично на (!) одной и той же модельке. Просто, просматривая через камеры нашего отдела результаты собственных трудов, мы постоянно видели то закатанную в глухой тонер машину, то катер с просвечивающим корпусом, то велосипед со спицами, но без колёс. Таких примеров было невообразимое множество.
Причем ситуация постоянно менялась от устройства к устройству. Но мы решили не унывать: провели ревью имеющихся моделей, задокументировали и отсортировали возникающие неурядицы, в результате чего получили более систематическое понимание и классификацию имеющихся у нас проблем. Где-то экспорт из Blender вывернул нормали. Где-то способ создания текстуры стекла не соответствовал общему канону. Где-то альфа-канал был недостаточно альфа-каналом. Всё это мы правили, бесконечно перезаливая и тестируя модели в сцене Vectary, потом располагая их через embed-код в собственном проекте. В конце концов ни тонированных, ни прозрачных, ни висящих в воздухе уже не было. Ничто не осталось незамеченным.
Решение было собрано, текстуры оптимизированы, и настала пора представить проект. Как продвинуть некоммерческое решение. Конечно же, креативом! Был организован фотоконкурс с AR‑моделями, в рамках которого в Telegram‑канале Московского транспорта проводился розыгрыш лимитированных карт «Троек» с зеброй. Правила были максимально простые: «Покажите красивые, весёлые и просто интересные фотографии, сделанные с транспортом в нашем AR‑гараже, и мы определим победителя». Вот несколько вариантов того, что присылали любители транспорта в форму приёма заявок на конкурс:
В этот момент мы решили воспользоваться возникшей паузой и качественно усилиться, изучив курс по three.js, чтобы размеренно и комфортно перевести проект на собственные рельсы в течение следующего года. Оказалось, это было не напрасно.
В следующей статье мы расскажем, как мы прокачали знания в 3D, перезагрузили проект и адаптировались к новым вызовам, а также расскажем о продвижении проекта.