Киберспа для геймеров от «Лаборатории Касперского» и DDB Russia

О проекте Cyber Spa

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

Cyber Spa: версия для геймеров

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

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

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

Нам было важно было адаптировать пространство Cyber Spa под привычную для любителей игр стилистику. Внедрили тёмную тему, которая, как известно, помогает сосредоточиться и снять напряжение с глаз при работе в условиях низкой освещённости. Добавили узнаваемые элементы из мира компьютерных игр и соответствующие визуальные эффекты (глитч, неоновая подсветка, наложение интерфейсных элементов).

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

При этом нам удалось ненавязчиво рассказать и об опции Game Mode от «Лаборатории Касперского», включённой в Kaspersky Home Security, которая во время игры блокирует все всплывающие окна, позволяя не отвлекаться от игрового процесса, и при этом защищает компьютер. Всем пользователям CyberSpa в режиме Game Mode доступна бесплатная пробная версия.

Реализовывать и развивать проект нам помогали наши партнёры, студия веб-разработки ZBRSK. Вместе с ними рассказываем, как происходила техническая разработка проекта и какие нетиповые решения были использованы для создания Cyber Spa.

От маленькой идеи к большим планам

Проект Cyber Spa в начале его разработки был определён как пространство технологической комплексной релаксации. Также сразу была обозначена визуальная концепция: соединить природное как атрибут традиционных спа и цифровое, поскольку действие происходит в браузере.

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

Их было придумано четыре: две активных, где требуется выполнять определённые действия, и две процедуры медитативного характера.

Учимся у природы

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

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

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

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

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

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

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

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

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

Как заставить сайт дышать

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

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

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

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