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

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

Будущее было другим ключевым фактором. Новое 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
• Высококачественные шейдеры
• Полностью анимированные и настраиваемые аватары
• Поддержка многопользовательского режима
• Интеграция голосового чата