Когда сайт становится развлечением: зачем бизнесу игровые механики в браузере

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

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

Технологически всё это происходит непосредственно в браузере. Человеку не нужно устанавливать программу или игру — достаточно открыть ссылку.

От страницы к интерактивной сцене

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

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

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

Причина проста: некоторые идеи легче показать действием, чем объяснить несколькими экранами текста.

Рыба, которая живёт внутри браузера

Один из таких экспериментов — браузерная видеоигра.

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

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

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

Почему трёхмерный сайт заметно сложнее обычного

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

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

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

При этом пользователь всего этого видеть не должен. Для него результат должен выглядеть просто: открыл страницу — она работает.

Зачем компании делать что-то подобное

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

Зато интерактив становится интересным, когда сама форма подачи является частью сообщения.

Автопроизводитель может дать возможность рассмотреть машину и изменить комплектацию. Застройщик — показать жилой комплекс и окружающую территорию. Производитель оборудования — разобрать сложный агрегат на отдельные элементы. Музей — построить цифровую экспозицию. Бренд одежды — создать виртуальное пространство вокруг новой коллекции.

В этих проектах трёхмерность уже выполняет конкретную функцию.

Есть и другая категория — экспериментальные проекты. Их задача заключается не в объяснении продукта, а в создании опыта, который человек запоминает и которым хочется поделиться.

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

Браузер постепенно забирает функции приложений

Граница между веб-страницей и программой давно стала условной. В браузере работают графические редакторы, офисные системы, системы управления взаимоотношениями с клиентами, видеоконференции и сложные картографические сервисы. Трёхмерная графика продолжает тот же процесс.

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

Хороший интерактивный сайт приходится одновременно проектировать как визуальный объект и оптимизировать как программный продукт.

Что происходит с привычным веб-дизайном

Интерактивные проекты вряд ли заменят обычные корпоративные сайты. У них разные задачи.

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

Появляется ещё один инструмент коммуникации: вместо рассказа о продукте можно дать пользователю что-то сделать самому.

Иногда для этого достаточно небольшой анимации. Иногда получается целый мир с красной рыбой, которая летает по экрану браузера.