3D на 3D на 3D: как мы создавали Музей курьера для Самоката

Привет! Это Chipsa. Хотим рассказать, как мы создали виртуальный Музей курьера для Самоката. Это наш самый большой и амбициозный спецпроект, который не имеет аналогов в России.

К нам обратился онлайн-магазин Самокат. Команда хотела сделать интерактивный музей истории курьерства – от античных времён с пешими гонцами до современности с курьерами на велосипедах. После общения с заказчиком появилось примерное понимание, как этот музей должен выглядеть: тематические комнаты, аутентичная атрибутика, экспонаты и артефакты, которые посетитель будет разглядывать. В остальном – полная творческая свобода. Иными словами, проект под ключ. Или, как сказала наша проджект-менеджер Мария Андреенко, «3D, помноженное на 3D».

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

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

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

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

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

Некоторые моменты требовали неочевидного подхода. К примеру, чтобы создать текстуры упаковок продуктов Самоката, которые выполняли роль пасхалок в залах, наш 3D-дизайнер Антон Чугунов заказывал эти продукты домой через доставку. Потом резал упаковку, фотографировал и фотошопил – и так несколько раз с каждой позицией.

Велосипед изобретать не стали – сайт решили разрабатывать на WebGL, на стеках React и Three.js. Особое внимание уделили мобильной версии, так как это львиная доля пользователей Самоката. Было важно, чтобы музей быстро и комфортно грузился даже на слабых смартфонах.

Из-за того, что проект хотели запустить ко Дню курьера, разработка шла параллельно с дизайном, каждая комната моделилась в изоляции. Пока дизайнеры рисовали интерфейс и занимались 3D, разработчики обкатывали отдельные механики – добавляли возможность перемещаться по скроллу, вращать камеру и не только. Это, конечно, усложняло работу. С одной стороны, она шла быстрее, с другой – требовала лишних действий. К примеру, для экспериментов на фронтенде пришлось выгрузить из блендера приблизительный путь камеры, чтобы понимать, как она будет двигаться.

Для мобильных устройств мы сделали облегчённые модели с меньшим разрешением текстур. Это позволило снизить размер файлов в 6-7 раз и сократить размер потребляемой видеопамяти. Но не обошлось и без факапов: за 5 дней до запуска «Айфон» отказывался грузиться дальше прелоадера и уходил в бесконечный ребут. К счастью, смогли это оперативно пофиксить, а проблема крылась в закончившейся памяти.

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

На наш взгляд, одна из главных особенностей проекта – работа в большой команде, которая отражает его масштаб и сложность. Это требовало и индивидуального творчества, и коллективного взаимодействия, а людям, которые раньше друг с другом настолько плотно не работали, приходилось это делать. Мы учились делегировать и доверять, а не контролировать каждую мелочь.

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

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

Когда запустили сайт, возникли проблемы с долгой загрузкой. Мы хотели, чтобы пользователь из любого уголка страны мог получить доступ к музею как можно быстрее. Захостили статические ассеты на CDN, тем самым разгрузив основной сервер. Сайт начал летать – несмотря на огромный вес и большой трафик пользователей. Это касательно технической части.

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

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