HoverFit: Игра в фитнесе в WebXR

• Часть 1: Технология

Узнайте, как The Fitness Resort использовали Wonderland Engine для создания HoverFit, преодолев ограничения производительности Unity в вебе.

Технические вызовы с Unity Web 

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

Производительность Unity Web 

Когда команда The Fitness Resort начала разработку своего VR-тренажера для лыж с HTML5 (веб) экспортом Unity, они быстро столкнулись с серьезными проблемами производительности и узкими местами рабочего процесса:

• Длительное время итерации — Чтобы протестировать в браузере, им необходимо было ждать мучительные 15 минут или больше, что делало рабочий процесс разработки невероятно неэффективным, так как предварительный просмотр не может запустить JavaScript код для платформы Unity HTML5.

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

• Ограниченные возможности шейдеров и освещения — Для высококачественной графики требовалось реальное освещение и сложные шейдеры, но веб-экспорт Unity не мог эффективно с ними справиться.

• Огромные размеры файлов и долгие времена загрузки — Веб-сборка Unity привела к чрезмерно большим размерам файлов, даже пустому стартовому проекту требовалось более 25 МБ загрузки. Unity разработана для нативных платформ, таких как Steam, консоли или App Stores, где пользователи привыкли к полностью предварительной загрузке приложений во время установки. В Интернете пользователи ожидают, что приложение будет передаваться в потоковом режиме по запросу.

От идеи к реальности: Строительство веб-основы VR-фитнес платформы 

VR-фитнес развивается быстро, но создание VR-фитнес платформы, работающей полностью в вебе? Это была неизведанная территория.

В 2020 году основатели The Fitness Resort Инь-Чиен “Йинч” Йип и Тим Даджен, бывший олимпийский лыжник, решили исследовать возможности WebXR. Их видение было амбициозным: разработать VR-тренажер для лыж, который будет полностью работать в веб-браузере, при этом обеспечивая такую же производительность и визуальную точность, как и нативное XR-приложение.

После успешной разработки Ski Fit 365 с использованием Wonderland Engine, они увидели потенциал идти дальше лыж. Для Тима это видение было глубоко личным — как профессиональный спортсмен, он знал, насколько скучными могут быть традиционные тренировки в спортзале. Они решили выйти на новый уровень и разработать HoverFit, платформу для фитнеса следующего поколения в WebXR. С поддержкой многопользовательского режима, разнообразием виртуальных миров и интегрированным отслеживанием здоровья, HoverFit делает фитнес игрой, превращая тренировки в опыт, которым люди действительно наслаждаются.

Почему веб? Свобода, гибкость и будущность. 

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

— Yin-Chien Yeap

В области, такой как XR, где лучшие практики все еще формируются, разработчикам нужна свобода быстро итерации и экспериментов без ограничений. Закрытые платформы вводят высокие затраты и искусственные барьеры, что усложняет инновации. Веб позволил Yinch и его команде мгновенно развертывать, свободно обновлять и полностью контролировать свой творческий процесс без ограничений со стороны крупной компании.

Будущность была еще одним ключевым фактором. Новое VR оборудование постоянно выпускается. С нативным приложением каждое новое устройство требует интеграции и поддержания совместимости с новым SDK. В отличие от этого, WebXR приложения становятся доступны на новых устройствах, как только они поддерживают браузер.

Отличный пример этого — Android XR. Когда Meta и Google объявили поддержку Android XR, многие нативные разработчики сразу же столкнулись с вопросом:

Как мы можем портировать наши приложения для этой новой экосистемы?

Для WebXR разработчиков ответ был намного проще:

Просто дайте нам браузер, и мы готовы.

Такая свобода, гибкость и будущность — вот почему Йинч и Тим выбрали WebXR вместо нативного подхода.

Преодоление узких мест производительности: переход от Unity к Wonderland Engine 

Как разработчик Unity, Йинч естественно выбрал Unity для Ski Fit 365. Однако они быстро столкнулись с критическими узкими местами производительности, так как веб-экспортный конвейер Unity не справлялся с их требованиями к производительности. Несмотря на обширные усилия по оптимизации, они натолкнулись на потолок, не достигнув своих целей по дизайну, что оставило их без другого выбора, кроме как исследовать альтернативные решения.

Ища решения и обсуждая вызовы на сервере Discord WebXR, Джонатан Хейл из Wonderland Engine предложил попробовать Wonderland Engine, который был разработан для решения именно этих проблем.

Изначально Йинч сомневался — Unity была знакома, и смена движка означала начать все с нуля. Но, поскольку проблемы с производительностью продолжались, стало ясно, что Unity просто не могла удовлетворить их потребности.

Они совершили переход. Перестройка SkiFit 365 с помощью Wonderland Engine привела к значительному увеличению производительности, что позволило им предложить высококачественный опыт WebXR без технических узких мест, с которыми они сталкивались ранее.

Единственный 3D-движок, оптимизированный для веба. 

Помимо Unity, Йинч также экспериментировал с A-Frame и PlayCanvas. Хотя он считает, что PlayCanvas — это солидная WebGL платформа для определенных случаев использования, он видит ее, по сути, как редактор WebGL, а не как движок, ориентированный на WebXR. Это различие становилось все более важным по мере совершенствования их требований к проекту:

Фреймворки WebXR построены на WebGL, и функциональность WebXR часто добавляется как дополнительная нежели как приоритет движка. Вместо оптимизации для WebGL, WebGL рассматривается как ограничение. Wonderland Engine отличается — он создан с нуля для 3D-рендеринга на основе браузера. Этот подход делает Wonderland Engine единственным игровым движком, по-настоящему оптимизированным для крупномасштабных 3D проектов для веба и WebXR с высокими требованиями к рендерингу.

• Быстрое время итерации — Когда движок упаковывается прямо в браузер менее чем за секунду, упакованное приложение становится предварительным просмотром и весь код напрямую запускается в браузере. Это устраняет различия в производительности, визуализации и времени выполнения JavaScript.

• Оптимизированная производительность WebGL — Рендерер WebGL Wonderland Engine адаптирован к характеристикам производительности веба. Он объединяет даже тысячи динамических объектов в один вызов отрисовки на каждый тип шейдера, что приводит к нескольким вызовам отрисовки на сцену.

• Динамическое освещение — За счет радикальных оптимизаций вызовов отрисовки Wonderland Engine может обрабатывать множество динамических источников света даже с тенями в режиме реального времени в WebXR.

• Быстрое время загрузки — Благодаря специально разработанному двоичному формату файлов, который может быть передан по вебу потоком, как вы бы не загружали всю видеотеку, чтобы посмотреть видео на любимой платформе потокового вещания. Wonderland Engine загружает даже сложные сцены за считанные секунды, так как он загружает свои файлы прямо в память WebAssembly, вместо разбора текстового формата, такого как JSON или XML. Такие ресурсы, как анимации, текстуры и сетки, по умолчанию сжаты для передачи по вебу.

HoverFit на HeyVR

Играть сейчас

Wonderland Engine был единственным инструментом разработки, с помощью которого они могли выполнить все требования HoverFit:

• Рендеринг более миллиона треугольников в реальном времени на Meta Quest
• Динамическое освещение в реальном времени
• Не менее 60 fps на Quest 2 и 72 fps на Quest 3/Quest 3s
• Высококачественные шейдеры
• Полностью скинированные и настраиваемые аватары
• Поддержка многопользовательского режима
• Интеграция голосового чата