Как физика помогает отдыхать от дедлайнов в первом в мире киберспа

Создание уникальных веб-проектов — это непрерывный поиск таких решений, которые захватят сердечки и пользователей, и заказчиков. Рассказываем на примере разработки проекта Cyber Spa для «Лаборатории Касперского», почему эти решения не бывают типовыми.

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

Замысел сайта, где можно отдохнуть от рутины, появился в разгар локдауна в 2020 году. Агентство DDB совместно с заказчиком — «Лабораторией Касперского» — определили будущий проект как пространство технологической комплексной релаксации. Также сразу была обозначена визуальная концепция: соединить природное, как атрибут традиционных спа, и цифровое, поскольку действие происходит в браузере.

Амбициозный план предполагал, что придется провернуть большую работу: не только по диджитал-части, но и с привлечением других узких специалистов. И пока в DDB дорабатывали концепцию, мы приступили к самой трудоемкой части разработки: киберспа-процедурам. Их было придумано четыре: две активных, где требуется выполнять определенные действия, и две медитативного характера.

Флагманская процедура — «Диджитал-слайм». Для пользователя это сфера, которая живет в трех состояниях: резина, вода и дым. При этом реалистичных текстур недостаточно, поскольку объект должен быть интерактивным: когда пользователь касается его курсором или пальцем (на мобильных устройствах), он должен давать отклик — резина сжимается, по воде идет рябь, дым рассеивается.

Кажется, ничего сложного: кого удивишь 3D в вебе, когда каждый второй фестивальный сайт играет с ним, а в библиотеках three.js полно примеров — бери похожее и адаптируй. Вот только в проекте с особыми требованиями к плавности отклика адаптация должна быть грамотной.

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

В основе поведения поверхности водного слайма лежит физический расчет океанской волны, но для отклика в реальном времени классических алгоритмов на CPU недостаточно: нужно было одновременно считать все точки поверхности. Для этой цели мы задействовали compute shaders — технику проведения расчетов через GPU.

Обычно GPU применяют для расчета цвета пикселей с выводом сразу в картинку; в нашем случае он считал уровень волны для каждой точки. Так мы решили проблему реалистичности отклика.

Для резины мы взяли то же описание волны, но изменили параметр вязкости и добавили эффект памяти, чтобы деформированная поверхность восстанавливалась постепенно.

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

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

Остальные процедуры опираются на уникальный медиаконтент. Для «Технозвуковой терапии» агентство привлекло композитора, который создал три эмбиент-трека. А в «Бесконечном спокойствии» зациклены самые приятные вещи на свете: как горит огонь, искрится вода, и кто-то делает не твою работу.

Из-за специфики проекта особое внимание уделялось UI и проработке анимаций: в киберспа ничто не должно раздражать, отвлекать или рассеивать внимание пользователя.

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

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

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

Сегодня, через 1,5 года после релиза, сайт переживает ренессанс: к классическому интерфейсу добавлен режим Game Mode, который меняет природную концепцию на высокотехнологичный рай для геймеров. Элементы природы и воды оттеняются акцентными киберспортивными гаджетами, привычными для потенциальных отдыхающих в gamers resort.

Мы же, как и DDB, смогли расслабиться и поверить в успех проекта сразу после того, как он заслужил FWA — за сильную идею и отличное владение точными науками для её реализации.